2021. 3. 25. 10:32ㆍ카테고리 없음
사전에 eslint, prettier가 설치되었다는 가정하에 작성한 글입니다!
npm install --save-dev -g eslintglobal 설치 했다는 가정하게 코드를 작성했습니다. 아니라면 직접 node_modules의 bin파일에서 CLI (command line interface) 명령어를 입력하도록 package.json에 넣어줘야 합니다!
// global 설치 안 한 경우
./node_modules/.bin/eslint --fix .
// global 설치한 경우
eslint --fix .*프로젝트 전역에서 작동하는 지 확인해보시고 판별해서 사용하시면 될 것 같습니다.
git hook?
git commit , git push하기 전에 갈고리로 낚아 채오는 것을 git hook이라 합니다.
husky
프론트엔드 개발환경에서 git hook을 편하게 도와주는 패키지 매니저를 이용해 내가 수정, 작성한 코드를 commit이나 push하기 전에 사전 작업을 해주고 올릴 수 있습니다.(특정 스크립트가 실행되도록)
이번 포스팅에서는 개발자가 수정, 작성한 코드를 commit할 경우 husky가 갈고리를 훅 날려서 prettier, eslint fix를 해주면!
같은 컨벤션으로 팀원들의 코드를 최대한 맞춰갈 수 있습니다.
또 다른 예로는 , hook을 걸어줘서
prettier -> eslint fix -> test code pass
된 후에 commit이 되도록 한다! 라고 걸어 줄 수 있는 것입니다.
2년 husky5가 나오면서 방법이나 많이 변경된 부분이 있습니다. husky5 사용법이 어렵다고(쉘 스크립트로 생성,,) 롤백 시키는 분들도 많고 한데 저는 회사 commercial 목적으로 사용할 예정이고 husky4도 지속적으로 지원한다고 문서에 나와있어 빠르게 husky4를 기준으로 글을 작성했습니다.
:: 참고
husky & lint-staged 설치
// npm 사용 유저
$ npm install --save -D husky@4
저는 window기반에서 git GUI 툴로 git kraken을 사용하는데 CLI 환경에서는 hook이 정상적으로 잡아왔지만 kraken에서는 정상적으로 후킹이 안되어 여기에서 참고해서 수정하니 잘 적용되는 것을 확인할 수 있었습니다.
lint-staged
commit 전에 js확장자에 해당하는 파일들을 싹다 eslint 검사를 해주면 commit 할 때마다 전체 프로젝트 파일들을 싹다 검사하면 프로젝트 덩치가 커지면 굉장히 많은 시간이 걸리게 됩니다!
main.js만 수정해서 commit하려 했는데, 프로젝트의 모든 .js 파일을 다 검사해주는 거죠.. commit할 때마다..그래서! 변경된 사항만 lint검사해주는 lint-staged를 사용하겠습니다!
// npm 사용 유저
npm install --save -D lint-staged
// yarn 사용 유저
yarn add -D lint-staged
설치가 끝났으면 설정만 해주면 될 것 같습니다!
따로 root에 .huskyrc .lintstagedrc로 prettier 설정 파일을 따로 .prettier처럼 뺀 것처럼 만들 수 있습니다. 짧은 설정 코드여서 package.json에서 추가해서 사용하는 방식으로 추가했습니다.
package.json 에서 아래와 같이 추가 해주면 실행합니다.
"scripts": {
"start": "node ./dist/server.js",
"lint-fix": "eslint --fix",
"format": "prettier --write \"src/**/*.{ts,tsx,js,json,html}\""
},
"husky": {
"hooks": {
"pre-commit": "lint-staged --no-stash"
}
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"npm run format",
"npm run lint-fix"
],
},
@이슈
* hooks의 pre-commit 에서 --no-stash 인자를 넣은 이유 : prettier로 포매팅을 해주고, 린트 픽스까지 되는 데 commit이 안되고 토해내는 현상이 있었는데 lint-staged v10.4 이후에도 발생하는 이슈인 것 같습니다. 참고
* 원래 lint-staged 에서 위의 코드에서 보면 "npm run lint-fix" 후 마지막으로 "git add"를 해줬어야 했는데, lint-staged 10버전 이후부터는 지원해주므로 빼줘야 합니다.
[정리]
이런 git hook이 선택의 한 부분이라는 것을 생각해봐야합니다.
빠른 결과물을 도출해 유저 피드백을 빨리 빨리 받아야하는 스타트업에서 이런 정책을 강제한 방법은 유일하고, 완벽한 방법은 아닐 수 있습니다. (빨리 빨리 개발하고 유저 피드백을 받아 아니다! 싶으면 다시 피봇(아이템을 바꾸는..)해야하는 데 이런 프로세스는 큰 스트레스로 다가올 수 있습니다...)
CI/CD 환경에서 코드 품질을 높히기 위해서 유용한 방법이지만 팀원들의 공감을 얻지 못한 정책은 오히려 독이 될 수도 있다는 것입니다. 강한 정책을 세울 지, 느슨한 정책을 세울 지 선택적으로 사용하면 꽤 유용한 도구가 될 것 같다는 소견입니다😊
[reference]