사전 커밋 후크에서 Prettier 자동화

Prettier은 훌륭한 도구입니다. 그것은 많은 편집기에서 작동하고 많은 언어를 지원합니다.

그러나 독단적인 코드 포맷터는 그의 최고의 기능이자 그것을 사용하는 첫 번째 이유입니다.

새 팀으로 시작할 때 첫 번째 어려움은 프로젝트의 스타일 가이드를 정의하는 것입니다. 언어가 허용적일수록 토론은 더 어려워집니다.

Prettier를 사용하면 대부분의 결정이 내려지기 때문에 토론이 종료됩니다. 그는 옵션이 거의 없으므로 구성하기 쉽습니다. .prettierrc.json 라는 json 파일만 있으면 됩니다.

예를 들면 다음과 같습니다.

{
  "useTabs": false,
  "printWidth": 90,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxBracketSameLine": false
}

Visual Studio Code를 사용하는 경우 Prettier extension을 추가하고 저장 시 형식 지정 기능을 활성화합니다. 파일을 저장할 때마다 Prettier가 실행되어 자동으로 포맷됩니다. 편리합니다.

사전 커밋 또는 사후 커밋이 무엇인지 모르는 경우 git을 사용하여 커밋 워크플로 중에 실행되는 스크립트입니다.

필요한 것은 이와 같은 사전 커밋 파일을 정의하는 것입니다.

#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.ts" "*.tsx" "*.scss" | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --write

# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add

exit 0

이 파일은 SCSS를 사용하는 TypeScript 프로젝트용이므로 자신에게 맞게 파일 확장자를 업데이트할 수 있습니다.

Prettier를 실행하고 스테이징에 업데이트된 파일을 추가합니다.

그리고 인덱스를 업데이트하기 위한 포스트 커밋입니다.

#!/bin/sh

git update-index -g

프로젝트의 루트에 .githooks 폴더를 만들고 위의 내용과 함께 pre-commit 및 post-commit 파일을 넣습니다.

입력할 마지막 명령은 git에게 후크 폴더를 알려주고 실행 가능하게 만드는 것입니다. 터미널에서 실행하십시오.

git config core.hooksPath .githooks
chmod +x .githooks/*

이 게시물은 짧지만 Prettier로 작업하는 데 필요한 모든 것입니다.

Husky 과 같이 후크를 만드는 다른 도구가 있습니다.

날 따라와