基于 husky + prettier + pretty-quick 进行 git commit 自动格式化代码
说明
进行团队项目代码规范管控时,在脚手架层制定统一的格式化规范、lint 以及 git commit 自动脚本等是非常有效的手段,虽然不能 100% 解决问题(上述方式都是可以有办法跳过),但在大家达成一致共识时,将起到很大的作用。
任何标准或者规范都是约定为先,有一致的思想共识才能促进生产效率。
下面是我常用的工具:
prettier
是我目前仅用的代码格式化工具,除了有灵活的配置选项外,vs code 插件的支持也非常友好。
husky
则是社区常用的 git hook 工具,能够在 git 进行一些动作(如 commit/push)时自动执行一些 node script
pretty-quick
或者 lint-staged
则是常见的两种格式化辅助工具。
eslint
不多说,代码规范校验(规范强制校验,与 prettier 有相似能力,但是比 prettier 更加强大和细致,能够探测代码冗余、逻辑错误探测等)
prettier:https://prettier.io/
在线可视规则配置
prettier 配合插件(同名)使用非常方便,规则的配置可以通过其提供的 playground 工具 进行可视化的配置以及效果预览。
下面是我常用的配置:具体的含义可以在 playground 中查看
{
"arrowParens": "avoid",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": true,
"jsxSingleQuote": false,
"printWidth": 100,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true,
"vueIndentScriptAndStyle": false
}
prettier 支持多种配置方式:通常 JSON 的配置方式就可以满足我们的诉求,如果有更加复杂的配置需求,可以基于 JS 文件去配置
- 直接在
package.json
中配置prettier
属性 - 项目目录
.prettierrc
文件,支持 JSON 和 YAML 两种格式 .prettierrc.json
、.prettierrc.yml
.prettierrc.yaml
或者.prettierrc.json5
文件..prettierrc.js
、.prettierrc.cjs
、prettier.config.js
或者prettier.config.cjs
,通过 commonJS 规范module.exports
导出一个 object.prettierrc.toml
文件
遇到的问题记录
1、Prettier 可以格式化 JS 文件,CSS 文件不生效
结论:
- 通常,不会出现 js 可以格式,但是 css 不生效的问题,如果出现这个问题并且重装 prettier 之后也不生效可以尝试下面的操作
- 如果是因为规则改动(比如修改
.prettier
文件)引起的,建议将规则恢复到 default,然后重新配置
这个问题比较恶心,翻了很多 github 和 stackoverflow 的提问,发现没有人遇到过这种问题,最后重新配置了一遍 prettierrc 之后生效
pretty-quick: https://www.npmjs.com/package/pretty-quick
prettier pre-commit
prettier
只是保证了在通过编辑器(vs code)进行格式化代码的时候,格式化成需要的格式(当然可以通过配置 onSave 在代码保存时自动格式化),但是无法保证所有人都会主动进行。
因此进行自动格式化显得非常重要,而自动格式化的是时机选择 pre-commit
最恰当,通过 git hook ,能够在 commit 之前格式化好代码(如果已经 commit,会将暂存转为提交,生成提交记录,需要回滚才会撤销)
prettier
支持多种 pre-commit
Hook 脚本:https://prettier.io/docs/en/precommit.html
lint-staged
:https://github.com/okonet/lint-stagedpretty-quick
:https://github.com/azz/pretty-quickpre-commit
:https://github.com/pre-commit/pre-commitgit-format-staged
:https://github.com/hallettj/git-format-staged
大型项目建议使用 lint-staged
配合 eslint 等非常好用
因为这篇文章只涉及代码格式化,因此使用的是 pretty-quick
。
使用 pretty-quick
安装
yarn add --dev prettier pretty-quick
通过 cli 使用
pretty-quick --staged
一般常用的选项是 --staged
, --staged
是转为 git 服务的。
通过这个选项, pretty-quick
会只格式化 git add .
暂存之后的文件,并且会在格式化完成后,再次进行 git add .
,将格式化的文件再次暂存。
执行结果:
$ yarn pretty-quick --staged
yarn run v1.22.10
$ xxxxxxxxxxxxxxxxxxxxxxxx\s\.bin\pretty-quick --staged
Finding changed files since git revision 5e35680.
Found 4 changed files.
Fixing up .prettierrc.
Fixing up package.json.
Everything is awesome!
Done in 1.91s.
husky: https://typicode.github.io/husky/
husky
是社区常用的 git hook 工具,通过简单的配置就能够极大增强 commits 能力
安装 husky
yarn add husky@next --dev
yarn add pinst --dev # if your package is not private
如果你的 package 是需要公开的,发布到 npmjs.com
上,需要安装 pinst
,关于 pinst
的配置具体看文档
package.json
:
// package.json
{
"private": false,
"scripts": {
"postinstall": "husky install",
"prepublishOnly": "pinst --disable",
"postpublish": "pinst --enable"
}
}
手动启用 git hook
yarn husky install
安装 package 之后自动启用 hook
如果期望在 package 安装完之后,自动启用 git hook,可以如下配置:
// package.json
{
"private": true,
"scripts": {
"postinstall": "husky install"
}
}
配置 hook 在 pre-commit 自动格式化代码
.huskyrc.json
可以在 package.json
配置 husky
属性或者单独配置一个 huskyrc.json
配置相关的 hooks
// .huskyrc.json (v4)
{
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
git commit 执行结果
示例代码
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/husky-prettier-pretty-quick-git-ci-auto-pretty.html
转载请注明文章原始出处 !