解决方案

.husky/pre-commit 中添加以下内容

# 获取暂存区的文件列表
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# 美化所有暂存区的文件
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write

# 将修改/美化的文件添加回暂存
echo "$FILES" | xargs git add

背景

在 prettier v3.x 版本的项目中，使用 pretty-quick 会报错：

.../isSupportedExtension.js:12
  ..._prettier.resolveConfig.sync(file, {
                             ^
TypeError: _prettier.resolveConfig.sync is not a function

可以降低 prettier 版本到 2.x 来解决这个问题，但是项目里面额外使用了 tailwindcss，而 tailwindcss 依赖的 postcss 依赖的 prettier 版本是 3.x，所以降低 prettier 版本不是一个好的解决方案。

参考

1. Pre-commit Hook · Prettier
2. pretty-quick will break with prettier v3 · Issue #164 · azz/pretty-quick
3. Editor Setup – Tailwind CSS
4. tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.