Eslint & Prettier 설정 방법 (feat. VS Code)
본 게시글은 eslint 와 prettier 를 충돌 없이 동시에 쓰고 싶을 때 어떻게 설정하면 되는지 정리한 글이다.
선 요약
시간이 아까운 분들을 위한 요약
- 필요한 라이브러리 설치
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
- .eslintrc.json 파일에 다음과 같이 설정
{
"extends": ["plugin:prettier/recommended"]
}
설정이 끝났다면 VSCode 한 번 껐다 켜주자.
순차 설명
eslint & prettier 설치
eslint 와 prettier 설정을 사용하기 위해선 아래 두 라이브러리를 설치해야 한다.
npm install eslint prettier --save-dev
설정 파일 생성
eslint 와 prettier 설정을 넣을 파일을 생성. 경로는 프로젝트 root 경로
- .eslintrc.json
- .prettierrc
prettier config 설치 및 설정
eslint-config-prettier
는 prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화 해주는 라이브러리이다.
npm install --save-dev eslint-config-prettier
.eslintrc.json
{
// prettier config를 eslint 설정에 추가
// extends 배열의 가장 마지막에 넣어야 한다.
"extends": ["prettier"]
}
prettier plugin 설치 및 설정
eslint-plugin-prettier
는 Prettier의 규칙을 eslint에 적용시킬 수 있게끔 해주는 plugin이다.
npm install --save-dev eslint-plugin-prettier
// .eslintrc.json
{
"extends": ["prettier"]
// prettier plugin을 eslint 설정에 추가
"plugins": ["prettier"],
// prettier 코드 스타일이 어긋나면 eslint에 걸리도록 처리
"rules": {
"prettier/prettier": "error"
}
}
eslint 설정을 더 짧게 변경
위의 설정을 아래 한 줄로 줄일 수 있다.
{
"extends": ["plugin:prettier/recommended"]
}
Ref: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
추가) VS Code preference 수정
VScode 에서 cmd + shift + p 를 누르고 Preferences: Open Settings
를 연다.
아래와 같이 수정한다.
settings.json
{
...
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 저장 버튼을 누르면 자동으로 포맷팅 됨
}
(* "editor.formatOnSave: true"
를 사용해도 되지만 codeActionsOnSave
가 최신 옵션이다.)
자주 발생하는 에러
Cannot find module 'eslint-plugin-import'
이 에러는 VS Code를 루트로 열지 않아서 생기는 에러이다.
eslint를 사용할 때에는 항상 .eslintrc.js
파일이 있는 디렉토리를 열어야 한다.
예시 1.
이렇게 열면 위의 에러가 뜬다.
예시 2.
이렇게 열어야 에러를 방지할 수 있다.
Ref
https://github.com/prettier/eslint-plugin-prettier
https://stackoverflow.com/questions/53189200/whats-the-difference-between-plugins-and-extends-in-eslint
Author And Source
이 문제에 관하여(Eslint & Prettier 설정 방법 (feat. VS Code)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@njh7799/Eslint-Prettier-설정-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)