ESLint - .eslintrc 설정하기

ESLint

.eslintrc 설정하기

 

🔎 .eslintrc 란

ESLint 설정파일로 JSON, YAML, JavaScript 형식을 지원한다. 항상 이름은 .eslintrc 이어야하고 각 파일 형식에 맞춰 확장자를 사용하면 된다. (ex. .eslintrc.json) 

 

🔎 root

Monorepo 와 같이 하나의 repository 에서 여러개의 프로젝트를 관리하는 경우 여러개의 설정파일을 같이 사용할 수 있는데 이럴 때 유용한 옵션이 root 옵션이다. 해당 프로젝트에 .eslintrc 가 없다면 그 상위 폴더를 거슬러 올라가면서 root 가 true 로 설정된 .eslintrc 를 탐색하고 있다면 해당 설정파일로 ESLint 를 적용한다. 

 

🔎 plugins

ESLint 에서 기본적으로 제공하는 규칙 외에 다른 규칙을 적용하고자 할 때 사용하는 옵션으로 적용하고자 하는 추가적인 옵션이 있는 플러그인을 배열로 나열하여 사용한다.

{
  ...,
  "plugins": ["react", "@typescript-eslint"],
  ...
}

 

🔎 extends

plugins 에 추가한 plugin 에서 사용할 설정이나 Google, Facebook, Airbnb 와 같은 기업들에서 공개한 ESLint 설정들을 그대로 가져와 사용하려 할 때 사용되는 옵션이다. 

{
  ...,  
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "airbnb"
  ],
  ...
}

 

eslint:recommended 는 ESLint 에서 기본적으로 제공하는 설정이며 plugin: 이 붙은 내용은 eslint-plugin-xxx 로 설치한 플러그인의 추천 설정을 나타낸다. 마지막으로 airbnb 는 eslint-config-airbnb 로 설치한 설정값을 사용한다는 의미이다.

 

🔎 rules

원하는 규칙을 자세히 설정할 수 있도록 하는 옵션으로 앞서 설정한 extends 의 규칙과 겹치는 것이 있다면 rules 에 설정한 규칙으로 덮어쓰게 된다.

{
  ...,
  "rules": {
    "react/react-in-jsx-scope": "off", // jsx 에서 import React ... 없을 경우
    "no-unused-vars": "off", // 쓰지 않는 변수가 선언 되었을 경우
    "@typescript-eslint/no-unused-vars": ["warn"], // 쓰지 않는 변수가 선언 되었을 경우(ts)
    "@typescript-eslint/no-explicit-any": ["off"], // any 타입이 사용되었을 경우(ts)
    "@typescript-eslint/no-namespace": "off", // namespace 를 사용하였을 경우(ts)
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ] // prettier 오류일 경우
  },
  ...
}

 

🔎 env

JavaScript 는 여러 환경에서 사용이 가능하며 환경에 따라 사용할 수 있는 고유한 전역 변수가 존재한다. 브라우저에서 사용되는 대표적인 전역변수인 window 는 NodeJS 에서는 사용이 불가능한데 ESLint 에 이러한 환경에 대한 정보를 주어 선언되지 않은 전역변수를 사용할 때 에러가 나지 않도록 하는 옵션이 env 옵션이다.

{
  ...,
  "env": {
    "browser": true,
    "node": true
  },
  ...
}

 

🔎 parser / parserOptions

ESLint 는 순수한 JavaScript 만 이해할 수 있기 때문에 TypeScript 나 Babel 과 같은 문법을 이해하기 위해서는 그에 상응하는 parser 를 등록하여야 한다. 이럴 때 사용되는 옵션이 parser 와 parserOptions 이다.

{
  ...,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  ...
}

 

🔎 settings

특정 ESLint plugin 은 추가적인 설정이 가능한데 이 때 사용되는 옵션이 settings 옵션이다. 대표적인 예로 react plugin 이 프로젝트에서 사용된 react 의 버전을 자동으로 탐색할 수 있도록 하는 옵션을 아래와 같이 설정할 수 있다.

{
  ...,
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  ...
}

 

🔎 ignorePatterns

ESLint 는 기본적으로 node_module 폴더는 무시하는데 그 외에 파일이나 폴더를 lint 에서 제외하고 싶을 때 사용하는 옵션이다.

{
  ...,
  "ignorePatterns": ["build", "dist", "public"],
  ...
}

 

ignorePatterns 로 설정하지 않고 파일로 이를 관리할 수 있는데 .eslintignore 로 파일을 생성해서 제외하고 싶은 파일이나 경로를 작성하면 무시하게 된다.

 

🔎 overrides

프로젝트 내에서 특정 파일에서만 다른 설정을 적용해야할 경우 사용되는 옵션으로 주로 jest 나 typescript 같이 특정 확장자의 파일에서만 다른 설정을 적용할 경우 사용한다.

{
  ...,
  "overrides": [
    {
      "files": ["**/__tests__/**/*", "**/*.{spec,test}.*"],
      "env": {
        "jest/globals": true
      },
      "plugins": ["jest", "testing-library"],
        "extends": [
        "plugin:jest/recommended",
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react"
      ]
    }
  ],
  ...
}

 

참고
https://www.daleseo.com/eslint-config/