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

目前已集成为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 eslint babel-eslint vue-eslint-parser eslint-plugin-vue -D

安装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 husky -D

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

"scripts": {
    "prepare": "husky install",
  }

执行初始化

npm run prepare

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

npx husky add .husky/pre-commit "npm test"

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工具就很好。