ESLint(feat. Prettier)

eslint와 prettier는 보통 같이 쓰는 경우가 많다.

eslint도 포맷팅 기능이 있지만 prettier가 더 좋게 해주기 때문이다.

여기에서 해결해야 하는 문제는 포맷팅 규칙이 겹쳐셔 생기는 오류.

겹치는 규칙을 eslint에서 꺼주면 된다.

eslint-config-prettier을 설치하고 .eslintrc.js에 관련 설정을 추가한다.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

 

매번 eslint, prettier를 따로 실행해서 코드를 검사하는 건 개발 생산성을 떨어뜨린다.

prettier를 eslint 규칙에 맞게 실행할 수 있다. 즉 eslint를 실행하면서 prettier를 실행시킬 수 있다.

eslint-plugin-prettier를 설치하고 .eslintrc.js의 extends에 plugin:pretter/recommended를 넣어주면 된다.

extends: ["eslint:recommended", "plugin:prettier/recommended"],

 

plugin:pretter/recommended를 넣으면 아래 코드로 전개되는 것과 동일한 효과를 낸다.

{
  "extends": ["prettier"],  
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

- "extends" : ["prettier"] 은 eslint-config-prettier에서 설정을 가져온다. Prettier와 충돌하는 Eslint 규칙을 끈다

- "plugins" : ["prettier"]은 eslint-plugin-prettier를 등록한다

- "prettier/prettier" : "error"는 eslint-plugin-prettier가 제공하는 ESLint에서 Prettier를 동작하게 하는 규칙을 켠다. 좀 더 쉽게 말하면 ESLint가 Prettier 규칙을 감지하게 해준다.

"arrow-body-style" : "off", "prefer-arrow-callback": " off"는 eslint-plugin-prettier가 일으킬 수 있는 ESLint 규칙을 끄는 것.

 

터미널에서 npx eslint ... --write로 한 번에 문법 검사과 포맷팅을 할 수 있게 됐지만

매번 이렇게 터미널에 명령어를 입력해서 검사하는 것은 개발 생산성을 여전히 떨어뜨린다.

익스테션을 설치해서 formatOnSave:true를 설정하면 되는데 eslint만 설치하면 된다.