안녕하세요 오늘은 코드분석을 자동으로 해주는 prettier , eslint , husky에 대해서 알아보겠습니다 !

지금까지 Prettier와 Eslint는 단순히 코드일관성을 유지해주는 코드 분석 툴이라고만 알고있었고 익스텐션만 깔아놓고 관심을 가지지않았는데 협업을 하는과정에서husky의 중요성을 알게되면서 prettier와 eslint도 더 깊게 공부를 해보았고 잊어버리지않게 포스팅하게되었습니다 ! 🙂

prettier와 eslint를 쓰는이유

혼자 개발을 진행할떄는 쓰는 이유가 적어지지만 협업을 할 떄 필요성이 커지는 코드 분석 툴입니다.

prettier eslint를 왜 쓰세요? 라는 물음을 받았을떄 한 줄로 설명하자면

협업을 할 때 팀원들과의 코드 일관성을 맞추기 위해서 씁니다.

라고 대답해도 되지만 이번 포스팅에서는 쪼끔 더 깊게 알아보겠습니다.

prettier란?

• 코드 포맷팅 툴
• 포맷팅 룰을 커스터마이징할 수 있다.
• 코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅 스타일을 공유할 수 있게 된다.

eslint란?

• 일관되고 버그를 피할수 있는 코드를 짜기 위해서 만들어진 코드 분석 툴
• 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드 , 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.
• 설정 커스터마이징을 허용해주기 떄문에 필요한 규칙들을 커스텀해서 적용가능하다.

실습

Prettier는 코드 포맷팅 툴이고

Eslint는 버그나 에러를 미리 방지해주는 코드 분석 툴입니다.

그러면 어떻게 프로젝트에 적용할까요?

1. eslint

npm install eslint --save-dev

eslint를 깔아줍니다.

CRA 환경에서는 기본으로 깔려있기떄문에 설치를 하지 않아도됩니다.

1. prettier

npm install prettier --save-dev

1. eslint-config-prettier

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

사실 eslint안에 코드 포맷팅 기능이 내장되어있어서 eslint만 써도 prettier를 쓰는 효과까지 가져올 수 있습니다. 하지만 왜 prettier와 eslint를 같이 쓸까요?

그 이유는 코드 포맷팅만 봤을떄 prettier가 eslint보다 더 강력한 기능을 가지고 있기떄문입니다.

그런 이유로 eslint와 prettier를 같이쓰게 되었습니다.

같이쓰게 될 떄 한가지 문제가 있는데 충돌이 일어납니다.

prettier와 eslint는 rule이란게 존재합니다. 그 rule이 겹치게 되면 충돌이 일어나게 되는데 그 충돌을 막기위한 패키지가 eslint-config-prettier입니다.

eslint-config-prettier라이브러리는 eslint안에있는 prettier와 관련된 rule들을 해제해주기떄문에 충돌을 막아줍니다.

기본적으로 위 3가지 패키지들을 설치하면 eslint와 prettier를 사용할 수 있는 환경이 제공됩니다.

이제 저희가 해야 할 일은

우리의 프로젝트의 rule 적용하기 입니다.

prettier rule 적용

// .prettierrc.js

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

eslint rule 적용

// .eslintrc

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

위의 방식으로 직접 파일을 만들어 이미만들어진 rule들을 복사 붙이기해도 됩니다 !

하지만 나만의 방식 , 팀원들과의 고유의 방식을 만들고 싶다면 ?

npx eslint --init

를 터미널에 입력해주면 eslint의 기본 틀을 제공해줍니다. 그 후에는 팀원들과 규칙을 논의해 rules 객체안에 입력해주기만 하면 됩니다 !

명령어 번외

prettier

• npx prettier —write —cache

npx prettier만 해줬을 경우에는 그 prettier설정에 맞는 코드들이 터미널에만 출력되기떄문에 그걸 현재 코드에 적용을 바로 시켜주는 옵션이 —write입니다.

—cache는 말 그대로 캐싱해주는 옵션입니다.

npx prettier 라고만 쳤을때는 모든 파일들을 검사해서 코드 포맷팅을 해주는데 한 파일만 수정을 했다면 나머지 코드들은 의미없이 계속 포맷팅을 되기떄문에 불필요하게 포맷팅을 자주하게 됩니다. 하지만 —cache옵션을 써준다면 전 과 후를 비교해 비교를 최소화 시켜줍니다 !

eslint

• npx eslint —cache

  위의 cache를 쓰는 이유와 동일합니다 !

설명 번외

eslint와 prettier를 설명했는데 제가 공부하면서 의문이 들었던걸 공유해보겠습니다 !

prettier , eslint 익스텐션이 있는데 왜 따로 설정을 할까?

좀 다양하고 디테일하게 rule을 설정하기 위해서 씁니다 !

prettier, eslint를 따로 설정을 했다면 익스텐션은 사용안해도 될까?

사용해도 되고 안해도 됩니다. 하지만 익스텐션은 기본적은 rule을 제공해주기도 하지만 prettier와 eslint를 지속적으로 적용시켜줍니다.

만약 익스텐션을 쓰지않고 prettier과 eslint를 설정만해주고 적용을 해야한다면

저희는 npx prettier —write —cache 와 npx eslint —cache를 계속 터미널에 입력해주면서 코드를 짜야합니다.

하지만 익스텐션을 쓴다면 컨트롤+s를 눌러 저장만 해준다면 자동으로 적용해줍니다 !

husky

husky는 무엇일까요?

commit과 push를 할떄 rule와 맞지않다면 commit과 push를 제한해주는 hook입니다.

팀원들과 코드 일관성을 맞추기위해 eslint와 prettier를 도입했습니다.

이제 저희의 프로젝트는 저희가 설정한 rule에 맞게 코드가 이쁘게 짜여질겁니다.

문제가 없어보이지만 몇가지 문제점이 있습니다.

팀원들중에 prettier, eslint 익스텐션을 적용안한 인원이 있다면?

prettier,eslint 익스텐션을 적용을 안했다면 수동으로 터미널에 입력을 해줘야한다고 했습니다.

husky를 쓰지 않는다면 익스텐션을 적용안한 팀원이 바쁘게 코드를 짜다 터미널에서 수동으로 prettier , eslint 적용을 안하는 실수를 했을때 제한없이 바로 push가 되고 코드 일관성이 무너지게됩니다.

팀원들중에 vscode를 사용하지않는 인원이 있다면?

vscode에서 prettier,eslint 익스텐션이 활성화되는데 만약 어떤팀원이 vim에서 가볍게 일처리를 했다면?

코드 일관성이 무너지게 될수도 있습니다.

husky를 통해 git hook 적용하기

npm install husky --saev-dev

npx husky install  (처음 세팅한 사람만 실행하면 됩니다 !)

npx husky install  (hook을 실제 .git에 적용)

// package.json

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

// package.json

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

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

마치며

prettier , eslint , husky에 대해 알아보았는데 협업을 할 떄

확실히 필요한 부분인것같습니다.

내가 혼자 짤떄에도 코드가 지저분해지는 경우가 대다수인데 코드 스타일이 다른 팀원들과 코드를 짜게될 때 아무리 잘하는 개발자가 클린코드를 했다고 생각해도 기본적인 rule이 다르다면 결국 지저분해질 것입니다.

처음 접한다면 귀찮은 과정이라고 생각이 들수도 있지만 꼭 적용해보았으면 좋겠습니다 !!