ESLint 설정

1.ESLint란?

• 자바스크립트를 사용하면서 생기는 에러들을 미리 알려주는 정적 분석 툴
• ESLint를 사용하여 미리 생기는 에러를 방지하고, 규칙을 정하여 코드 스타일을 정할 수 있다.

2.설치 방법

• npm intall -g eslint
• 글로벌로 설치하는게 편하긴하지만, 프로젝트별로도 설치할 수 있다. 
• 글로벌로 설치시 mac에서는 sudo 권한이 필요하다(sudo npm install -g eslint)

3. VSCode에서 확장 프로그램 설치 

• 확장 프로그램을 설치하면 프로젝트에 .eslintrc파일을 만들어 설정을 변경할 수 있음
  
  

vscode에서 eslint 검색 및 설치

4. ESLint 설정

• 프로젝트 폴더에서 아래 명령어를 입력
• npx eslinit --init
• 그렇게 하면 각종 질문이 나오면서 eslint를 설정하게 도와준다. 

• 설치를 완료하면 프로젝트 폴더에 ".eslintrc.js"파일이 생기고, package.json에는 eslint 관련 의존성이 묶인다.

 

5. Rule 추가

• 개발하면서 필요한 Rule을 추가할 수 있다. 
• .eslintrc.js의 rules에 추가하면 된다. 

6. 결론

• 한번 설정하기가 어려워서 그렇지, 설정이후에는 설정파일을 공유해서 팀원들과 사용가능하다.
• rule에 대한 친절한 설명이 어려워서 어렵긴하다.

 

7. 참고 사이트 

https://eslint.org/docs/latest/user-guide/getting-started

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/