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"
}
}
}
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 내에 추가해야한다.
보통 대부분의 플러그인은 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"
],
...
코드를 분석하기 위한 파싱툴이다. 기본값은 espress이고, 보통 js 워크스페이스에서는 @babel/eslint-parser
를 사용하고 ts 워크스페이스인 경우 @typescript-eslint/parser
를 사용한다.
사실 plugin:@typescript-eslint/recommended
를 포함시키면 @typescript-eslint/parser
가 자동으로 포함되기도 한다.
"parser": "@typescript-eslint/parser"
parserOptions
은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.