格式化工具: pretty-quick/prettier/husky

一个快速的格式化工具，项目使用
更新于: 2024-01-20 14:33:39

简介

一个可以快速格式部分代码的工具，结合 prettier 使用，项目中应用，可以直接搜索: “总结<实际项目可用>”，本文后面一段

安装

yarn add --dev prettier pretty-quick

格式化

yarn pretty-quick --staged

知识点<NPM生命周期>

  • npm install 之后自动执行
  • npm publish 之前自动执行

结合 husky 使用 - 手动

可以在提交代码的时候，自己格式化。

# 1. 安装依赖
yarn add --dev husky
# 2. 初始化 husky 配置 - 这个在项目初始化运行一次即可
npm pkg set scripts.prepare="husky install"
npm run prepare
# 3. 添加你需要的 hook
npx husky add .husky/pre-commit "yarn pretty-quick --staged"
git add .husky/pre-commit
# 4. 改变文件中的一些格式，让文件改变 - 这样就可以看到效果了
git commit -m "chore: Keep calm and commit"

结合 husky 使用 - 自动 - 推荐

# 安装
npx husky-init && yarn
# 删除
yarn remove husky && git config --unset core.hooksPath

总结<实际项目可用>

安装必须的包，并初始化 husky + pretty-quick

# 安装
npx husky-init
yarn add --dev pretty-quick prettier@2.8.8
yarn husky set .husky/pre-commit "npx pretty-quick --staged"

.husky 的 pre-commit 脚本内容，如下，重点是这一行: yarn pretty-quick --staged 需要自行修改。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn pretty-quick --staged

配置 .prettierrc

{
  "trailingComma": "none",
  "arrowParens": "always",
  "printWidth": 100,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent"
}

小坑<已经解决>

  • 这个东西，如果你是使用 git commit -m "Keep calm and commit" 带 commit 的是可以触发
  • 但如果你是 git add . && git commit -m “msg” && git push 一次提交，则无法触发
  • 2022-11-29: yarn pretty-quick --staged 这一句，可以解决这个问题。
添加 staged 之后可以解决这个问题

prettier 3.0 兼容问题

prettier 3.0 会出现如何报错

解决方案：直接安装 prettier@^2.8.0 即可

🌈 不需要放弃!!!

因为 prettier3.0 与这个不兼容，所以，暂时需要放弃这个。

pretty-quick will break with prettier v3 #164 这个什么时候修复，就可以继续使用。

2024-01-20: 可以继续使用了，新版本的已经修复这个BUG了 

参考