VSCODE에서 ESLint 설정하고 사용하기

27 Dec 2019

Reading time ~1 minute

VSCODE에서 ESLint 설정하고 사용하기

다음이 이미 설치 되어 있다는 전제하에 시작한다.

nodejs
vscode

plugin 설치

먼저 vscode에 ESLint plugin을 설치한다.

ESLint 모듈 설치

$ npm install -g eslint

프로젝트에서 .eslintrc.js 생성

$ eslint --init

해당 명령어를 입력하면, 어떤 설정을 사용할 것인지 물어봅니다.

나중에 수정이 가능하니 부담없이 자신이 사용하는 설정 위주로 선택 합니다.

설치가 완료 되면 .eslintrc.js 파일이 생성된다.

나중에 자신이 원하는 규칙이 있으면 rules에 입력하면 된다.

ESLint Rules

js 파일을 확인해보자

위의 그림과 같이 빨간 줄이 확인된다.

룰에 알맞게 수정하거나, 룰을 disable 처리 할 수 있다.

eslint 점검

eslint . 명령어를 이용하면 해당 프로젝트에서 발생한 모든 문제점을 파일 별로 표기해준다.

$ eslint .
... 여러 파일들 표기
/path/dir/getSunday.js
   5:3   warning  Unexpected console statement                          no-console
   5:22  error    Missing semicolon                                     semi
   8:3   error    Expected space(s) after "if"                          keyword-spacing
   8:31  error    Missing space before opening brace                    space-before-blocks
  12:1   error    Block must not be padded by blank lines               padded-blocks
  12:2   error    Missing semicolon                                     semi
  14:7   error    'getPreviousYear' is assigned a value but never used  no-unused-vars
  15:3   warning  Unexpected console statement                          no-console
  16:3   warning  Unexpected console statement                          no-console
  17:2   error    Missing semicolon                                     semi
  19:18  error    Newline required at end of file but not found         eol-last

✖ 164344 problems (160511 errors, 3833 warnings)
  113564 errors and 0 warnings potentially fixable with the `--fix` option.

참고 자료

ESLint Rules