[VS Code] 기초적인 ESLint 사용 방법

 

 

ESLint는 자바스크립트 문법 검사기로써 다음과 같은 기능을 수행한다.

 

1. 개발자가 작성한 코드를 분석해 문법적 오류를 찾아 수정해줌

2. 정해진 포맷에서 벗어난 부분을 자동으로 교정해줌 

3. 따라서 일관된 코드 스타일을 유지시켜줌

 

ESLint를 터미널을 이용해 설치하여 이용하는 방법은 나중에 포스팅하고

 

우선 VS Code extension에서 설치하여 사용하는 방법을 알아보도록 하자. 

 

 

환경설정 및 사용방법

1. recommended로 변경

package.json에서 eslint 규칙을 recommended로 설정한다. recommended은 가장 강한 규칙을 의미한다.

"extends": [ "plugin:vue/recommended", "eslint:recommended" ],

 

 

 

2. settings.json 작성

Preferences > Settings > 우측 상단 { } 클릭

다음 내용 추가

{ "eslint.validate": [ "vue", "html", "javascript"], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }

파일을 저장할 때 마다 autofix가 수행되어 ESLint 규칙에 따라 코드를 자동 교정하겠다는 의미이다.

 

설정 이후 autofix 최초 실행시 약간의 시간이 걸리므로 조급해하지 않고 기다리면 된다.