프로젝트에 Prettier 코드 포맷터를 추가하는 방법은 무엇입니까?

Prettier를 사용하여 코드를 더 읽기 쉽고 스타일 가이드와 일관성 있게 만들 수 있습니다. Prettier를 자동으로 시작하는 방법에는 여러 가지가 있으며 Git을 사용할 때 가장 많이 사용되는 방법입니다.

1. 꽤 빠르다

라이브러리를 매우 빠르게 사용하여 변경되거나 준비된 파일의 형식을 지정하십시오.

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

2. 쉘 스크립트

이 스크립트를 .git/hooks/pre-commit로 저장하고 실행 권한을 부여하십시오.

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

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

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

exit 0

커밋 후에도 prettified 파일이 여전히 수정되었다고 git이 보고하는 경우 post-commit script to update git’s index 을 추가해야 할 수 있습니다.
.git/hooks/post-commit에 다음과 같은 내용을 추가합니다.

#!/bin/sh
git update-index -g

규칙 구성

더 예쁜 규칙을 구성하려면 프로젝트의 루트에 *.prettierrc 파일을 만듭니다.

다음은 몇 가지 인기 있는 규칙이 포함된 예제 파일입니다.

{
  "semi": true",
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
  "arrowParens": "always",
  "tabWidth": 2
}

포맷하지 않으려는 모든 항목에 대해 .prettierignore 파일을 만듭니다.

node_modules/
package.json

수동 실행 및 수정

CLI를 통해 수동으로 실행하려면 package.json에 명령을 추가하고 npm run format를 실행합니다.

{
 "scripts": {
  "format": "prettier --write ."
 }
}