[VSCode] ESLint 에 Prettier(코드 포맷터) 설정 적용하기

VSCode를 사용하여 코딩을 하다보면, 문법적 오류 방지나 코드 문서화 등을 하기 위한 정적 분석 툴을 필요로 할 때가 있다. 이 때 필요한 것이 바로 ESLint 입니다. JSLint, JSHint 등의 툴도 있는데, 오픈소스이면서 확장성이 뛰어난 ESLint 가 대세가 되는 것 같습니다.

 

VSCode 의 Extention에서 ESLint와 Prettier를 설치하도록 합시다.

 

 

Settings 에 들어갑니다.

 

ESLint로 가서 Edit in settings.json 클릭

 

아래 내용 붙여넣기(적당히 커스텀 해도 됨)

"editor.formatOnSave": true,     "editor.codeActionsOnSave": {         "source.fixAll.eslint": true     },     "[vue]": {         "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "[javascript]": {         "editor.defaultFormatter": "esbenp.prettier-vscode"     }     "prettier.tabWidth": 4

완성!