[React] ESLint와 Prettier, Git Hook을 이용한 협업

Lintter & Code Formatter

 하나의 프로젝트에서 작업자마다 각자 다른 코딩 스타일을 가지고 있고, 그것이 코드에 드러난다면 이 프로젝트를 제 3자가 읽기도 어려워지며, 팀원끼리도 다른 팀원들이 작성한 코드를 읽고 이해하기 힘들어 집니다. 이러한 요소들은 결국 비효율을 유발하게 되고 이를 극복하기 위해서 팀으로 작업을 할 때에는 여러 작업자들의 코딩 스타일을 일치시키기 위한 Lintter와 Code Formatter를 사용하는 것이 좋습니다.

 

 자바스크립트 진영에서는 Linter로 ESLint를 Code Formatter 로는 Prettier를 사용하는 것이 일반적입니다. ESLint는 코드 자체의 문법 교정과 더불어 코드 스타일링 기능도 포함하고 있지만, Prettier는 자동으로 코드의 스타일을 맞춰주는 보다 강력한 기능을 지원하고 있기 때문에, 빈번히 ESLint와 함께 사용되고 있습니다. 때문에 일반적으로 Lintting 기능은 ESLint에, Code Formatting은 Prettier에 일임하는 방식으로 사용합니다.

 

 코딩스타일은 팀에서 정할 수 있습니다. 다만 이를 개인에게 위임해서 개인이 의식적으로 지키는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일 관련한 논쟁이 이어지다보면 상호 코드를 읽고, 리뷰하고, 작성하는데에도 많은 에너지가 소모됩니다. 이러한 불필요한 에너지 소모를 줄이기 위해서 코딩 스타일 자동화 툴이 필요합니다.

 

 따라서 자동화 될 수 없는 컨벤션은 최소화 하는 것이 좋고 필요한 경우에는 반드시 문서화 시켜서 논의할 때 문서를 기준으로 의견을 주고받고 수정이 필요한 경우에는 논의 결과가 문서에 반영되어야 합니다. 이런 자동화 툴들은 아무것도 없이 시작하는 것 보다 초기세팅은 다소 복잡할 수 있지만, 한번 해두면 추후에 적용하기도 쉽고, 무엇보다 초기에 세팅해둔 것이 지속적인 개발 생산성 향상에 도움을 줍니다.

 

설치

1. eslint

• `npm install eslint --save-dev`
• CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 됨

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`

 

Prettier 설정

• Prettier는 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해서 설정을 할 수 있음
• 설정파일의 확장자 형식은 다양하게 지원하고 있습니다(JSON, YAML, JS, TOML)
• prettier 설정은 포맷팅에만 관련되어있어서 비교적 설정 룰들이 간단한 편

// .prettierrc.js

module.exports = {
  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: true, // "" => ''
  arrowParens: "avoid", // arrow function parameter가 하나일 경우 괄호 생략
};

 

Prettier · Opinionated Code Formatter

ESLint 설정

• eslint 설정은 커스터마이징 할 수 있는 부분이 많고, 언어별(js, ts 등), 환경별(web, node, react 등) 세팅을 해줘야 하는 부분이 많아서 다소 복잡합니다.
• 처음부터 모든 rule 하나하나 설정하는 것이 불필요하거나 불편하다고 판단되는 경우와 다른 사람들이 이미 정의해둔 config를 설치한 후 확장해서 사용할 수 있습니다.
• eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있습니다.

// .eslintrc

{
  "extends": ["react-app", "eslint:recommended"],
  "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" // 사용하지 않는 변수 금지
  }
}

Rules Reference - ESLint - Pluggable JavaScript Linter

Configure Plugins - ESLint - Pluggable JavaScript Linter

Configuration Files - ESLint - Pluggable JavaScript Linter

Husky

Husky - Git hooks

Modern native git hooks made easy

• git hook 설정을 도와주는 npm package
• 번거로운 git hook 설정이 편함 + npm install 과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있어서 모든 팀원이 git hook 실행이 되도록 하기가 편함
• husky를 통해서 pre-commit, pre-push hook을 설정 가능함

Husky를 통한 Git Hook 적용

1. npm install husky --save-dev
2. (처음 husky 세팅하는 사람만 실행 필요) npx husky install
   1. npx husky install : husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트
      • 이후에 clone 받아서 사용하는 사람들은 npm install후에 자동으로 husky install 이 될 수 있도록 하는 설정add postinstall script in package.json

// package.json

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

3. scripts 설정

// package.json

{
  "scripts": {
    "postinstall": "husky install",
		"format": "prettier --cache --write .",
		"lint": "eslint --cache .",
  },
}

 

 

4. add pre-commit, pre-push hook

1. npx husky add .husky/pre-commit "npm run format"
2. npx husky add .husky/pre-push "npm run lint"

참고사항

• git hook에서 eslint 에러가 발견하면 실행중인 script가 종료되기에 이 rule에 대해서 error로 설정할 지 warn으로 설정할 지 잘 고려해야함
  • 예시)
    • 아래와 같이 되어있으면 console.log 코드가 있어도 푸쉬가 되지만
      • "no-console": ["warn", { "allow": ["warn", "error", "info"] }]
    • error로 설정할 경우 console.log가 하나라도 있으면 푸쉬가 안됨
      • "no-console": ["error", { "allow": ["warn", "error", "info"] }]
  • 참고사항)
    • 린트에서 warning도 엄격하게 하나도 허용하지 않으려면
    • eslint --max-warings=0 으로 옵션을 붙여서 스크립트를 실행하면 됨

 

 

출처 - 원티드 프론트엔드 프리온보딩 인턴쉽

https://pollen-port-115.notion.site/1-3-7cf6ac2fbdec4ffca3b45a98029db60e