[JS] ESLint 알고쓰기 : 설정 설명

이채현

💡 ESLint 설정하기

노션 링크

이 문서는 eslint.org를 참고하여 eslint 7.32.0 버전에서 작성되었으며, 아래 프로젝트를 기반으로 작성했습니다.

https://github.com/chlee1001/react-typescript-simple-boilerplate

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "./tsconfig.json"
    ],
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "import"
  ],
  "rules": {
    "import/prefer-default-export": "off",
    "import/no-unresolved": 0,
    "import/extensions": [
      "off"
    ],
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  },
  "ignorePatterns": [
    "paths.js",
    "webpack.*.js",
    "dist/*",
    "node_modules/*"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

---

ENV

• browser - browser global variables : true를 하게되면 **console.log()**를 에러없이 사용할 수 있다.
• node - Node.js global variables and Node.js scoping : true를 하게되면 전역에서 require를 에러없이 사용할 수 있게된다.
• es2021 - adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.

EXTENDS

extends는 추가한 플러그인에서 사용할 규칙을 설정한다. 플러그인을 설치하여도, 플러그인은 일련의 규칙집합이며 플러그인을 추가하여도 규칙은 적용되지 않는다. 규칙을 적용하기 위해서는 추가한 플러그인 중, 사용할 규칙을 extends 내에 추가해야한다. 보통 대부분의 플러그인은 recommended나 strict, all 등의 자체 설정을 제공한다.

• recommended: 프로젝트에 권장하는 규칙 집합

...
  "extends": [
    "airbnb", // airbnb의 규칙 사용
    "airbnb-typescript", // TS를 지원하는 airbnb 규칙 구성 향상
    "airbnb/hooks", // React hooks를 위한 airbnb 규칙사용
    "plugin:@typescript-eslint/recommended", // ESLint가 TypeScript를 지원할 수 있도록 하는 모든 도구를 위한 Monorepo
    "plugin:@typescript-eslint/recommended-requiring-type-checking", // 일부 highly valuable rules를 올바르게 구현하기 위해 유형 검사를 위한 추천 요구 유형 검사
    "plugin:import/recommended", // import명이나 잘못 작성한 파일 경로에 대한 이슈를 방지해주는 플러그인 (아래 errors와 warnings의 집합)
    // "plugin:import/errors", 
    // "plugin:import/warnings",
    "plugin:import/typescript", // TS에서 `eslint-plugin-import`를 사용하기 위해 추가
    "plugin:jsx-a11y/recommended", // JSX 요소에 대한 접근성 규칙
    "plugin:prettier/recommended", // prettier 규칙을 적용하여 틀릴 경우 eslint 문제로 처리
    "plugin:react/recommended", // eslint-plugin-react의 추천 규칙 사용
    "plugin:react-hooks/recommended"
  ],
...

PARSER

코드를 분석하기 위한 파싱툴이다. 기본값은 espress이고, 보통 js 워크스페이스에서는 @babel/eslint-parser를 사용하고 ts 워크스페이스인 경우 @typescript-eslint/parser를 사용한다. 사실 plugin:@typescript-eslint/recommended를 포함시키면 @typescript-eslint/parser가 자동으로 포함되기도 한다.

"parser": "@typescript-eslint/parser" 

PARSER OPTIONS

parserOptions은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.

• project: 이 옵션을 사용하면 제공된 tsconfig에서 정의한 프로젝트에 포함되지 않은 파일이 허용되도록 요청할 수 있다.
• ecmaVersion: 사용할 ECMAScript 버전을 설정
• sourceType: parser의 export 형태를 설정
• ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
  • globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
  • impliedStric: strict mode 사용 여부
  • jsx: ECMScript 규격의 JSX 사용 여부

"parserOptions": {
  "project": [
    "./tsconfig.json"
  ],
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": "latest",
  "sourceType": "module"
},

PLUGIN

플러그인 패키지를 설치하고, 해당 플러그인을 plugins에 추가하여 사용할 수 있다.

"plugins": [
  "react",
  "@typescript-eslint",
  "import"
],

RULES

ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있다. 규칙을 변경하는 경우, 다음과 같은 방법으로 설정해야한다.

• "off" 또는 0: 규칙을 사용하지 않음
• "warn" 또는 1: 규칙을 경고로 사용
• "error” 또는 2: 규칙을 오류로 사용

규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있다.

"rules": {
    "import/prefer-default-export": "off",
    "import/no-unresolved": 0,
    "import/extensions": [
      "off"
    ],
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  }

---

규칙 무시하기

파일 디렉토리 제외

ignorePatterns 필드 또는 .eslintignore 파일을 작성하여 파일 및 디렉토리를 제외하도록 지정할 수 있습니다.

// .eslintrc 파일 ignorePatterns 설정

"ignorePatterns": [
  "paths.js",
  "webpack.*.js",
  "dist/*",
  "node_modules/*"
],

//.eslintignore 파일 생성
config/
dist/
node_modules/

대체파일 사용

.eslintignore를 현재 작업 디렉토리가 아닌 다른 파일을 사용하려면 --ignore-path 옵션을 사용하여 명령행에 파일을 지정할 수 있다.

$ eslint --ignore-path .gitignore file.js

인라인으로 규칙 비활성화

**// 전체 파일 규칙 경고 비활성화, 파일 맨위에 아래 블록 주석 추가**
/* eslint-disable */
...
...
/* eslint-enable no-alert, no-console */

**// 경고 비활성화 블록 주석**
/* eslint-disable */
alert('foo');
/* eslint-enable */

**// 특정 규칙 경고 비활성화**
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');

**// 다음 한줄 경고 비활성화**
// eslint-disable-next-line

---

참고

Configuring ESLint - ESLint - Pluggable JavaScript Linter

https://velog.io/@kyusung/eslint-config-2

ESLint 알고 쓰기