Eslint는 코드 작성에 있어서 규칙을 설정하고 이를 벗어난 방식의 코드 작성식 Warn 혹은 Error를 발생시켜 일관된 코드를 작성하도록 해주는 툴이다.
예를 들면, 주석 작성에서 // 이후 tab를 사용한 만큼의 공간을 생성하고 텍스트를 작성하라
혹은 , 이후 띄어쓰기를 하라
정도까지의 매우 세세한 부분까지 설정이 가능하다.
다만, 이미 내 방식대로 작성하여 진행중인 프로젝트에 Eslint를 적용하면 오류가 수백개가 검출되는 것을 볼 수 있으니, 개인적으로 프로젝트를 시작할때는 적용하여 사용하는것이 좋아 보인다.
(.tsx 파일이 4개일 뿐인데 반응하는 오류는 600개 였다...)
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
eslint / typescript 설치
npm install --save-dev eslint-config-airbnb
eslint - airbnb설정 설치
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import
eslint react 플러그인 설치
package.json - dependencies (eslint관련)
"@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.54.0",
"eslint": "^8.35.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
.eslintrc
파일 생성(root 경로)
밑에는 시험삼아 테스트한 제 프로젝트에 사용된 .eslintrc 이다.
위에서 말한 600개의 오류에 대해 설정 수정 및 오류 해결등의 작업을 하기 위해 extends 부터 여러 설정을 추가 했다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:@typescript-eslint/recommended",
"airbnb",
"airbnb/hooks",
"plugin:import/typescript"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
], //import resolve problem
"react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
//jsx not in tsx
"no-shadow": "off",
"@typescript-eslint/no-shadow": "warn",
//이미 선언되 변수의 declared 오류 해결 (setState(data=>data+1))
"linebreak-style": 0,
"comma-dangle": ["error", "never"],
// 매개변수 마지막의 ,(comma) 설정
"jsx-quotes": [2, "prefer-single"],
// 스크립트에서 ""(double) 과 ''(single) 둘중 어느 것으로 사용할것인가 (일관성)
"react/self-closing-comp": [
"error",
{
"component": false,
"html": false
}
]
// <div></div>와 같이 child가 없는 엘리먼트 허용?(false)
//비허용(true) 비허용시 <div/> 로 사용해야한다.
},
"env": {
"browser": true
}
}
여러 Option을 사용한 예시
{
"root": true,
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/strict",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:testing-library/react",
"prettier"
],
"plugins": [
"react",
"react-hooks",
"jsx-a11y",
"import",
"@typescript-eslint"
],
"settings": {
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
},
"react": {
"version": "detect"
}
},
"rules": {
"no-console": "error",
"import/prefer-default-export": "off"
},
"overrides": [
{
"files": "**/*.+(ts|tsx)",
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/recommended"]
},
{
"files": ["**/__tests__/**/*", "**/*.{spec,test}.*"],
"env": {
"jest/globals": true
},
"plugins": ["jest", "jest-dom", "testing-library"],
"extends": [
"plugin:jest/recommended",
"plugin:jest-dom/recommended",
"plugin:testing-library/react"
]
}
]
}