前端项目代码提交规范化实践

commitizen规范提交信

1
2
// 全局安装commitizen
yarn global add commitizen
1
2
// 初始化
commitizen init cz-conventional-changelog --save --save-exact

执行后在package.json下会生成以下配置

1
2
3
4
5
6
7
8
{
	...
	"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
}

另外还可以安装中文包

1
yarn add cz-conventional-changelog-zh -D

并修改配置,可自定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
"config": {
    "commitizen": {
       "path": "./node_modules/cz-conventional-changelog-zh",
      "defaultType":"[新增功能]",
	   "types": {
	    "[新增功能]": {
          "description": "新增功能点、新增需求",
          "title": "Features"
        },
        "[Bug修复]": {
          "description": "修复Bug,线上，测试，验收阶段的bug",
          "title": "Bug Fixes"
        },
        "[文档修改]": {
          "description": "文档增删改",
          "title": "Documentation"
        },
        "[样式修改]": {
          "description": "样式修改(空白、格式、缺少分号等)",
          "title": "Styles"
        },
        "[代码重构]": {
          "description": "既不修复bug也不添加新功能的更改",
          "title": "Code Refactoring"
        },
        "[性能优化]": {
          "description": "性能优化",
          "title": "Performance Improvements"
        },
        "[测试代码]": {
          "description": "增加测试",
          "title": "Tests"
        },
        "[编译代码]": {
          "description": "影响构建系统或外部依赖项的更改(示例范围:gulp、broccoli、npm)",
          "title": "Builds"
        },
        "[持续集成]": {
          "description": "对CI配置文件和脚本的更改(示例范围:Travis, Circle, BrowserStack, SauceLabs)",
          "title": "Continuous Integrations"
        },
        "[其他提交]": {
          "description": "除src目录或测试文件以外的修改",
          "title": "Chores"
        },
        "[回退更改]": {
          "description": "回退历史版本",
          "title": "Reverts"
        },
        "[修改冲突]": {
          "description": "修改冲突",
          "title": "Conflict"
        },
        "[字体修改]": {
          "description": "字体文件更新",
          "title": "Fonts"
        },
        "[删除文件]": {
          "description": "删除文件",
          "title": "Delete Files"
        },
        "[暂存文件]": {
          "description": "暂存文件",
          "title": "Stash Files"
        }
      }
    }
  }

为了方便提交，添加package.json中scripts的配置：

1
2
3
4
5
6
{
	"scripts": {
    ...
		"commit": "git add -A && git cz && git push",
	}
}

standard-version自动化版本控制

1
2
// 安装
yarn add standard-version -D

添加scripts配置

1
2
3
4
5
6
{
  "scripts": {
    ...
    "standard": "standard-version"
  }
}

编写自定义脚本，进行版本号升级控制:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//  scripts/version.js
/* eslint-disable */
const exec = require('child_process').exec
const inquirer = require('inquirer')

const states = {
  major: '版本升级（新功能不兼容旧版本时）',
  minor: '特性更新（添加新功能或功能增强时）',
  patch: '修复补丁（修复常规错误时）',
  skip: '跳过（谨慎！请仅在未完成时选择此项）'
}

inquirer.prompt([
  {
    type: 'list',
    name: 'version',
    message: '请选择您要升级的版本号类型:',
    choices: Object.keys(states).map(k => `${k}: ${states[k]}`)
  }
]).then(({ version }) => {
  const type = version.split(':')[0]
  if (type !== 'skip') {
    exec(`npm run standard -- --release-as ${type}`)
    console.log('正在更新版本号.....')
  }
}).catch((err) => {
  console.error(err)
  process.exit(1)
})

修改package.json 的scripts 中的commit配置并添加update:version命令：

1
2
3
4
5
6
7
{
	"scripts": {
    ...
		"commit": "git add -A && git cz && npm run update:version && git push",
    "update:version": "node ./scripts/version.js"
	}
}

在运行commitizen提交后，将会执行脚本文件version.js进行版本更新，若不选择skip，则运行standard命令，会在根目录下生成CHANGELOG.md（版本更新日志文件）。

集成Husky和lint-staged

  • Husky可以在 git 提交代码的前后，执行一系列的 git hooks，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和 git 提交出现在项目中。

  • lint-staged 是一个专门用于在通过 git 提交代码之前，对暂存区的代码执行一系列的格式化。当 lint-staged 配合 git hooks 使用时，可以在 git 提交前的 hook 中加入 lint-staged 命令，这样就能在提交代码之前，对即将提交的代码进行格式化，成功之后就会提交代码。

1
2
3
4
5
6
7
// 安装
yarn add husky -D

yarn add lint-staged -D

// 同时集成
npx mrm@2 lint-staged

执行命令后，你就会看到你的 package.json 里多了一个 lint-staged 配置项，且根目录下多了一个 .husky 目录，里面就包含了 pre-commit 文件，里面包含了一个最基础的命令：npx lint-staged。

我们可以修改lint-staged的配置项已达到我们校验代码的目的，比如eslint、stylelint等等

1
2
3
4
5
6
7
8
9
{
	...
 "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint --cache --fix",
      "vue-cli-service lint"
    ]
  }
}

可创建其他钩子git hooks，并在文件里面编写shell脚本

1
2
// 新增其他hook
npx husky add [fileName]