lint-staged

이번에는 지금까지 배운 패키지를 활용하여 git을 통해 commit을 진행하기 전에 코드를 점검하고 수정할 수 있도록 설정하는 lint-staged 과정을 알아보도록 하겠습니다.

1. lint-staged

CRA를 통해 프로젝트를 만드는 과정은 생략하고 이후 터미널을 통해 패키지를 설치하는 것부터 시작하도록 하겠습니다.

1.1 패키지 설치

$ npm install husky -D
$ npx husky install
$ code .

1.2 package.json

"scripts": {
  "prepare": "husky install",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

이전 시간에 scripts 옵션에 기재한 내용과 마찬가지로 prepare에 husky install을 입력하여 다른 환경에서도 패키지를 설치하여 사용할 때에도 git hooks이 활성화될 수 있도록 합니다.

1.3 pre-commit 생성

이번에는 commit을 하기 직전에 lint-staged라는 스크립트를 실행시킬 수 있도록 설정해봅니다. 먼저, VScode에서 터미널을 열어 .husky 내에 pre-commit 파일을 만들고 필요한 설정을 진행하겠습니다.

$ npx husky add .husky/pre-commit "npx lint-staged"
$ npm i lint-staged -D

이후 lint-staged 패키지를 개발 의존성 모드로 설치해줍니다.

이제 이를 통해 우리는 커밋을 하기 직전에 lint-staged라는 명령어가 실행됩니다. 그렇다면, lint-staged가 어떠한 역할을 수행해야할지 규정해줘야 합니다.

1.4 lint-staged 규정

이처럼 packaged.json 파일 내에 코딩을 하여 수행해야하는 역할을 규정합니다.

  "lint-staged": {
    "**/*.js": [ // 프로젝트에 있는 모든 js 파일이 커밋을 하려고 하면!
      "eslint --fix", // eslint의 규칙에 맞게 고치고
      "prettier --write", // prettier에 맞게 고치고 
      "git add" // 변경 내용을 git에 add 시킴
    ]
  },

그리고 create-react-app으로 설치된 프로젝트는 eslint는 기본적으로 설치되어 있으나 prettier는 별도로 설치를 해주어야합니다.

$ npm i prettier -D

모두 완료되었으며, 이를 통해 이후 프로젝트에서 커밋을 진행하게 되면 정돈이 된 상태로 올라올 수 있게 되었습니다!👍