前端团队规范探索：自动格式化代码校验提交规范

Posted 2022-09-26

目前已集成为vue-cli-plugin，可以直接使用自动化配置，无需手动配置。

--以下正文--

以往在使用eslint对代码进行规范的时候，经常遇到校验与自动化格式化规则不同的问题，比如eslint中规定末尾必须使用分号，那么你开发工具中代码美化插件也需要配置相应的格式化规则，这是比较麻烦的，所以standard规范太霸道了，大家开发基本都不会去用。

这里我们使用别的团队封装好的车轮，他们去掉了eslint中的代码风格的校验，只专注于代码逻辑的校验，而代码美化部分则交给了prettier来做，这样就避免了上述冲突。

首先安装

yarn add eslint-config-alloy -D

vue2:

yarn add eslint-config-alloy@3 -D

安装eslint校验以及vue工具:

yarn add

安装typescript支持:

yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

根目录创建：​​.eslintrc.js​​

module.exports = 
  extends: [alloy, alloy/vue, alloy/typescript],
  env: 
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  ,
  globals: 
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  ,
  rules: 
    // 自定义你的规则，这里我把以前tslint的规则直接搬过来了，还没排查未生效项
    no-empty: false,
    only-arrow-functions: [false, allow-declarations, allow-named-functions],
    quotemark: [false, single],
    indent: [true, spaces, 2],
    interface-name: false,
    ordered-imports: false,
    object-literal-sort-keys: false,
    no-consecutive-blank-lines: false,
    semicolon: false,
    max-line-length: false,
    prefer-for-of: false,
    trailing-comma: false,
    arrow-parens: false,
    no-console: false,
  ,

根目录创建 .vscode/settings.json （这是为项目配置保存自动格式化）

    "files.eol": "\\n",
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
    "editor.codeActionsOnSave": 
      "source.fixAll.eslint": true
    
  

根目录创建 .prettierrc.js

// .prettierrc.js 代码美化规则配置
module.exports = 
  // 一行最多 n 字符
  printWidth: 1000,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: as-needed,
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: all,
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: always,
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: preserve,
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: css,
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: lf,
  // 格式化嵌入的内容
  embeddedLanguageFormatting: auto,

以上方式配置只在项目中生效，编辑器为vscode，与个人配置(user->settings.json)不冲突，如果你是用vetur对vue代码进行格式化，可以额外配置自己的风格，本人经常使用如下配置：

"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": 
    "js-beautify-html": 
      "wrap_attributes": "auto"
    
  

这是单独为vue中的html配置的attributes规则，因为我不想标签每个属性都换行，而prettier则对此无能为力。

husky 一个git钩子插件

husky经常配合lint-staged一起使用，在git提交的钩子中用lint-staged做一些操作，例如让你提交前运行vue自带的代码格式化工具：vue-cli-service lint，或者运行prettier --write，它的作用是可以配置一些规则，且只对本次提交的各种文件进行检查而不是整个项目。

但是我们已经做到了自动保存格式化，这种方式明显是多余的，所以我们现在只需要一个husky，来对commit提交做些规范工作。

安装

yarn add

新版使用方法： package.json中添加脚本

"scripts": 
    "prepare": "husky install",
  

执行初始化

npm run prepare

会在根目录生成一个目录，使用命令往git钩子中添加要执行的命令：

npx husky add .husky/pre-commit

git commit时对应的生命周期会触发对应的命令。

如果你想使用旧版的配置，需要指定版本安装：

yarn add husky@3.0.9 -D

package.json配置

"husky": 
    "hooks": 
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
      "pre-commit": "xxx" // pre-commit，提交前的钩子
    
  ,

Commitize 统一代码提交信息

安装：

yarn add commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional -D

package.json添加如下配置

"config": 
    "commitizen": 
      "path": "node_modules/cz-conventional-changelog"
    
  ,
   "commitlint": 
    "extends": [
      "@commitlint/config-conventional"
    ]
  ,

在根目录创建 commitlint.config.js 配置我们的commit规则

/**
 * feat 新功能
 * fix 修补bug
 * docs 文档修改
 * style 样式修改
 * build 代码编译
 * refactor 代码重构
 * code 代码优化
 * test 测试用例
 */
module.exports = 
  extends: [@commitlint/config-conventional],
  rules: 
    type-enum: [2, always, [feat, fix, docs, style, build, refactor, test, code]],
  ,

附录：config-conventional

最终不符合规范的git commit将会被拦截。

package.json添加

"scripts": 
    "c": "git add . && git-cz"
  

提交代码使用 ​​yarn c​​​ 或 ​​npm run c​​，即可使用命令行工具以Angular规范(社区使用最广泛的规范)进行代码提交。

终端工具选择：

mac：无所谓 ，自带终端就很强大。

windows：我遇到过还有在使用CMD的同事，曾经也用过一段时间装git附赠的gitBash工具，这些都不太好用，建议使用vsCode自带的Terminal工具就很好。