현재 토이 프로젝트 2조 main 브랜치에 이미 적용되어 있기 때문에 다른 분들은설정할 필요는 없습니다.

프로젝트에 int-staged, husky, prettier, eslint 설치하기

개요

커밋을 날릴 때마다 eslint 규칙검사와 prettier 린팅이 강제적으로 적용되도록 설정해둠

husky라는 프로그램이 커밋이 되는 시점을 확인하고 .husky/pre-commit에 적어둔 lint-staged 스크립트를 실행을 하도록함.

설치 과정

eslint, prettier 종속성 설치

일단 제일 먼저 아래의 명령어를 bash(명령어 터미널 아무거나)에 실행해서 종속성을 설치한다.

npm init @eslint/config
npm i -D prettier eslint-config-prettier eslint-plugin-prettier

eslint.config.js 파일 만들기(이미 만들어져 있으면 만들필요 없음)

아래의 코드 내용을 그대로 복사해서 넣으면 됨.

이 코드에서 추가적으로 airbnb style eslint rule를 추가할 수도 있음.

[https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide로-설정하기](https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0)

import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
  pluginJs.configs.recommended,
];

.prettierrc 파일 만들기

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

package.json을 수정하기

eslint 규칙과 prettier규칙 충돌 막기 위해 eslint와 prettier 규칙이 충돌이 날 때 prettier 룰을 더 우선시 하도록함.

아래 코드 복사해서 package.json에 추가하면 됨.


  "eslintConfig": {
    "extends": [
      "prettier"
    ]
  },

vscode 확장 프로그램 설치하기

eslint와 prettier 확장 프로그램 두개다 설치해야함.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

vscode format on save 설정하기

ctrl + shift + p 누르고 user package.json 검색해서 user settings 를 클릭

해당 파일에 아래의 코드를 추가해주기

    "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

husky, lint-staged 종속성 설치

아래의 명령어를 bash쉘에 입력해서 종속성을 설치하기

npm i -D husky lint-staged
npx husky-init

husky pre-commit 설정하기

husk 종속성을 설치하면 아래 사진 처럼 .husky 폴더가 생성되는데 이 안에 pre-commit 파일을 열고 안에 있는 내용들은 다 지우고 아래 코드 내용을 그대로 복사해서 넣으면 됨.

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

npx lint-staged

package.json에서 lint-staged 명령어 수정하기

package.json에 아래 코드 내용을 복사해서 넣어주면됨.

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --quiet --fix",
      "prettier --write --ignore-unknown"
    ],
    "*.{json,html,css}": [
      "prettier --write --ignore-unknown"
    ]
  },

커밋을 작성해서 husky와 lint-staged가 작동되는지 확인하기

git add .
git commit -m "Chore: husky 와 lint-staged 를 테스트 하는중"

prettier와 eslint 규칙을 무시하고 커밋을 하고 싶을 때

커밋 옵션으로 -no-verify를 넣으면 됨.

git commit -m "intitial commit" --no-verify

참고 자료

버전 정보

"husky": "9.0.11"

"lint-staged": "15.2.7",

"prettier": "3.3.2",

"eslint": "^9.5.0",

Dev-FE-1 / team2-intranet-project-

lint-staged, husky, prettier, eslint, 설정 방법 #42