Ch 0. 개발환경 설정 eslint & prettier

이번 본문에서는 eslint와 prettier를 적용하고자 한다.

eslint는 js linter의 한 종류. 코드를 실행하지 않아도 정적 분석을 통해 문법적 에러를 찾아주며 간단한 포맷팅 기능을 포함

prettier는 코드포맷터의 일종

 

npm i -D eslint

eslint 설치 후 package.json에서 설치확인

마찬가지로 prettier도 설치확인

npm i --save-dev --save-exact prettier

• -D가 --save-dev 옵션의 줄임말
• --save-exact 옵션을 사용하면 "^버전"에서 ^가 없이 설치됨
• ^이 있는 경우는 버전을 지정하지 않은 채 설치하거나 --save-exact 옵션이 없는경우
• ^의 의미는 해당 패키지가 업데이트 되었을 때 혹은 npm i 명령어를 사용했을때 마이너 버전에 한해서 업데이트를 허용한다. "메이저버전.마이너버전.n"
• prettier는 버전에 따라서 설정이 달라질 수 있기때문에 정확한 버전을 설치하기 위해서 --save-exact 옵션을 사용한다.

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier는 eslint와 prettier의 포맷팅 기능중 충돌이 나는 부분을 eslint에서 비활성화해주는 패키지

eslint-plugin-prettier는 eslint에 prettier의 포맷팅 기능을 추가하는 패키지

npx eslint --init

eslint 설정해준다.

 

 

 

 

 

 

eslintrc.json 파일 extends 속성 추가

.eslintignore 파일 생성

eslint 적용을 제외하는 파일들 설정

 

prettier 홈페이지의 playground에서 copy config json으로 기본 설정값 복사

.prettierrc.json 파일 생성 후 붙여넣기

마찬가지로 .prettierignore 파일 생성 후 prettier 설정 제외할 파일들 설정

vscode extention에서 eslint prettier open in browser 설치

preference에 open workspace settings (json) 설정

저장시에 eslint와 prettier 룰에 따라 픽스를 해준다.

editor.formatOnSave: true prettier html, css, js 저장시에 포맷팅
editor.codeActionsOnSave:{"source.fixAll.eslint":true} 저장시에 eslint 룰대로 포맷팅