解决方案

.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.

文章信息

• 文章标题：在prettier3项目中替代pretty-quick - Keystion
• 文章链接：https://webclown.net/posts/在prettier3项目中替代pretty-quick.html
• 版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。
• 转载请注明来自 Keystion ！

[在prettier3项目中替代pretty-quick - Keystion](https://webclown.net/posts/在prettier3项目中替代pretty-quick.html)