서론

프리온보딩 팀과제를 하면서 주로 했던 세팅에 대한 정리입니다.

내가 보려고 쓰는 환경설정 1에서 코드 스타일과 규칙을 지키기 위한 ESLint와 Prettier를 설치했습니다.
2에서는 git hook을 사용하여 작업자가 팀 안에서 규정한 rule을 지킬 수 있도록 강제성을 부여하는 법에 대해 설명합니다.

본문은 아래 4가지 내용에 대해 서술하며, 설정 방법을 설명합니다.
1. git hook이란?
2. husky
3. lint-staged 설정하기
4. conventional commit message 설정하기

본론

Git Hooks

Git Hooks는 Git에서 이벤트가 발생할 경우에 실행할 수 있도록 제공하는 스크립트입니다.
기본 hook 디렉토리는 .git/hooks입니다.

참고 1: Git을 커스터마이징 하는 방법 - Git Hooks
참고 2: My Blog : Git Hooks 사용해보기

Husky

Git Hooks를 설정해서 이벤트가 발생할 경우 스크립트를 발생시킬 수 있고, 협업에 있어서 commit과 push할 때 규칙을 강제할 수 있습니다. 하지만 Git Hooks를 설정하려면 귀찮게 수동으로 스크립트를 작성해서 '.git/hooks'디렉토리에 파일을 직접 복사해야합니다.
이러한 번거로운 과정을 쉽게 해주는 라이브러리로 Husky가 있습니다.
참고 : Husky

💡 Husk instead of Git hooks
1. Git Hooks 실행 환경 설정을 자동화할 수 있습니다.
2. Git Hooks에서 미리 정의된 후 이외에 더 다양한 작업을 할 수 있습니다.
3. Git Hooks는 Unix-like 시스템에서 작동하지만 Husky는 Windows를 포함한 다양한 플랫폼을 지원합니다.
4. npm 명령어로 훅 스크립트 실행이 가능합니다.

😎 Husky를 사용해서 만들 규칙은 다음과 같습니다.

• pre-commit(커밋 전)
  1) Prettier 적용하기
  2) commit 메시지 규칙에 따르지 않으면 커밋 불가능
• pre-push(푸쉬 전)
  1) ESLint 적용하기

Husky를 설치합니다

1. husky 라이브러리 설치를 합니다.

npm install husky --save-dev

or

yarn add husky --dev

2. husky를 .git에 적용시킵니다.(루트 디렉토리에 .husky가 생성됩니다.)

npx husky install

or

yarn husky install  

3. 레파지토리를 clone하여 라이브러리를 설치할 때 자동으로 2번이 되도록 package.json에서 script에 내용을 추가합니다.

// package.json
"scripts": {
	...
    "postinstall": "husky install"
  },

Pre-commit에 Prettier를 적용합니다.

1. package.json에 pre-commit에 적용할 스크립트를 추가합니다.Prettier가 포맷팅할 수 있는 스크립트를 추가합니다.

// package.json
"scripts": {
	...
    "format": "prettier --cache --write ."
  },

2. husky에 pre-commit을 추가합니다. .husky 내부에 pre-commit이 생성됩니다.

npx husky add .husky/pre-commit "npm run format"

or

yarn husky add .husky/pre-commit "yarn run format"

Pre-push에 ESLint를 적용합니다.

1. package.json에 pre-push에 적용할 스크립트를 추가합니다.ESLint가 Linting할 수 있는 스크립트를 추가합니다. 또한 아래의 스크립트는 .eslintcache 파일을 생성하므로 gitignore에 .eslintcache를 추가합도록 합시다.

// package.json
"scripts": {
	...
    "lint": "eslint --cache ."
  },

2. husky에 pre-push를 추가합니다. .husky 내부에 pre-commit이 생성됩니다.

 npx husky add .husky/pre-push "npm run lint"

or

 yarn husky add .husky/pre-push "yarn run lint"

Lint-staged 적용하기

husky는 모든 파일을 검사합니다. lint-staged를 통해 Git의 staged한 코드만 검사할 수 있도록 할 수 있습니다.

lint-staged를 설치합니다.

npm install --save-dev lint-staged 

or

yarn add lint-staged --dev

package.json에 lint-stage설정을 추가합니다.

//package.json
  "lint-staged": {
    "./src/*/.{js,jsx,ts,tsx}": [
      "npm run lint -- --fix"
    ]
  }

pre-commit과 pre-push에 lint-staged를 추가합니다.

npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/pre-push "npx lint-staged"

or

yarn  husky add .husky/pre-commit "yarn lint-staged" 
yarn  husky add .husky/pre-push "yarn lint-staged" 

참고 : lint-staged github

Conventional Commit Message

commit message에 규칙을 지키지 않으면 commit을 할 수 없도록 강제성을 부여합니다.
팀에서 정한 commit message 규칙입니다.

태그: 메세지 #이슈번호
ex ) feat: 회원 로그인 기능부분 구현 #24

태그 종류
feat: 새로운 기능과 관련된 것을 의미한다.
fix: 오류와 같은 것을 수정했을 때 사용한다.
docs: 문서와 관련하여 수정한 부분이 있을 때 사용한다.
style: 코드의 변화와 관련없는 포맷이나 세미콜론을 놓친 것과 같은 부분들을 의미한다.
refactor: 코드의 리팩토링을 의미한다.
test: test를 추가하거나 수정했을 때를 의미한다.
chore: build와 관련된 부분, 패키지 매니저 설정 등 여러가지 production code와 무관한 부분 들을 의미한다. 말 그대로 자질구레한 일들. 초기 설정도 여기에 포함
design: css, ui 변경
rename: 폴더 이름, 경로 변경

commitlint 라이브러리를 사용합니다.

1. commitlint library를 설치합니다.

npm install --save-dev @commitlint/{config-conventional,cli}

or

yarn add --dev @commitlint/{config-conventional,cli}

2. commitlint config를 추가합니다.

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

3. tsconfig 파일 include에 commitlint.config.js를 추가합니다.

 //tsconfig.json
 "include": ["src", "commitlint.config.js"]

참고 : commitlint 라이브러리 github

husky에 commit-message를 추가합니다.

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

or

yarn husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

commitlint.config.js에 rules를 추가합니다.

//commitlint.config.js
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert', 'design', 'rename'],
    ],
  },

결론

팀 내 규칙대로 git설정을 완료하였습니다.