Prettier와 ESlint 함께 사용하기

prettier와 ESlint는 코드를 깔끔하게 해주는 툴이다.

둘이 비슷한 역할을 해서 개발을 처음 접했을 때 구분하기 쉽지 않았다.

 

prettier는 저장할 때 설정에 따라서 자동으로 코드의 형태를 바꿔준다.

(VSCode의 설정 중 format on save가 체크 됐을 때)

예를 들어 세미 콜론을 채워준다든지 특정 길이 이상일 때 줄바꿈을 해준다든지 등의 설정을 할 수 있다.

 

ESlint는 설정에 따라서 스타일에 맞지 않을 경우 밑줄을 그어준다.

예를 들어 let 키워드로 변수를 선언하고 한 번도 변수를 바꿔주지 않을 경우 const를 사용하라고 줄을 쳐준다.

 

1. 먼저 둘을 VSCode에서 사용하려면 프로젝트 폴더에서 다음 명령어를 입력해 설치한다.

 

npm i -D prettier eslint

 

2. VSCode에서 prettier extension과 eslint extension을 설치한다.

 

3. 두 설정에 따라서 충돌이 생길 수도 있기 때문에 eslint-config-prettier와 eslint-plugin-prettier를 설치한다.

 

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

 

앞에 것은 prettier와 충돌이 생기는 eslint 설정을 끄고

뒤에 것은 prettier의 설정을 eslint 설정에 추가해주는 역할을 한다.

 

4. .prettierrc 파일을 생성하고 아래 코드를 입력한다.

 

// .prettierrc 

 

{

    "semi": true,

    "trailingComma": "all",

    "singleQuote": true,

    "printWidth": 70,

}

 

prettier 세부 설정 

 

5. ESlint 설정을 따로 해줄 수도 있지만 해야할 설정이 너무 많기 때문에 Airbnb 스타일을 적용한다.

이를 위해 필요한 모듈을 설치한다.

 

npx install-peerdeps --dev eslint-config-airbnb

 

5. .eslintrc.json 파일을 생성하고 아래 코드를 입력한다.

 

// .eslintrc.json

 

{

    "extends": ["airbnb", "prettier"],

    "plugins": ["prettier"],

    "rules": {

        "prettier/prettier": ["error"]

    }

}

 

ESlint 세부 설정

 

참고 : https://www.robinwieruch.de/prettier-eslint

 

깃허브 예제 : github.com/ipf-gwkim/simple-merge-eslint-and-prettier