说明

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

示例代码

文章已经结束啦