ESLint는 JavaScript, JSX의 정적 분석 도구로 코드를 분석해 문법적인 오류를 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. ESLint는 스타일 가이드를 좀 더 편리하게 적용할 수 있다.(예: Airbnb Style Guide, Google Style Guide)
- 포맷팅 : 일관된 코드 스타일을 유지할 수 있다. (들여 쓰기, 코드 라인 너비 규칙 등등)
- 코드 품질: 잠재적 오류나 버그 예방(사용하지 않는 변수 등)
install
1
2
3
4
5
| npm i eslint
// 코드 검증 및 수정
npx eslint [파일]
npx eslint [파일] --fix
|
명령어로 ESlint 세팅
위와 같이 커맨드 창의 입력하면 대화 형식으로 설정 파일을 만들 수 있다. 해당 설정에 맞게 세팅하고 필요한 라이브러리들을 추가 설치하면
아래와 같이 루트 디텍토리에 .eslintrc.js
파일이 만들어진다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended', // [https://eslint.org/docs/rules/](https://eslint.org/docs/rules/) 에 체크되어있는 것이 전부 세팅되어있다.
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
|
Prettier
- 프리티어는 es-lint에서 고쳐주지 않는 것까지 고쳐준다.
1
2
3
4
5
6
7
8
| npm i prettier
npm i eslint-config-prettier
// 프리티어에 있는 규칙을 eslint에 넣기
npm i -D eslint-plugin-prettier
// 코드 수정
npx prettier [파일] --wirte
|
ESLint & Prettier
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"eslint:recommended", // 미리 설정된 규칙 세트를 사용한다.
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react", "prettier"],
rules: {
"prettier/prettier": "error",
...
},
};
|
vs-code
install
setting
1
2
3
4
5
6
7
8
9
10
11
12
| {
"workbench.colorTheme": "Default Dark+",
"terminal.integrated.defaultProfile.osx": "zsh",
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"js/ts.implicitProjectConfig.strictNullChecks": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
|