Eslint, Prettier, Husky 추가하기

Eslint 설치

먼저 프로젝트 루트 디렉토리에서 eslint를 설치한다.

pnpm add eslint --save-dev

eslint 초기화

eslint를 프로젝트에 적용하려면 초기화해야 한다. eslint를 초기화하려면 다음 명령어를 실행한다.

npx eslint --init

 

Prettier 설치

먼저 프로젝트 루트 디렉토리에서 prettier를 설치한다.

pnpm add prettier --save-dev

prettier 설정 파일 생성

프로젝트 루트 디렉토리에 .prettierrc 또는 .prettierrc.json 파일을 생성한다.

{
  "semi": true,
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

prettier 실행

prettier를 실행하여 프로젝트의 코드를 자동으로 포맷한다.

pnpm run prettier

 

prettier와 eslint 통합 (선택 사항)

prettier와 eslint를 함께 사용하려면 eslint-config-prettier와 eslint-plugin-prettier를 설치하고 eslint 설정 파일을 수정해야 한다.

pnpm add eslint-config-prettier eslint-plugin-prettier --save-dev

 

eslint 설정 파일(.eslintrc.js 또는 .eslintrc.json)에 다음과 같이 설정을 추가하자.

// .eslintrc.js

module.exports = {
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended" // eslint-config-prettier를 사용하여 prettier 규칙을 비활성화
    ],
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        // 필요에 따라 사용자 정의 규칙을 추가할 수 있습니다.
    }
};

 

Husky 란?

Husky는 커밋 또는 푸시 시 자동으로 커밋 메시지 , 코드 및 테스트를 린트한다 .

 

Install

pnpm add --save-dev husky

 

Install

이 init 명령은 프로젝트에서 Husky 설정을 단순화한다. .husky/에서 pre-commit 을 생성하고, package.json에 준비되어있는 스크립트를 업데이트 한다. 나중에 작업 흐름에 맞게 수정할 수 있다.

pnpm exec husky init