eslint는 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.
vite 프로젝트를 생성하면 아래와 같이 eslint가 기본적으로 설치된다.
에디터에서 사용하기 위해 vscode eslint extension을 설치한다.
// .eslintrc.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
// package.json
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"typescript": "^5.2.2",
"vite": "^5.3.1"
}
eslint 규칙을 직접 설정할 수도 있지만 airbnb 스타일 가이드를 사용하고자 한다.
https://www.npmjs.com/package/eslint-config-airbnb
eslint-config-airbnb 라이브러리는 기본적으로 ECMAScript 6+와 리액트를 포함하는 airbnb ESLint 규칙을 제공하고 아래 5개의 패키지들을 필수로 한다.
eslint
eslint-plugin-import
: ES6의 import, export 구문을 지원하는 필수 플러그인eslint-plugin-react
: react 규칙이 들어있는 플러그인eslint-plugin-react-hooks
: react hook 규칙이 들어있는 플러그인eslint-plugin-jsx-a11y
: JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인npm install -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
https://www.npmjs.com/package/eslint-config-airbnb-typescript
타입스크립트 사용하면 eslint-config-airbnb-typescript도 사용해준다.
npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@ @typescript-eslint/parser
다음과 같이 extends를 설정해준다.
// .eslintrc.cjs
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommeded'
],
prettier는 일관성 있는 코드 스타일을 유지할 수 있게 도와주는 도구이다.
npm i -D prettier
// .prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto"
}
eslint는 prettier의 formatting 기능도 포함되어 있어 충돌 발생 가능성이 있다.
이를 해결하기 위해 추가적인 plugin을 설치해준다.
eslint-config-prettier
는 prettier와 충돌 가능성이 있는 옵션을 모두 off해주는 역할을 한다.
eslint-plugin-prettier
는 prettier에 위반된 부분을 eslint error로 걸리도록 하는 역할을 하는데, 에러메시지가 지나치게 많아지고 느려지는 문제때문에 사용하지 않는 것을 권장한다.
npm i -D eslint-config-prettier
// .eslintrc.cjs
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommeded'
],
https://typicode.github.io/husky/
협업 과정에서 개발자들끼리 합의한 eslint나 prettier 등 지켜야 하는 규칙들이 존재하는데, 이런 코드 스타일은 개개인의 에디터에서 적용한다.
개인 사용자가 error나 warning을 무시한 채, 협업 프로젝트에 코드를 커밋하고 푸시하는 것에 제한이 필요하다.
이를 제한하지 않으면 규칙없이 작성된 코드가 머지되고 배포될 가능성이 생긴다.
git에는 hook 기능이 존재하는데, 특정 이벤트(add, commit, push 등)를 실행할 때, 그 이벤트에 hook을 설정하여 hook에 설정된 스크립트를 실행할 수 있다.
git hook을 관리할 수 있게 해주는 husky라는 패키지가 있다.
쉽게 말해서 git 명령어가 실행되면 미리 지정해놓은 스크립트가 실행되도록 관리해주는 도구이다.
여기서는 commit 전에 eslint와 prettier를 작동하게 하고자 한다.
// 설치
npm install husky --save-dev
// git hook 활성화
npx husky init
npx husky init 명령어 실행하면 package.json 파일에 아래와 같은 스크립트가 생성된다.
"scripts": {
"prepare": "husky install"
}
// 새로운 hook 추가
npx husky add .husky/pre-commit "npm lint --fix"
이제 커밋을 하면 lint 스크립트 실행 후 커밋이 진행된다.
추가적으로 협업 개발자가 npm install할 때 husky도 install하게 해주는 스크립트도 추가해준다.
postinstall은 npm install 직후 자동으로 실행된다.
"scripts": {
"prepare": "husky install",
"postinstall": "husky install"
}
https://github.com/lint-staged/lint-staged
위 작업에서 끝내면 모든 파일을 대상으로 lint 스크립트가 실행된다.
프로젝트 파일 수가 많아질수록 실행 속도도 늘어날 것이다.
그래서 변경된 소스에서만 hook이 동작되도록 설정하는 것이 필요하다.
이를 해결하기 위해 lint-staged 패키지를 사용한다.
npm install lint-staged --save-dev
설치 이후 package.json에 원하는 스크립트를 추가한다.
나는 아래의 스크립트를 추가했다.
커밋시에 lint와 prettier를 동시에 진행할 수 있다.
// package.json
"lint-staged": {
"*.{ts, tsx}": [
"eslint --fix"
],
"*": [
"prettier --write --ignore-unknown"
]
},