使用eslint+prettier+pre-commit+lint-stage+validate-commit-msg构建流畅前端项目提交规范

背景

团队多人协同开发，为了保证代码质量，对代码制定规范化的标准是必须的，在此分享下，目前我们的项目采用的规范化手段：

一、代码校验以及提交的过程中的配置

在package.json中配置pre-commit
pre-commit钩子可以在 git commits 之前运行一段脚本，比如在commit代码之前运行eslint，校验失败则代码提交失败，校验成功则允许提交代码。
```
"pre-commit": [
        "lint-staged"
   ],
```
在package.json中配置lint-staged
lint-staged主要是为了保证，每次只对当前修改后的文件进行扫描，即进行git add加入到stage区的文件进行扫描即可，完成对增量代码进行检查。如何实现呢？这里就需要使用到lint-staged工具来识别被加入到stage区文件。
```
 "lint-staged": {
        "{src,routes}/**/*.{js,jsx,ts,tsx}": [
            "eslint",
            "prettier --write",
            "git add"
        ]
    },
```

prettier 配置文件
prettier配置可以以.prettier.js的文件放在项目中，也可以通过在package.json中配置"prettier"字段，引入配置文件。

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

eslint规范基于腾讯的 eslint-config-alloy ; eslint-config-alloy文档.

module.exports = {
    extends: ['@ctrip/eslint-config-travel'],
    env: {
        // 这里填入你的项目用到的环境
        // 它们预定义了不同环境的全局变量，比如：
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 这里填入你的项目需要的全局变量
        // false 表示这个全局变量不允许被重新赋值，比如：
        //
        // myGlobal: false
    },
    rules: {
        // 个性化配置，会覆盖默认配置
    }
};

项目中.eslintrc配置如上，extends是我们存放eslint规则的包，它依赖eslint-config-alloy，在我们的@ctrip/eslint-config-travel包基础上，我们分别扩展了在不同平台：h5, rn; 不同语言：ts，js，react下的规则。下面是我们eslint规则包的所有依赖：

	 	"@typescript-eslint/eslint-plugin": "^2.8.0",
        "@typescript-eslint/parser": "^2.8.0",
        "eslint": "^6.6.0",
        "eslint-config-alloy": "^3.2.0",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.3.0",
        "eslint-plugin-react-native": "^3.8.1"

代码提交规则

代码提交message本来是写什么都可以的，但是commit message 应该清晰明了，说明本次提交的目的。规范的commit message 有助于我们浏览提交信息，还能生成changelog。我们采用了使用最广泛的Angular 规范。

有了提交规范，但是不能保证开发人员在commit代码的同时一定是按照规范，书写commit messagede ，所有我们需要在commit前对开发人员的commit message进行校验，目前github上存在很多用于检查 Node 项目的 Commit message 的库，比如validate-commit-msg.js，也可以用node写自己的校验 Commit message 的脚本文件。

把这个脚本加入 Git 的 hook，它在你使用git提交代码的时候，会自动检查 Commit message 是否合格。
Commitizen
Commitizen是一个撰写合格 Commit message 的工具。它提供开发人员在提交代码书写commit message 的交互，以后凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。

具体使用可以参考：https://www.jianshu.com/p/d264f88d13a4。
** 生成 Change log**
如果你的所有 Commit 都符合 Angular 格式，那么发布新版本时， Change log 就可以用脚本自动生成，具体使用参考：https://www.jianshu.com/p/d264f88d13a4。

二、代码校验以及提交的执行流程

使用git add . 增加代码到暂存区
使用git commit -m 提交代码
package中注册的钩子函数pre-commit被调用，执行lint-staged；
lint-staged 取得在package.json中配置的任务，依次执行(esLint 和 prettier), 校验完成并且没有报错，重新git add , 代码就成功被提交，完成commit，否则报错，等待修改之后重新提交。

三、参考文献：

Commit message 和 Change log 编写指南
 使用git钩子对提交代码进行检查(pre-commit)
https://juejin.im/post/5c67fcaae51d457fcb4078c9
Commitizen的安装和使用（标准化Git的Commit Message）

来源：CSDN

作者：kellywong

链接：https://blog.csdn.net/kellywong/article/details/103719353

标签

eslint