React[Creating Project] - lint-staged

01.lint-staged란?

• Git에 staged 상태인 파일만 lint해주는 Node.js 패키지
• 즉, git에 commit 하기전에 코드를 점검하고 수정할 수 있도록 도와주는 패키지를 의미한다.

02.lint-staged의 필요성

• husky만 사용하면 프로젝트의 모든 코드를 검사히기 때문에 비효율적이지만 lint-staged는 Git의 staged한 코드만 검사해서 보다 효율적인 lint가 가능하다.

03.패키지 설치

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

04.package.json

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

• prepare에 husky install을 입력하여 다른 환경에서도 패키지를 설치하여 사용할 때에도 git hooks이 활성화될 수 있도록 합니다.

05.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가 어떠한 역할을 수행해야할지 규정해줘야 합니다.
• 참고로 pre-commit 파일안에 lint-staged를 npx lint-staged로 수정해줘야 commit할 때 오류가 발생하지 않습니다.

06.lint-staged 규정

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

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

$ npm i prettier -D

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

07.Commit

• App.js에 있는 className="App"을 className='App'으로 수정하고 commit 해줍니다.
• 그럼 commit되기전에 className='App'이 자동으로 prettier 패키지에 의해서className="App"으로 수정된 후 커밋 되는 것을 볼 수 있습니다.
• 이처럼 lint-staged는 프로젝트에서 커밋을 진행하게 되면 lint-staged에서 규정했던eslint, prettier을 먼저 적용한 후에 커밋 시킵니다.