14.2 ESLint

1. Introduction

ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾기 위해 사용하는 Javascript linter이다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다.

코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출 해주므로 옳바른 코딩 습관을 갖도록 돕는 유용한 툴이다. 가급적이 아니라 필히 사용할 것을 권장한다.

2. install eslint & Airbnb style guide

Airbnb style guide를 기본으로 eslint를 설치하도록 하자. 아래와 같이 eslint와 Airbnb style guide(Airbnb의 style guide를 eslint의 설정 파일화한 것)와 필요 플러그인을 로컬 설치한다. eslint를 전역으로 설치할 수도 있으나 권장되지 않는다. 만약 전역으로 설치할 경우에는 공유 설정과 필요 플러그인을 로컬 설치해 주어야 한다.

$ cd <project-folder>
$ npm init -y
# install eslint & friends
$ npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html --save-dev

3. install ESLint VSCode extention

VSCode 마켓플레이스에서 VS Code ESLint extension을 설치한다.

메뉴의 Code > 기본 설정 > 설정으로 이동하여 setting.json에 아래 설정을 추가한다.

  ...
  // ESLINT
  "eslint.validate": ["html", "javascript"]

5. .eslintrc.json

프로젝트 루트에 .eslintrc.json 파일을 생성하고 필요에 따라 아래와 같이 룰셋을 변경한다. 상세한 설정 방법은 VS Code ESLint extension을 참조한다.

{
  "parserOptions": {
    "ecmaVersion": 12
  },
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "globals": {
    "_": false
  },
  "plugins": ["import", "html"],
  "extends": "airbnb-base",
  "rules": {
    // "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)
    // "no-var": "off",
    "no-console": "warn",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off", // var _foo;
    "comma-dangle": "off",
    "func-names": "off", // setTimeout(function () {}, 0);
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "consistent-return": "off",
    "no-restricted-syntax": ["off", "ForOfStatement"], // disallow specified syntax(ex. WithStatement)
    "prefer-arrow-callback": "error", // Require using arrow functions for callbacks
    "require-await": "error",
    "arrow-parens": ["error", "as-needed"], // a => {}
    "no-param-reassign": ["error", { "props": false }],
    "no-unused-expressions": ["error", {
      "allowTernary": true,      // a || b
      "allowShortCircuit": true, // a ? b : 0
      "allowTaggedTemplates": true
    }],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "max-len": ["error", {
      "code": 110,
      "ignoreComments": true,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true
    }] // prettier의 printWidth 옵션 대신 사용
  }
}

6. ESLint + Prettier

Prettier를 설치하여 ESLint와 함께 사용해보자.

# --save-exact 옵션을 사용하여 package.json에 ^ 없이 등록되도록 설치한다.
$ npm install prettier --save-dev --save-exact

VSCode 마켓플레이스에서 Prettier를 설치한다.

프로젝트 루트에 Prettier의 설정 파일인 .prettierrc 파일을 생성하고 아래와 같이 설정하자.

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

ESLint와 Prettier를 같이 사용하려면 아래 패키지를 추가로 로컬 설치해야 한다.

  • eslint-config-prettier
    ESLint 설정 중에서 Prettier와 충돌하는 부분을 비활성화 한다. eslint의 버전이 7.0 이상이 아니면 에러가 발생해 설치되지 않는다. 이러한 경우 npm i eslint@latest -D로 최신 버전의 eslint를 설치하도록 한다.
$ npm install eslint-config-prettier --save-dev

.eslintrc.json 파일에 아래와 같이 수정한다.

{
  ...
  "extends": ["airbnb-base", "prettier"],
  ...
}

7. autofix

저장과 함께 지동으로 에러를 수정하려면 메뉴의 Code > 기본 설정 > 설정으로 이동하여 settings.json에 아래 설정을 추가한다.

...
  /////////////////////////////
  // ESLint
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.alwaysShowStatus": true,
  // save시 eslint를 사용해 autofix 실행 (ex. let => const)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  /////////////////////////////
  // Prettier
  // 수정 후 저장할 때 prettier로 자동 스타일링
  "javascript.format.enable": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Prettier 기본 설정. 프로젝트 루트의 .prettierrc 파일의 설정이 우선한다.
  "prettier.arrowParens": "avoid",
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 100,
  "prettier.useTabs": false,
...

8. Babel-eslint

다음 예제의 private 필드 정의 제안괴 같이 아직 정식 표준이 아닌 제안 단계의 자바스크립트 코드의 경우 eslint가 파싱할 수 없어 에러가 발생하는 경우가 있다.

class MyClass {
  #privateField = ''; // Parsing error: Unexpected character '#'
}

이러한 경우 babel-eslint를 사용해 자바스크립트 코드를 파싱해야 한다.

다음과 같이 babel-eslint를 설치한다.

$ npm install babel-eslint -D

다음과 같이 .eslintrc.json에 parser를 설정하면 에러가 발생하지 않는다.

{
  "parser": "babel-eslint",
  ...
}

9. React

React 프로젝트에서 ESLint와 Prettier를 같이 사용하려면 아래 패키지를 추가로 로컬 설치해야 한다.

$ cd <your react app>
$ npm install eslint-config-prettier --save-dev

.eslintrc.json을 아래와 같이 수정한다.

...
  "extends": [
    "airbnb-base",
    "prettier",
    "react-app"
  ],
...

.prettierrc 파일을 생성하고 아래와 같이 수정한다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

설정이 제대로 반영되지 않는 경우가 있으므로 설정 후에 반드시 VS Code를 재기동해야 한다.

Reference

Back to top
Close