[ESLint, Prettier, Git Hook, Husky] 팀원들과 코드 스타일을 맞추기 위해 설정하면 좋은 툴

설치

1. eslint

npm install eslint --save-dev

2. prettier

npm install prettier --save-dev

3. eslint-config-prettier

- eslint는 linting 하고 prettier는 formatting을 한다.

- eslint에 코드를 formatting관련 rule이 일부 포함되어있다.

- 이 rule들이 prettier와 다른 설정을 가지고 있으면 설정 충돌이 발생한다.

- eslint에서 formatting 관련 rule들을 해제해주는 eslint plugin

npm install eslint-config-prettier --save-dev

4. husky

- 패키지를 설치해도 작업자가 사용안하면 소용이 없다.

- 개인이 확인해서 실행하면 실수발생의 여지가 있고 강제성이 없다.

- 자동화를 통해서 특정 상황에서 강제로 적용되게 만들 수 있다.

- git hook ? git에서 특정 이벤트 발생 전, 후로 특정 hook 동작을 실행할 수 있게 하는것

- git hook을 사용해 commit, push 등 특정 단계에서 코드가 linting, formatting 되어야만 다음단계가 진행될 수 있게 만들 수 있다.

- git hook설정 자동화 하는게 husky

- npm install 과정에서 미리 세팅한 git hook 모두 적용가능해서 팀원 모두가 git hook 실행이 되도록하기 편하다.

npm install husky --save-dev

설정

1. prettier

- 프로젝트의 루트 디렉토리에 `prettierrc.확장자`파일 생성

- 확장자는 JSON, js 등 다양함

- prettier 공식홈페이지에서 다양한 options 확인 가능

// .prettierrc.js

module.exports = {
  singleQuote: true,
  // "" => ''
  semi: true,
  //코드 마지막에 세미클론
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  // 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록
  printWidth: 100,
  // 코드 한줄이 default 80 => maximum 100칸
  arrowParens: 'always',
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 필수로 formatting
};

- format on save : 내 에디터에만 적용, 팀원들 모두가 되는지는 알 수 없음

- 자동화 하려면 커멘드로 돌릴 수 있어야 한다.

- 커멘드로 돌리려면

1. node_modules/prettier

2. prettier run (terminal)

prettier . 
//프리티어를 쓴다 라는 뜻
// prettier가 내 컴퓨터에 설치가 안되어있다고 판단.

npx
// 내 컴퓨터에 설치되어있는거 아는데 node_modules에 있는 prettier 쓸거야

npx prettier .
// npx node_modules에 있는 prettier를 쓸건데(husky) 이 폴더의 모든 파일에 적용할꺼야 (.)
// 여기까지만 하면 터미널에 출력결과만 보여줌

npx prettier --write .
// formatting 후 저장까지

npx prettier --write --cache .
// 기존 formatting 결과를 임시저장해서 다음 formatting 할땐 내용 안바뀐 파일들은 캐싱된 데이터를 쓴다.

- 너무 길고 번거롭다. 단축어를 쓰자.

- package.json "scripts"

- npx를 안써도 자동으로 node_modules 안에서 찾는다.

- eslint는 cache 파일 `.eslintchache`이 따로 생긴다.

(prettier는 node_modules에 있음)

- 작업자마다 캐싱된 내용 다를테니 gitignore에 꼭 추가하기

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

 

2. eslint

- 프로젝트 루트 디렉토리에 `.eslintrc` 파일 생성

- 확장자명 안붙이면 json파일로 자동 설정

- eslint 파일에서만 json 형식임에도 주석을 사용할 수 있다.

- 다른 사람들이 이미 정의해둔 config를 설치한 후 확장해서 사용  가능하다. ("extends")

- eslint는 javascript만 linting한다. react를 linting 하기 위해서는 plugin 이용하면됨

- "extents"이외에 "rules"로 덧붙일 수 있음

- 예시

//.eslintrc

{
  "env": {
    "es6": true
  },
  "extends": ["react-app", "eslint:recommended", "prettier"],
  "rules": {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
    "eqeqeq": "error", // === 일치 연산자 사용
    "dot-notation": "error", // 가능하다면 dot notation 사용
    "no-unused-vars": "error" // 사용하지 않는 변수 금지
  }
}

- 단축어

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

3. husky

- 처음 husky 세팅시 git hook을 사용하기 위해 Install

// npx husky install //git hooks installed(terminal)
// 위 명령어는 deprecated 됐다.

npx husky init

- 근데 이것도 수동적임
- package.json안에 있는 husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트

- 이후에 clone 받는 사람들은 `npm install` 후 자동으로 `husky install` 되도록 설정

// package.json

{
  "scripts": {
    "postinstall": "husky init"
  },
}

- "postinstall" : npm install 이후에 실행해라

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

- commit 전에 prettier 돌리고 git add 까지 해줌

- commit 하면 자동으로 formatting 된다.

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

- push 전에 lint 통과 못하면 안됨

- commit 은 자유롭게 push는 엄격하게 하는게 좋음

 

https://github.com/jinsoul75/format-lint-hook

GitHub - jinsoul75/format-lint-hook