Eslint (node.js)

자바스크립트, JSX의 정적 분석 도구로 오픈소스 프로젝트인 ESlint를 설치해보자

먼저 ESlint는 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 해준다.

JSlint, JSHint같이 다른 자바스크립트 정적 분석 도구도 있지만 , ESlint가 커스터마이징이 쉽고 확장성이 뛰어나

많이 쓰는 추세이다. ESLint는 스타일 가이드를 좀더 편리하게 적용하기 위해 사용한다.

 

이제 설치 과정을 쓸텐데

음.. 설치과정을 잘 정리해서 공유해주신 것으로 대체하겠다.

1. 아래 순서대로 eslint와 prettier플러그인 및 설정, prettier를 설치해주세요.
npm install eslint -D
npm install eslint-plugin-prettier -D
npm install eslint-config-prettier -D
npm install prettier -D

2. npx eslint --init

3. 이제 질문이 계속 나오는데 아래 순서대로 선택해주세요.
- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export)
- None of these
- No
- Node
- Use a popular
- Airbnb
- Javascript
- Yes

4. 확장프로그램 검색으로 ESlint extension을 설치해주세요.

5. VScode에서 윈도우는 Ctrl +, 맥은 Cmd +, 입력해주세요.

6. 검색창에 actionon을 입력해준 뒤
Eslint > Code Actions On Save 가 all로 되어있는지 확인해주세요.

7. 그리고 바로 위에 Edit in setting.json을 클릭해 들어가주세요.
editor.formatOnSave 가 ture로 되있는지 확인해주시고
editor.codeActionsOnSave는 null로 되어있을텐데
{ "source.fixAll":tre, "source.fixAll.eslint": false} 로 수정해주고 저장해주세요.

8. 왼쪽사이드보시면 .eslintrc.js가 생성되어있을거에요.
들어가셔서
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'airbnb-base', "plugin:prettier/recommended"

],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
"prettier/prettier": "off",
"no-console":"off",
"spaced-comment":"off",
"no-else-return":"off"
},
};
이렇게 수정해주고 저장해주세요.

9. VScode의 오른쪽 하단에 빨간 금지아이콘과 함께 ESlint라고 있을거에요.
눌러서 allow everywhere 으로 설정해주세요.
그러면 이제 ESlint가 작동하기 시작해요.

 

요렇게 끝~!~!