Prettier ESLint 쓰는사람 주목!!

lokijoji2·2022년 8월 4일
90
post-thumbnail

프론트엔드개발자 김태완씨는 기능개발을 끝내고 신나는 마음으로 커밋을 했습니다.

할 일이 끝나서 신난 김태완씨 하지만 VSC를 확인하는 순간 김태완씨는 멘탈이 와르르 무너졌어요. 바로 코드컨벤션을 적용하지 않고 커밋을 한 것 이었죠...

그걸 깃허브에서 확인한 팀원 조경현씨는 경악을 해요.

왜 약속을 안지키신거죠 태완님? 저번에도 그러시지 않았나요?!
저 태완님이랑 협업 못하겠어요!!

태완씨는 일부로 그런 게 아닌데 혼나서 눈물이 나요. 우리 태완씨에게 도움이 되기 위해 커밋을 할때마다 자동으로 적용되게 만들 수는 없을까요?


여러분 ESLintPrettier 아시나요? 이는 강력한 도구로 코드의 일관성을 지켜주는 코드컨벤션입니다. 하지만 TypeScript도 모든타입을 any로 쓰면 쓰는이유가 없듯이 코드컨벤션도 사용을 안하면 적용을 하느니만 못합니다. 만약 지킨다고 해도 이는 실수를 통해 적용을 안하고 커밋을 하는 경우 fix: ESLint 적용과 같은 커밋을하게 될 것입니다. 하지만 이를 커밋할 때마다 라이브러리가 자동으로 작용해주면 어떨까요? 바로 GitHook을 이용하면 가능합니다.

하기 전! ESLint와 Prettier는 스스로 세팅해주세요
주의! devDependencies에 설치해주세요 -D (--save -dev) 를 붙이면 됩니다.

😥 엥 GitHook이 뭔가요?

Git은 중요한 작업이 발생할 때 사용자 지정 스크립트를 실행하는 방법이 있습니다. 우리는 이것을 Husky라는 라이브러리를 통해 구현할 것 입니다.

😮 GitHook은 알겠는데...어떻게 자동화하나요 ?

LintStaged를 이용하면 가능합니다. stage(git add로 커밋대상이 된 파일)가 된 파일에 우리가 설정해둔 명령어를 실행해주는 라이브러리입니다. 이 두 개를 세팅해주면 저희가 원하는 컨벤션 자동화를 할 수 있습니다.

😅 좋은데 너무 복잡해요

복잡하면 바로 mrm을 사용하면 됩니다. 이것은 Husky와 LintStaged를 자동으로 세팅해줍니다.

npx mrm@2 lint-staged

package.json

"lint-staged": {
  "*.js": "eslint --cache --fix",
  "*.{js,css,md}": "prettier --write"
}

package.json에 추가된 것을 확인할 수 있습니다.
여기서 타입스크립트를 사용한다면

package.json

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

다음과 같이 바꿔주면 됩니다.

테스트

간단하게 제대로 작동하는지 테스트를 해봅시다.

git add .
npx lint-staged

깃허브를 확인해볼까요?

자동으로 ESLint와 Prettier가 자동을 적용되어 커밋되었습니다 !! 아주 놀랍습니다...!

프론트엔드 개발자 김태완씨는 코드컨벤션이 적용됐는지 매번 확인해야하는 귀찮은 작업을 하지 않아도 되서 매우 기뻐요

느낀점

개인적으로 코드컨벤션을 적용했을 때 자동화는 이제 필수인 것 같습니다.
실수를 탓하지말고 실수할 수 없는 환경을 만들어주는 게 좋은 개발자아닐까요?

작성자 깃허브
수정사항은 댓글로 남겨주세요 ~!
그 외 요청사항은 lokijoji2@gmail.com으로 부탁드립니다 ~!

profile
FrontEnd 개발자

13개의 댓글

comment-user-thumbnail
2022년 8월 4일

우와 너무 유익하고 재미있어요 😊

1개의 답글
comment-user-thumbnail
2022년 8월 4일

ㅋㅋㅋㅋ 유익한 정보를 재밌게 잘 작성해주셨네요 잘 보고 갑니다

1개의 답글
comment-user-thumbnail
2022년 8월 5일

최고의 글 이네요 ^^

1개의 답글
comment-user-thumbnail
2022년 8월 8일

글을 너무 재밌게 써주셔서 이해가 너무 잘 되었어요 유익한 글 감사합니다!!!!

1개의 답글
comment-user-thumbnail
2022년 8월 9일

commitizen을 활용해 커밋 메시지 또한 일정하게 만들 수 있어요!

1개의 답글
comment-user-thumbnail
2022년 8월 10일
답글 달기
comment-user-thumbnail
2022년 8월 12일

좋은 글 잘 읽고 갑니다😁

1개의 답글