eslint & prettier 적용하기

개요
eslint와 prettier가 무엇이고 왜 설치해야하는지 알아보자.
마지막으로 적용까지 해보면서 눈으로 확인해보자.

eslint
한마디로 요약하자면, 코드 정적 분석 툴이다. 코드가 문법에 맞게 코딩이 되어 있는지, 내가 세팅한 규칙에 위반되어 있지 않은지 확인해주는 툴이다.
개발할 때 필수로 설치하는 툴이다.

prettier
내가 짠 코드를 좀더 깔끔하게 정리해주는 코드이다.
각자 깔끔의 기준이 다르기에 하나로 통일할때 사용한다. 코딩 컨벤션 용도로 사용하고 eslint와 같이 사용하여 시너지 효과를 낸다.
eslint에 pretter를 plugin으로 추가하여 eslint 돌릴 때 prettier도 같이 돌아가게끔 설정할 수 있다.

설치

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

 

eslint-plugin-prettier
Prettier 규칙들을 eslint규칙에 추가하여 eslint를 실행하면 자동으로 prettier까지 실행됩니다.

 

eslint-config-prettier
eslint 규칙에서 prettier 규칙과 충돌하는 규칙들을 설정하는 역활

.eslint.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off"
  }
}
.prettierrc.json
{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto"
}

 

참고

https://www.youtube.com/watch?v=qhuFviJn-es&feature=youtu.be