[eslint, prettier, git hook(husky v9)] 적용해보기

 

eslint

 

 

eslint 설치

 

 

npx eslint --init

 

 

나에게 맞는 질문에 대한 답 선택

 

.eslintrc.json파일 내용이 추가됨 

 

그 중 env에 한줄 추가하여

common js문법 사용할 수 있게 설정

"env": {
    "browser": true,
    "es2021": true,
    "node": true
  },

 

 

 

 

lint검사해보기

 

yarn run lint

 

 

 

 

 

에러가 나는데, 

 

 

 

extends에 마지막 줄

 

 "next/core-web-vitals" 

추가해주기

 

 

 "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier",
    "next/core-web-vitals"
  ],

 

next/core-web-vitals는 next.js에서 제안하는 개발자 권장 사항.

이걸 설정해주지 않으면 아까의 에러가 난다. 

prettier도 extends에 추가해주기

 

prettier

 

prettier 설치

 

yarn add -D prettier eslint-config-prettier

 

 

따로 설정해주지 않아도 바로 사용할 수 있음 

 

 

 

깃훅 사용

 

husky 설치 (dev모드로 설치)

 

yarn add -D husky

 

 

package.json의 scripts에 명령어 추가

 

    "prepare": "husky"

 

 

그러면 

.husky 폴더가 생성 

 

 

 

명령어 입력

 

.husky/pre-commit 파일 생성

 

 

yarn husky run .husky/pre-commit "yarn lint --fix"

 

 

그래도 안돼서 

 

package.json파일에 아래 명령어 추가

 

 "husky": {
    "hooks": {
      "pre-commit": "yarn run lint"
    }
  }

 

 

yarn install

 

명령어 실행

 

echo "yarn run lint" > .husky/pre-commit

 

 

 

그러면 커밋전에 아래와 같이 lint를 실행하게 됨

 

 

 

 

Release v9.0.1 · typicode/husky