Code Convention Check
장점
- 여러 사람이 함께 작업하는 코드에 대해 가독성을 높임
- 유지보수의 용이성
- 코드 스타일을 동일한 형태로 맞출 수 있음
우리 팀에서는
- ESLint를 사용하고 Prettier는 자율적
- 대신 commit 할 때 ESLint fix를 강제시킴
- ESLint는 airbnb 룰 적용
ESLint 설치
npm install -g eslint eslint-config-airbnb-base eslint-plugin-import
eslint --init설치 후 init(초기화)하면 자동으로 현재 폴더 내에 .eslintrc.js 파일이 생성된다.
install trouble shotting
ln -s /usr/bin/nodejs /usr/local/bin/node
npm cache clean -f
npm install -g n
n stable
npm initairbnb 룰 적용
npx install-peerdeps --dev eslint-config-airbnb다음에 이 파일에 대한 dependency를 다운받을 때 개발자에만 사용하면 되는 부분이므로 --dev 옵션을 주었다.
eslint <파일명> --fix명령 시, airbnb 룰에 맞춰 해당 파일을 자동으로 formatting 해준다.
Hook을 사용한 Lint 테스트
Git Hook
특정 이벤트가 발생할 때 지정된 코드를 수행시키는 기법
pre-commit hook
- 커밋 명령시 코드를 실행하고 그 결과에 따라 커밋 수행 여부 제어
- Lint 테스트를 삽입하고, 통과하지 못하면 commit할 수 없도록 설정 가능
우리 팀에서는
Git hook은 .git 디렉토리 내에 저장된다. .git 디렉토리는 숨김폴더라 내부 내용을 팀원들과 공유하기가 어렵다. 따라서 우리 팀은 husky를 사용해 설정 폴더를 공유하는 방식을 택했다.
husky 설치 및 설정
husky 설치
npx husky-init && npm install설치하면 pre-commit의 샘플 파일이 생성된다.
pre-commit
파일을 수정해서 원하는 방식을 구성하면 된다.
우리 팀은 .js 파일을 자동으로 lint 검사 후 fix하도록 설정해주었다.
그 후에 commit이 된다.
warning은 상관없다. commit 가능하다.
이 과정에서 모든 js 파일을 commit 때마다 검사하는 것은 낭비라고 생각해서 lint-staged 기능을 적용하고자 했는데 잘 안됐다. 다음에 다시 시도하겠다.
prepare-commit-msg
prepare-commit-msg 파일을 생성해서 commit 메세지를 작성할 때 도움이 될 수 있도록 했다.
git commit -m 옵션으로 메세지를 날려버리면 창이 뜨지 않고 $ git commit 명령을 주면 자동으로 창이 뜨면서 커밋 메세지를 작성할 수 있다.
현재 커밋 작성 중인 브랜치와 커밋 중인 파일명을 띄워줌으로써 내가 어디 브랜치에서 작성중인지 한 번 더 확인할 수 있다.
블로그 글을 쓰면서 프로젝트를 진행해야하는데 잊어버려서(사실 과제 시간이 좀 빡빡했어서,,^^) 과제부터 휘몰아치게 해버렸더니 사진이랑 자료들이 부족했다. 앞으로는 꼬박꼬박 쓰도록..!
