说明

进行团队项目代码规范管控时,在脚手架层制定统一的格式化规范、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.cjsprettier.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 配合 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 执行结果

79017-uuyeb2uus3d.png

示例代码

文章已经结束啦