lint-stage(린트 스테이지) husky(허스키) 설정방법

1. 코드 컨벤션 유지를 위해 lint-staged 와 husky 를 설치하기

2. 위 라이브러리는 깃을 커밋하기 전에 eslint와 prettier를 동작하기 위함

3. 커밋메세지 작성시 해당 허스키에서 린트검사를 실행한뒤 통과하면 커밋된다

Lint-stage

lint-staged를 사용하여 변경된 JavaScript 파일들에 대해서만 ESLint를 실행하고, 변경된 CSS 파일들에 대해서만 Stylelint를 실행할 수 있습니다. 이렇게 하면 커밋하기 전에 변경된 파일들에 대해서만 코드 검사를 수행하므로, 전체 프로젝트에 대해서 검사하는 것보다 빠르고 효율적인 방식으로 코드 품질을 관리할 수 있습니다.

husky

Husky를 설치하고 설정한 후, pre-commit 훅은 코드 커밋하기 전에 지정된 스크립트 또는 명령어를 실행합니다. 이를 통해 코드 품질을 유지하고 커밋 시점에서 자동으로 코드 스타일, 정적 분석, 테스트 등을 수행할 수 있습니다

설치 방법

yarn  add -D lint-staged husky 

yarn husky install

린트 스테이지와 허스키를 개발 의존성에 추가시킵니다
허스키를 설치 합니다 프로젝트 상위에 ./husky 폴더가 만들어집니다

yarn husky add .husky\pre-commit "yarn lint-staged --no-stash"

.husky 폴더 안 pre-commit 파일 생성명령어 입니다
커밋시 yarn lint-staged 명령어가 동작하도록 설정합니다

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

package.json 에서 위 코드를 복붙합니다
lint-staged 실행되는 명령어를 설정합니다
prettier --write 를 동작하기 위해선 pettier를 설치 해줘야 합니다
vscode 확장 설치는 별개

yarn add -D prettier 

프리티어를 DevDependencies 에 설치합니다

yarn add -D prettier-plugin-tailwindcss

추가로 테일윈드사용시 테일윈드 프리티어 플러그인을 설치해줍니다

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-tailwindcss"]
}

.prettierrc 파일에 테일윈드 프리티어 규칙도 추가해야하기에
plugins 테일윈드 플러그인을 설정해줍니다

그럼 완성!