코딩 컨벤션 그리고 자동화

 

ESLint, Prettier, Husky

 

프로젝트를 초기 구성하게 되면 코딩 컨벤션을 정하게 된다.

나만의 코드 취향이라던지, 팀원과 협업 과정에서 자체적인 규칙으로 일관된 코드 스타일을 유지하기가 힘들 수 있다.

이러한 비효율을 유발하는 부분을 극복하기 위해 Lintter와 Code Fomatter를 사용하게 된다.

그런 도구에 ESlint, Prettier, Husky가 있다.

 

 

ESLint

Docs

일관된 버그를 피할수 있는 코드를 짜기 위해서 만들어진 코드 분석 도구이다.

작성된 코드의 구문을 분석하여 규칙, 버그가 발생할 여지가 있거나 불필요한 코드 등에 대한 경고를 띄워준다.

설정 커스터마이징을 허용하기에 필요한 규칙들을 커스텀해서 적용이 가능하다.

ESLint 설치

eslint-config-prettier: ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화한다.

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

ESLint 설정

// .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" // 사용하지 않는 변수 금지
  }
}

 

---

Prettier

Docs

Code Formatter 도구이다.

Formatting 룰을 커스터마이징 가능하다.

Code Formatting을 사용함으로써 팀원 모두가 같은 Formatting Style을 공유할 수 있다.

ESLint에도 Code Formatting 기능이 있지만 Prettier가 훨씬 강력하기 때문에 ESlint와 Prettier를 융합해서 사용하는 것이 일반적이다.

Prettier 설치

npm install prettier --save-dev

Prettier 설정

// .prettierrc.js

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

 

---

ESLint, Prettier 설정만으로의 문제점 🔥

두 가지를 도입하고 룰을 설정해도 개발자가 사용을 안 하면 효과가 없다.

개인이 매번 확인해서 실행하는 것은 실수가 발생할 여지가 있고 강제성이 없다.

이 문제점에서 자동화를 하여 개발자가 신경 쓰지 않아도 자동으로 적용이 되게 하고 특정 상황에서 강제로 적용이 필요하다.

commit 된 코드는 무조건 formatting이 완료되어야 하고, push 된 코드는 무조건 eslint pass 된 상태에서만 push 되도록 자동화 구축이 필요하다. 이러한 문제들로 git hook을 도입하게 된다.

git hook은 git에서 특정 이벤트 발생하기 전, 후로 특정 hook 동작을 실행할 수 있도록 한다.

git hook 설정을 도와주는 npm package로 Husky에 대해 알아보자. 👀

 

---

Husky

Node.js 개발 환경에서 git hook을 편리하게 사용할 수 있게 만들어주는 도구이다.

Husky를 사용하면 프로젝트 별로  commit, push 등과 관련된 정책을 관리하고 공유할 수 있다.

Husky를 통한 Git Hook 적용

npm install husky --save-dev

repository를 clone 받는 개발자가 npm install 후에 자동으로 husky install 이 될 수 있도록 설정한다.

eslint, prettier 명령어에 --cache 커맨드를 추가하면 이전에 성공한 케이스에 대해서는 캐싱해서 실행된다.

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

pre-commit, pre-push hooks를 적용한다.

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

 

 

통일된 컨벤션을 위해 어떻게 강제할 수 있는지 알아보았다.

코드리뷰나 동료들과 함께 같은 코드 스타일을 유지하는 비용을 확실하게 줄여 줄 수 있을 것 같다.