React + Jest + VS Code 환경에서 ESLint를 단순화합니다.

ESLint란?

공식적으로,

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

코드의 일관성을 유지해 버그를 막는 것을 목적으로 한, JS 코드의 패턴을 검지·보고 툴,이라고 하는 것. 유사한 것에는 JSHint가 있다.

나는 VSCode에서 코드의 실수를보고하고 싶었기 때문에 처음으로 설정해 보았습니다. VSCode상에서 자동으로 린팅하기 위한 최저한의 설정이 되기 때문에, 일단 간단하게 사용해 보고 싶은 사람의 참고가 된다고 생각합니다.

최종 파일 구성은 다음과 같습니다. 그렇다고 해도 .eslintrc.js 를 더하면 됩니다.

.
├── .eslintrc.js
├── node_modules
├── package-lock.json
├── package.json
├── sample.js
└── tests
    ├── .eslintrc.js
    └── sample.test.js

ESLint 설치 및 설정

$ npm install --save-dev eslint

설치가 끝나면 최상위 계층에 구성 파일을 만듭니다.
( $ npx eslint --init 명령으로 구성 파일을 만들 수 있음)

다음과 같이 ES6를 활성화하여 노드 환경임을 설정합니다.

.eslintrc.js

module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
        ecmaVersion: 6,
    },
    env: {
        node: true,
    }
}

※ eslint:recommended는 추천 룰을 모두 설정한다.
유효하게 되는 룰은 이하의 링크내에서 체크가 붙어 있는 것.
htps : // / ss t. 오 rg/도 cs/루ぇs/

※ 프로그램이 움직이는 환경을 env로 정의한다.

이 시점에서 다음과 같이 특정 파일에 대해 ESLint를 실행할 수 있습니다.

$ npx eslint <filename>

오류가 없으면 아무 것도 표시되지 않습니다.

Jest 환경에서 ESLint 설정

현재 Jest에서 테스트가 작성된 파일에 대해 다음과 같이 Lint하려고 해도 'describe' is not defined나 'it' is not defined와 같은 오류가 발생합니다.

$ npx eslist jest.test.js  // エラーが出る

설정 파일에서 env 설정을 추가할 수도 있지만 플러그인이 있으므로 그것을 사용한다.

$ npm install --save-dev eslint-plugin-jest

처음에 작성한 최상위 계층에 있는 .eslintrc.js에 설정을 추가할 수는 없지만, 테스트 프로그램 이외에도 Jest Plugin의 관리 대상에 들어가 버려 그다지 바람직하지 않으므로, 다음과 같이 테스트 프로그램용 tests 폴더를 만들고 그 아래에 새 .eslintrc.js를 만듭니다.

tests/.eslintrc.js

module.exports = {
    plugins: ['jest'],
    extends: ['plugin:jest/recommended'],
}

※tests 폴더 아래의 코드도 톱 계층에 있는 .eslintrc.js의 영향을 받는다.

마지막으로 Jest로 쓴 테스트 프로그램도 올바르게 Lint 할 수 있으면 OK!

$ npx eslist sample.test.js

VSCode에 ESLint 통합

현시점이라면 일일이 커맨드를 칠 필요가 있으므로, VSCode로 자동으로 체크해 주는 듯 플러그인을 넣는다.

VSCode의 Extension에서 eslint를 검색하여 Dirk Baeumer 님의 플러그인을 추가하십시오.


다음과 같이 텍트한 문자를 넣으면 에러 표시해 준다. 화면 왼쪽 하단에 있는 곳에 에러수도 표시되는 편리.

(옵션) 코드 타입이 아닌 코드 저장시 ESLint가 움직이도록 설정

디폴트라면, 문자 입력중에 ESLint가 움직임 적선이 표시되어 버리지만, VSCode의 User setting (화면 상부 Code 탭 > preferences > setting) 로부터 ESLint가 움직이는 타이밍을 변경할 수 있다.

eslint.run 의 값을 onType => onSave 로 변경하는 것으로, 파일 보존 후에 움직이게 된다.