ESLint 설정하기

완전히 처음부터 프로젝트를 시작하게 된 경우,
매번 당연히 자연스럽게 존재했던 ESLint 를 추후에 협업할 개발자가 생길 때를 대비하여 설정하기 위함 !

 

 

✅ 추후에 계속 공부하면서 내용을 보완할 예정

** 참고 자료 : https://eslint.org/docs/latest/rules/

Rules Reference - ESLint - Pluggable JavaScript Linter

 

ESLint를 설치하기 위해서는 Node.js가 필요하니 먼저 Node.js를 설치하고(NPM설치) 아래와 같이  단계별로 설치

1. 먼저 VS Code에서 ESLint를 install
2. 터미널을 열고 npm install eslint 실행(npm이 없는 경우 먼저 npm설치 후 실행)
3.이어서 eslint –init 실행(자신이 자주 사용하는 것 위주로 설정값을 준다. 나중에 변경가능)
4. 폴더에 .eslintrc.js가 생성되었는지 확인
5. .eslintrc.js의 rules에 원하는 규칙을 입력 (eslint의 rules는 https://eslint.org/docs/rules 를 참조)

 

Prettier 도 설정해보자 !

1. VSCode 에서 일단 Prettier 확장 프로그램 설치

2. File->Preferences->Extension->Prettier에서 기본적으로 옵션값을 설정해주면 되는데 이것 역시 Settings.json에서 일괄적으로 설정 가능

3. 코드를 자동으로 형식화하는 확장 프로그램은 많기 때문에 Prettier를 기본적인 포맷터로 설정하려면 다음과 같이 전체 설정을 하거나 프로그래밍언어별 설정

예시

** 참고 : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

Prettier - Code formatter - Visual Studio Marketplace