[ESLint] ESLint 시작하기

ESLint란?

ESLint란 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출하는 분석 도구이다.
코드를 분석하여 문법적인 오류나 안티 패턴을 찾고 일관된 코드 스타일로 작성할 수 있도록 도와준다.
ESLint는 유용하게 사용할 수 있도록 style-guide를 제공한다.
대표적으로 Airbnb Style Guide, Google Style Guide이 있다.
개발자가 직접 style-guide를 작성할 수도 있다.

Install

   $ npm install eslint --save-dev

   $ mkdir eslint_sample  // 프로젝트 폴더 생성
   $ cd eslint_sample/    // 프로젝트 이동

   $ npm init             // 프로젝트 생성
  
   // eslint 설치 
   $ npm install eslint --save-dev 

프로젝트 구조

    eslint_sample/
        ├── node_modules/
        ├── package-lock.json
        └── package.json

Configuration Files

환경설정 파일에 대한 자세한 설명은 Configuration File Formats를 참조.

ESLint는 여러 형식의 구성 파일을 제공한다.

JavaScript
JavaScript (ESM)
YAML
JSON
package.json

프로젝트 최상위 디렉토리에 여러 구성 파일이 있는 경우에는 ESLint는 하나의 구성파일만 사용한다. 그 우선순위는 다음과 같다.

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

.eslintrc.js를 최상위 디렉토리에 생성합니다.

Configuration Files 작성방법

rules

ESLint는 검사 규칙을 제공한다. 자세한 내용은 Rules를 참조.

그 중 하나인 no-extra-semi를 적용.

밑에 disallow unnecessary semicolons라고 되어있다. 즉 불필요한 세미콜론을 허용하지 않겠다는건데 어떻게 적용되는지 확인해보자.

규칙을 설정하는 값은 3가지로

“off” or 0 - turn the rule off, 규칙을 끔
“warn” or 1 - turn the rule on as a warning (doesn’t affect exit code), 규칙을 경고로 설정(종료 코드에 영향을 주지 않음)
“error” or 2 - turn the rule on as an error (exit code is 1 when triggered), 규칙을 오류로 설정(트리거될 때 종료 코드는 1)

    module.exports = {
        rules: {
            "no-extra-semi": "error",
        },
    }

./app.js 를 생성하여 세미클론을 여러개 작성해본다.

    var x = 30;;

    console.log(x);;

실행해보면 불필요한 세미클론 수 만큼 error 메시지를 출력한다.

    $ npx eslint app.js
        
    E:\study\frontend\eslint_sample\app.js
    1:12  error  Unnecessary semicolon  no-extra-semi
    3:16  error  Unnecessary semicolon  no-extra-semi

    ✖ 2 problems (2 errors, 0 warnings)
    2 errors and 0 warnings potentially fixable with the `--fix` option.

error 메시지 맨 밑에
“2 errors and 0 warnings potentially fixable with the --fix option.” 문구를 보면 --fix 옵션을 줘서 자동으로 수정할 수 있는 옵션이 있다.

    $ npx eslint app.js --fix

자동으로 세미클론을 수정.

    var x = 30;

    console.log(x);

이번에는 no-unused-vars(사용하지 않는 변수를 허용하지 않음) 규칙을 추가해보자.

    module.exports = {
        rules: {
            "no-extra-semi": "error",
            "no-unused-vars": "error",
        },
    }

    var x = 30;;
    var y = 20;

    console.log(x);;

    $ npx eslint app.js --fix
        
    E:\study\frontend\eslint_sample\app.js
    2:5  error  'y' is assigned a value but never used  no-unused-vars

    ✖ 1 problem (1 error, 0 warnings)

결과:

    var x = 30;
    var y = 20;

    console.log(x);

불필요한 세미클론은 제거가 되었는데 var y = 20;은 수정이 되지 않고 error 메시지만 출력한다. 왜 그럴까?
ESLint의 모든 규칙은 --fix가 적용되는 게 아니다.

밑의 사진을 보자
왼편에 no-extra-semi는 수리 이모티콘이 있고 no-unused-vars는 수리 이모티콘이 없다.
즉, 수리 이모티콘이 있는 규칙만 --fix가 적용되기 때문에 개발자는 error 내용을 직접 수정 해야한다.

Using [eslint:recommended]

사용자가 필요한 규칙들을 일일이 명시하여 사용하는게 얼마나 귀찮은 일인가…

따라서, ESLint는 규칙을 유형별로 그룹화하여 제공한다.

그것이 eslint:recommended이다. babel의 프리셋이라고 생각하면 된다.

이것을 사용하기 위해서는 extends 설정을 추가한다.

    module.exports = {
        extends: [
            "eslint:recommended", 
        ],
    }

rules 적용된 목록을 확인해 보시면 왼편에 체크 이모티콘이 표시된 규칙들이 해당 설정에 적용되어 있다. 이외 추가적인 규칙이 필요하면 직접 rules에 추가하면 된다.

–init

configuration file을 구성하는 가장 쉬운 방법은, --init 플래그를 사용하는 것이다.

--init을 명령하면 대화식 명령으로 어떻게 구성할 건지 물어보는데, 목적에 맞게 선택하면 된다.

    $ npx eslint --init
    √ How would you like to use ESLint? · problems
    √ What type of modules does your project use? · esm
    √ Which framework does your project use? · none
    √ Does your project use TypeScript? · No / Yes
    √ Where does your code run? · browser
    √ What format do you want your config file to be in? · JavaScript
    Successfully created .eslintrc.js file in E:\study\frontend\eslint_sample

자동으로 생성

    module.exports = {
        "env": {
            "browser": true,
            "es2021": true
        },
        "extends": "eslint:recommended",
        "parserOptions": {
            "ecmaVersion": 13,
            "sourceType": "module"
        },
        "rules": {
        }
    };