[React Native] Pre-commit에 Prettier, Eslint 추가

 

• devDependencies에 husky, prettier Node.js 모듈 추가

npx npm install husky eslint prettier lint-staged --save-dev

package.json에 추가된 dependencies

 

• husky 초기 세팅
  • husky init을 통해 초기 세팅을 해주면, 알아서 .git에 hook 관련된 파일을 넣어줍니다. [Docs에 나온 방식]
  • 그러나 저희 프로젝트는 .git이 npm modules와 다른 위치에 있기 때문에 그냥 husky init을 할 경우, .git을 못찾는 에러가 발생하게 됩니다.

 

첫 번째 시도 ( Fail )

• https://stackoverflow.com/questions/74129312/how-to-configure-husky-when-git-is-in-a-different-folder

만약 npm modules와 같은 위치에 .git이 있다면,  "prepare": "husky install"을 추가해주면 됩니다.

 

cd ../../ && husky install

npx husky-init && npx npm install

 

안되네요.

 

공식 문서에서도 위와 같은 방법으로 하면 될거라고 했는데 되지 않습니다...

 

 

2 번째 시도 - 성공

https://github.com/typicode/husky-init?tab=readme-ov-file

 

공식 깃 레포에서 소개된 방식인  auto-husky로 진행해보겠습니다.

 

• 앞에서 했던 Dev dependencies에 모듈 추가를 다시 해줍니다. ( auto-husky도 넣어서 )

npx npm install husky eslint prettier lint-staged auto-husky --save-dev

• package.json 의 scripts 에 prepare 추가

"prepare:old": "cd ../.. && auto-husky -d frontend/front"

 

이후 npm install 진행해줍니다.

 

의도한대로, node_modules와 같은 위치에 .husky가 설치되었습니다.

 

.git > config

.git 의 config 파일에서 core를 보면 hooksPath에 .husky 경로가 추가된 것을 확인할 수 있습니다.

비로소 github이 .husky 안의 pre-commit을 확인할 준비가 되었다는 뜻 입니다.

 

 

• package.json에 적용할 pre-commit 추가
  • .husky 안의 pre-commit 을 수정해도 되지만
    (예를 들어 https://prettier.io/docs/en/precommit.html 5번 shell script 방식)
  • lint-staged를 통해서도 쉽게 적용할 수 있습니다.
    • js, jsx, ts, tsx 확장자에 대하여, eslint를 통해 에러를 체크하고, prettier를 통해 자동 포맷팅 되도록 하였습니다.

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npx eslint",
      "prettier --write"
    ]
  },

 

 

 

• .husky > pre-commit 수정

기존 코드는 아래와 같습니다.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

 

하지만 npm test를 하면 root 위치에서 package.json을 찾게 되므로 아래와 같이 코드를 수정해주었습니다.

 

root 위치에서 package.json을 찾아서 에러가 났습니다..

 

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd frontend/front && echo 'front check..' && npx lint-staged

 

 

• eslint config 파일 생성

npm init @eslint/config

 

config가 안보인다는 에러

 

대화형으로 몇 가지를 물어보고 config가 만들어집니다.

 

 

 

드디어 잘 적용 됩니다.

 

 

 

 

 

참고

https://one-armed-boy.tistory.com/entry/Husky-Lint-staged%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Pre-commit-Hook-%EA%B5%AC%ED%98%84

Husky, Lint-staged를 이용한 Pre-commit Hook 구현

 

https://velog.io/@nonz/husky-%EC%99%80-prettier-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-pre-commit-%EC%9E%90%EB%8F%99-%ED%8F%AC%EB%A7%A4%ED%8C%85

husky 와 prettier 를 사용한 pre-commit 자동 포매팅