ESLint, Prettier 자동화 세팅하기 (feat.husky)

<도입 계기>

프리온보딩 첫 주차 세션에서 ESLint, Prettier 세팅이 협업에서 매우 필수적임을 배웠다. 그 전에도 팀 프로젝트에서 린터와 포맷터 모두 사용했지만, 이를 자동화하여 사용할 생각은 하지 못했다. (수동으로 config 파일을 깃에서 fork 할 때 받아와서 에디터에서만 사용했고, push, commit시 체크하지 않았던 기억...) 린터/ 포맷터의 필요성과 자동화 세팅 방법에 대해 배운 것을 채용 과제를 하며 적용해보기로 했다. 자동화는 Husky의 도움을 받을 것이다. 초반에는 세팅이 조금 번거로울지라도, 회사에서 협업 시 필수이므로 지속적인 개발 생산성 향상을 위해 지금 시도해보기로 했다.

 

<도입 과정>

1. 설치

- lintting 기능은 ESLint / formatting은 Prettier를 사용

- eslint, prettier 설치하기 (나는 CRA로 세팅하여, eslint 설치는 생략했음)

- eslint-config-prettier 설치하기 (eslint에 포함된 일부 formatting 관련 rule과 prettier의 충돌을 피하기 위해, formatting 관련 rule을 해제해주는 eslint plugin)

 

=> 여기까지 진행하면, eslint 와 prettier 패키지를 이용할 수 있게 된다.

=> 이제, 팀원들간의 일관적인 규칙이 적용되는 것을 보장하기 위해 설정을 해주어야 한다. 

 

2. 규칙 적용

- 루트 디렉토리에 .prettierrc.확장자 /  .eslint.확장자 로 설정 파일 작성하기

 

3. Husky로 자동화하기

<왜 husky를 도입하나?>

- 개인이 매번 linter, formatter를 실행하는 것은 실수가 발생할 여지가 있고, 강제성이 없다. 따라서 자동화를 통해 신경쓰지 않아도 자동으로 룰이 적용되도록 해야 한다. 특정 상황 (push, commit 발생 등)에서 강제로 적용이 되도록 하는 것이 좋다 

 

e.g. commit된 코드는 무조건 formatting이 완료되어야 하고, push된 코드는 무조건 eslint가 pass된 상태에서 push가 되도록

 

(여기서 왜 commit과 push 시점에 각각 formatting과 lintting을 나누어 하는지 강의 시간에 질문을 했다. 린터 규칙에서 console.log를 푸쉬 전에 없애는 등의 엄격한 룰을 적용하는데, 작업하며 작업 단위별로 커밋할때마다 엄격한 린터 규칙이 적용되면 개발 속도가 너무 느려지고 일일이 확인하기 어렵기 때문에 강사분은 나누어 진행하는걸 선호한다는 답변을 얻을 수 있었다.)

 

- git hook으로 이벤트가 발생하기 전, 후 동작을 실행하게 할 수도 있지만, 설정이 까다롭고 사전에 팀원들이 해야 할 작업이 생긴다. 이 작업들을 실행하지 않을 경우 hook이 실행되는 것을 보장할 수 없다. 그래서! husky를 도입한다. 

 

- husky는 git hook 설정을 도와주는 npm 패키지로, 편리하게 git hook을 설정하고, npm install 과정에서 사전 세팅한 훅들을 다 적용시킬 수 있다. 그래서 모든 팀원이 git hook을 실행시키도록 보장하기 편하다. 

 

<husky 도입 방법>

1. 설치하기

npm install husky --save-dev
npx husky install

2. package.json에 명령어 추가

//package.json

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

3. husky pre-commit, pre-push hook 등록하기

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

4. lint-staged와 결합하기

-> 포맷팅 수행 후, git add 명령어 자동 수행 & git staged에 올라온 변경사항 대상으로만 포맷팅 수행하도록 설정 (이 부분은 이후 다시 시도해볼 예정!)

 

이렇게 설정하니, commit할 때와 push 할 때 각각 prettier와 eslint가 작동하는 것을 로그에서 확인할 수 있었다. 

 

<어려웠던 점>

lint-staged는 강의록에 나와있지 않아 구글링으로 해결해야 했다. 근데, lint-staged에 대해서 정확히 이해하지는 못했음. 포매팅 수행 후, 파일이 변경되므로 git add를 다시 수행해주어야 하는데, 이때 git add 명령어를 자동으로 수행하게 해주는 방법을 모르겠다. 

 

또, 개인 과제에서 우선 시험해본 것이라 협업 시 필요한 룰을 논의를 통해 정한 것이 아니라, prettier와 eslint 설정에서도 기본적인 것들만 설정해줘서 아쉽다. 협업 시 더 잘 활용해본다면 좋겠다. :)