[Achieve] Eslint & prettier 설정

이제 개발환경에 Eslint와 prettier를 설정해야한다.

Eslint, 에어 비앤비의 구성 및 필수 패키지를 설치한다.

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Prettier, 그리고 Eslint와의 충돌을 피하기 위한 패키지를 설치한다.

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

husky와 lint-staged, 그리고 pretty-quick을 설치한다.

npm i -D husky lint-staged pretty-quick

• husky : git hooks를 쉽게 만들어 잘못된 commit 또는 push를 방지하는 것
• lint-staged : staged(수정한 파일을 곧 commit 할 것이라고 표시한 상태)된 파일만 lint해주는 것
• pretty-quick : 코드를 확인하는 것

이제 Eslint와 prettier를 설치 및 설정을 하였으니 두 개다 규칙을 설정해 줘야한다.

Eslint

1. Eslint의 root폴더에 .eslintrc 파일을 만든다. (참고 '.'이 앞에 붙는 파일은 환경설정파일이다.)
2. .eslintrc파일에 아래의 규칙을 넣는다. (지금은 아래에 규칙에 대해 어느정도 이해만 할 뿐 하나하나 정확히는 모른다.)

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "react/prop-types": 0,
    "no-underscore-dangle": 0,
    "import/imports-first": ["error", "absolute-first"],
    "import/newline-after-import": "error",
    "import/prefer-default-export": 0,
    "semi": "error"
  },
  "globals": {
    "window": true,
    "document": true,
    "localStorage": true,
    "FormData": true,
    "FileReader": true,
    "Blob": true,
    "navigator": true,
    "Headers": true,
    "Request": true,
    "fetch": true
  },
  "parser": "babel-eslint"
}

prettier

root폴더에 .prettierrc파일을 만들고 파일에 규칙을 넣는다.
규칙은 아래 참조에 prettier옵션을 보고 사용자에 맞게 끔 넣는다.

추가 : VSCode extension을 사용한 eslint, prettier 설정

https://k39335.tistory.com/80

참조

• https://medium.com/quick-code/how-to-integrate-eslint-prettier-in-react-6efbd206d5c4
• Airbnb JavaScript 스타일 가이드 : https://github.com/ParkSB/javascript-style-guide
• git commit 전에 Eslint 자동검사하기 : https://wan-blog.tistory.com/49
• husky 사용법 : https://devstore.io/js/husky
• lint-staged : https://www.huskyhoochu.com/how-to-use-lint-staged/
• prettier 옵션 : https://prettier.io/docs/en/options.html