• 1. Introduction
• 2. install eslint & Airbnb style guide
• 3. install ESLint VSCode extention
• 5. .eslintrc.json
• 6. ESLint + Prettier
• 7. autofix
• 8. @babel/eslint-parser
• 9. TypeScript
• 10. React
• Reference

1. Introduction

ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다.

ESLint는 옳바른 코딩 습관을 갖도록 돕는 유용한 툴이다. 가급적이 아니라 필히 사용할 것을 권장한다.

2. install eslint & Airbnb style guide

Airbnb style guide를 기본으로 eslint와 필요 플러그인들을 로컬 설치하자. eslint를 전역으로 설치할 수도 있으나 권장하지 않는다. 만약 전역으로 설치할 경우에는 공유 설정과 필요 플러그인을 로컬 설치해 주어야 한다.

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

2021년 10월 10일 출시된 eslint 8.0.0을 설치한 경우 eslint-plugin-import가 정상 동작하지 않는 버그가 있다. 이때 npm install --save-dev eslint@7로 eslint 7 버전을 설치하면 정상 동작한다.

3. install ESLint VSCode extention

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

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

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

5. .eslintrc.json

프로젝트 루트에 .eslintrc.json 파일을 생성하고 필요에 따라 다음과 같이 설정을 변경한다. 자세한 설정 방법은 Configuring ESLint을 참조한다.

{
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es2022": true
  },
  "globals": { "_": true },
  "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": 120,
      "ignoreComments": true,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true
    }] // prettier의 printWidth 옵션 대신 사용
  }
}

6. ESLint + Prettier

코드 포맷터인 Prettier를 설치하여 ESLint와 함께 사용해보자.

VSCode 마켓플레이스에서 prettier-vscode 익스텐션을 설치한다.

prettier-vscode 익스텐션을 설치해 사용한다면 Prettier를 별도 설치할 필요가 없지만 Prettier CLI를 사용할 경우를 대비해 Prettier를 설치하도록 하자.

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

프로젝트 루트에 Prettier의 설정 파일인 .prettierrc.json 파일을 생성하고 다음과 같이 설정하자. 자세한 설정 방법은 Configuring Prettier를 참조한다.

{
  "singleQuote": true,
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "printWidth": 120
}

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

• eslint-config-prettier

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

$ npm install --save-dev eslint-config-prettier

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

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

7. autofix

파일 저장과 함께 지동으로 Prettier 포맷팅이 실행되도록 하려면 메뉴의 “Code > 기본 설정 > 설정”으로 이동하여 settings.json에 다음 설정을 추가한다.

...
  /////////////////////////////
  // ESLint
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.alwaysShowStatus": true,
  /////////////////////////////
  // Prettier
  // 수정 후 저장할 때 prettier로 자동 스타일링
  "editor.formatOnSave": true,
  // 수정 후 저장할 때 eslint로 autofix 실행 (ex. let => const)
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
...

8. @babel/eslint-parser

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

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

이러한 경우 @babel/eslint-parser를 사용해 자바스크립트 소스 코드를 파싱해야 한다. 다음과 같이 @babel/eslint-parser를 설치한다.

$ npm install --D @babel/core @babel/eslint-parser @babel/preset-env

다음과 같이 babel.config.json을 생성한다.

{
  "presets": ["@babel/preset-env"]
}

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

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

9. TypeScript

TypeScript 고유의 문법을 파싱하기 위해 @typescript-eslint/parser를 사용해야 한다.

$ npm install --save-dev typescript @typescript-eslint/parser

다음과 같이 .eslintrc.json에 parser를 설정한다.

{
  "parser": "@typescript-eslint/parser",
  ...
}

10. React

React 프로젝트에서 ESLint와 Prettier를 같이 사용하려면 eslint-config-prettier 플러그인을 추가로 로컬 설치해야 한다. eslint-config-prettier는 ESLint 설정 중에서 Prettier와 충돌하는 부분을 비활성화 한다.

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

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

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

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

{
  "singleQuote": true,
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "printWidth": 120
}

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

Reference

• Getting Started with ESLint

• Rules

• ESLint Overview and Setup

• Prettier

• ESLint + Prettier + VSCode