ESLint 설치와 기본 사용 방법 - Linting Tool

1. 터미널에서 프로젝트 폴더로 들어간다.

 

2. 다음을 입력해서  ESLint를 설치한다.

 

npm install eslint --save-dev

 

3. 다음을 입력해서 configuration 파일을 설정한다.

 

npx eslint --init

 

4. 다음을 입력해서 ESlint로 폴더나 파일을 검사할 수 있다.

 

npx eslint 파일.js

 

5. .eslintrc 파일 설정에 따라서 통과 여부가 달라진다.

 

{

    "extends": "eslint:recommended",

    "rules": {

        "semi": ["error", "always"],

        "quotes": ["error", "double"]

    }

}

 

rules의 키에 뭐가 오느냐에 따라 에러로 표시되는 코드가 달라진다.

 

error는 semi 조건에 해당하는 코드가 있으면 error를 표시하겠다는 뜻이고

error 대신 off를 쓰면 semi 조건은 통과한다.

 

그밖의 조건을 추가하고 싶다면 아래 링크를 참고하자.

https://eslint.org/docs/rules/

 

 

"extends": "eslint:recommended"는

위 링크 리스트에서 체크 표시된 조건들을 추가하겠다는 뜻이다.

rules에 넣은 것과 마찬가지로 추가된 조건에 해당하지 않는 코드에 에러를 표시한다.

 

참고 : https://eslint.org/docs/user-guide/getting-started

 

비쥬얼 스튜디오 코드의 ESLint 익스텐션을 적용하면

비쥬얼 스튜디오 코드의 화면에서 에러가 있는 코드에 빨간줄이 그어진 걸 볼 수 있다.