next.js 14 + typescript에 eslint, prettier, husky 적용하기

1. Eslint 설치

기존 CNA로 eslint 설정을 해두었기 때문에 .eslintrc.json 파일이

{
  "extends": "next/core-web-vitals"
}

이렇게 생성되어있을 것이다.
우리는 기본 airbnb 옵션을 선택하여 개발할 예정이기 때문에 추가로 eslint-config-airbnb를 설치할 것이다.

ES6+ 에서 eslint 를 사용하기 위해서는 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y 가 전부 필요한데, shortcut으로

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

추가로 eslint-config-prettier와 eslint-plugin-prettier가 필요하다.

• eslint-config-prettier
  -> eslint에서 prettier와 겹치는 포매팅룰을 삭제

• eslint-plugin-prettier
  -> eslint에 prettier의 규칙 위임, 포매팅 기능을 추가

우리는 typescript를 이용하기 때문에

npm install eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^7.0.0 \
            @typescript-eslint/parser@^7.0.0 \
            --save-dev
&&

npm i -D eslint-plugin-prettier

를 설치해주면 package.json - devdependencies에 모든 패키지가 설치된 것을 확인할 수 있다.

• .eslintrc.json 세팅

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

2. prettier 설치

• 설치

npm install --save-dev prettier

• 프로젝트 root에 .prettierrc 파일 생성

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

다른 팀원이 세미 콜론있는 걸 선호해서 semi는 true로 해주었다!
prettier 규칙 참고 : https://prettier.io/docs/en/options#experimental-ternaries

• package.json

"scripts": {
    ...
    //prettier
    
    "format": "prettier --check --ignore-path .gitignore .",
    "format:fix": "prettier --write --ignore-path .gitignore .",
    
    // eslint
 
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
  },

3. Husky로 자동화하기

• 협업을 위해 eslint와 prettier를 자동화하면 좋을 것 같다고 생각해서 husky를 적용하기로 했다!
• Husky : Git hook 으로, Git 과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능의 Npm 모듈이다. (ex. commit, push)
• husky와 lint-staged를 이용해 git commit시 변경된 파일만 eslint, prettier 자동 실행하게끔 한다.

1. npm install husky lint-staged --save-dev

2.  npx husky init

    -> 첫 initialize, scripts에 "prepare": "husky"가 자동으로 생성된다. 

next.js 버전 문제인지 npx husky install 입력 시 deprecated error가 발생했다. init 하니까 오류가 나지 않았다.
이제 프로젝트 루트 폴더에 .husky가 생긴 것을 확인할 수 있다.

• .husky/pre-commit 에 추가

#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

• package.json의 scripts에추가

    "postinstall": "husky install"

• package.json에 추가

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  },

-> 다른 팀원들에게도 자동으로 설치가 되게끔 해준다.

이제 커밋때마다 자동으로 코드 포맷팅 rule에 따라 바꾸어서 commit 해주고 push를 막아준다.