前端代码提交规范

前言

前端工程化是一个很宽泛的概念，大致上可以分为四个方面，也就是：模块化、组件化、规范化和自动化。这里不对其他概念进行展开，只大概阐述一下规范化的概念，看完这篇文章如果大家对这些工程化的概念感兴趣可以点赞留言，大家一起讨论，后续我也会更新相应的文章。

规范化

规范化是个很有意义的东西，始皇帝和扫六合统一华夏后制定了书同文、车同轨、统一度量衡的国策方才有了日后合久必分，分久必合的政治基础，否则就像曹操讲的设使国家无有孤,不知当几人称帝,几人称王。梦回秦汉之后回到我们的工作中来，规范化有哪些意义呢？

• 规范的代码可以促进团队合作
• 规范的代码可以降低维护成本
• 规范的代码有助于 code review（长得都不一样，我还怎么review）
• 养成代码规范的习惯，有助于程序员自身的成长

那么规范化又可以在哪些地方体现呢？

• 代码格式规范，如引入eslint和prettier等。
• 统一项目结构，在大多数情况下使用相同的项目目录结构，否则不知几人称帝几人称王咯。
• 制定前后端联调沟通的规范，比如我们现在常用的后端生成ts模型给到前端，这一点已经是极大的提升了前端开发的工作效率，当然这一点并没有明显地提升后端开发人员的工作效率，所以有些后端开发人员还不了解或者不愿意了解这个生成ts模型的插件。
• 文件命名规范，这一点不用多说，你是AaaBbb，我是aaaBbb，他是aaa-bbb，这还怎么玩。
• 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
• git flow 工作流：分支命名规范、代码合并规范，代码提交规范等。
• …等等

代码提交规范

回到这篇文章的主题，我们的代码提交应该是一个怎样的规范呢？（由于我们已经有eslint规范，故以下内容皆是建立在有代码格式规范的前提下）这里我们参考了Angluar commit message规范指定了我们的提交类型。

    { type: 'feat', section: '✨ Features | 新功能' },
    { type: 'fix', section: '🐛 Bug Fixes | Bug 修复' },
    { type: 'init', section: '🎉 Init | 初始化' },
    { type: 'docs', section: '✏️ Documentation | 文档' },
    { type: 'style', section: '💄 Styles | 风格' },
    { type: 'refactor', section: '♻️ Code Refactoring | 代码重构' },
    { type: 'perf', section: '⚡ Performance Improvements | 性能优化' },
    { type: 'test', section: '✅ Tests | 测试' },
    { type: 'revert', section: '⏪ Revert | 回退' },
    { type: 'build', section: '📦‍ Build System | 打包构建' },
    { type: 'chore', section: '🚀 Chore | 构建/工程依赖/工具' },
    { type: 'ci', section: '👷 Continuous Integration | CI 配置' }

在之前我们是没有强制要求按照下面这样提交的

feat: 任务单号

我写了一个bug，大家都不要发现啊啊啊啊

所以很多人会这样提交

我写了个牛皮的功能

这样我们后面定位代码问题就相当棘手，所以我们引入了一些工具来帮助我们做这个规范的校验。下面介绍一些各个插件的配置：

安装lint-staged

yarn add lint-staged -D

安装完成之后在package.json内新增配置

 {
 ...
  "lint-staged": {
    "*.{js,ts,vue}": "vue-cli-service lint"
  },
  ...
}

安装husky

yarn add husky -D

安装完成之后执行

npx husky install

执行完毕之后会自动生成一个.husky的文件夹，我们在.husky文件夹中新建两个文件：commit-msg和pre-commit分别用于校验提交信息和commit前代码的校验。
commit-msg

#!/bin/sh
    . “$(dirname “$0”)/_/husky.sh”

npx commitlint --edit $1

pre-commit

#!/bin/sh
    . “$(dirname “$0”)/_/husky.sh”

npx lint-staged --allow-empty $1

安装commitlint

yarn add @commitlint/cli @commitlint/config-conventional -D

安装完成之后在项目根目录新建一个 .commitlintrc.js 或 commitlint.config.js。commitlint会找到这个文件，按文件中指定的 extends 去校验 commit 信息。这里也可以自己设置一些规则，不做展开。

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}

安装commitizen

commitizen会提供 git cz 命令替代我们的 git commit命令，帮助我们更加方便生成符合规范的 commit message

yarn add commitizen cz-conventional-changelog -D

安装完成之后我们调整一下package.json

"scripts": {
  "commit": "cz"
}
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

这时候我们执行

yarn commit

就会出现以下界面

PS E:\FE\uniapp\soa> yarn commit
    yarn run v1.22.17
    $ cz
    cz-cli@4.2.4, cz-conventional-changelog@3.2.0

? Select the type of change that you’re committing: 
      build:    Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) 
      ci:       Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) 
    > chore:    Other changes that don’t modify src or test files 
      revert:   Reverts a previous commit 
      feat:     A new feature 
      fix:      A bug fix 
      docs:     Documentation only changes

这时候就已经有了相应的提交类型供我们选择，但是这好像跟我们常见的开源项目的提交有点不一样，对，这个里面没有表情！找了下原因是cz-conventional-changelog没有支持表情。所以我们找到了这个git-cz
安装git-cz

yarn add git-cz -D

完成之后我们调整一下package.json

"scripts": {
  "commit": "git-cz"
}
"config": {
  "commitizen": {
    "path": "git-cz"
  }
}

配置完成之后我们将一个文件执行git add之后，执行

yarn commit

就会出现如下界面

? Select the type of change that you’re committing: (Use arrow keys or type to search)
    > 💍  test:       Adding missing tests
      🎸  feat:       A new feature
      🐛  fix:        A bug fix
      🤖  chore:      Build process or auxiliary tool changes
      ✏️  docs:       Documentation only changes
      💡  refactor:   A code change that neither fixes a bug or adds a feature
      💄  style:      Markup, white-space, formatting, missing semi-colons…

至此我们已经大功告成了一半，Angluar commit message提交规范可能不太符合我们的要求，怎么办？git-cz也开放了一定的参数可供配置，故我们可以在根目录下创建changelog.config.js文件

// changelog.config.js
module.exports = {
  disableEmoji: false,
  list: ['test', 'feat', 'fix', 'chore', 'docs', 'refactor', 'style', 'ci', 'perf', 'release', 'revert', 'build'],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: ['type', 'scope', 'subject', 'body', 'breaking', 'issues', 'lerna'],
  scopes: [],
  types: {
    chore: {
      description: 'Chore | 构建/工程依赖/工具',
      emoji: '🚀', // 当前类型的commit所显示的表情
      value: 'chore'
    },
    ci: {
      description: 'Continuous Integration | CI 配置',
      emoji: '👷',
      value: 'ci'
    },
    docs: {
      description: 'Documentation | 文档',
      emoji: '✏️ ',
      value: 'docs'
    },
    feat: {
      description: 'Features | 新功能',
      emoji: '✨',
      value: 'feat'
    },
    fix: {
      description: 'Bug Fixes | Bug 修复',
      emoji: '🐛',
      value: 'fix'
    },
    perf: {
      description: 'Performance Improvements | 性能优化',
      emoji: '⚡',
      value: 'perf'
    },
    refactor: {
      description: 'Code Refactoring | 代码重构',
      emoji: '♻️ ',
      value: 'refactor'
    },
    release: {
      description: 'Create a release commit | 发版提交',
      emoji: '🏹',
      value: 'release'
    },
    style: {
      description: 'Styles | 风格',
      emoji: '💄',
      value: 'style'
    },
    revert: {
      description: 'Revert | 回退',
      emoji: '⏪',
      value: 'revert'
    },
    build: {
      description: 'Build System | 打包构建',
      emoji: '📦',
      value: 'build'
    },
    test: {
      description: 'Tests | 测试',
      emoji: '✅',
      value: 'test'
    }
  }
}

自动生成CHANGELOG

CHANGELOG会记录所有的commit信息并归类版本，可以快速跳转到该条commit记录，它能让你方便知道项目里哪个版本做了哪些功能有哪些bug等信息。也方便排查bug，对于提交记录一目了然，不用一个一个去翻去查。
我们使用standard-version来实现自动生成CHANGELOG

yarn add standard-version -D

package.json增加命令

{
  "scripts": {
    "release": "standard-version"
  }
}

当执行以下命令时会自动生成CHANGELOG

yarn release

当然standard-version 提供自定义配置不同类型对应显示文案，在根目录新建 .versionrc 文件

// .versionrc
{
  "header": "# 更新日志 \n\n",
  "types": [{
      "type": "feat",
      "section": "✨ Features | 新功能",
      "hidden": false
    },
    {
      "type": "fix",
      "section": "🐛 Bug Fixes | Bug 修复",
      "hidden": false
    },
    {
      "type": "init",
      "section": "🎉 Init | 初始化",
      "hidden": true
    },
    {
      "type": "docs",
      "section": "✏️ Documentation | 文档",
      "hidden": false
    },
    {
      "type": "style",
      "section": "💄 Styles | 风格",
      "hidden": true
    },
    {
      "type": "refactor",
      "section": "♻️ Code Refactoring | 代码重构",
      "hidden": true
    },
    {
      "type": "perf",
      "section": "⚡ Performance Improvements | 性能优化",
      "hidden": true
    },
    {
      "type": "test",
      "section": "✅ Tests | 测试",
      "hidden": true
    },
    {
      "type": "revert",
      "section": "⏪ Revert | 回退",
      "hidden": true
    },
    {
      "type": "build",
      "section": "📦‍ Build System | 打包构建",
      "hidden": true
    },
    {
      "type": "chore",
      "section": "🚀 Chore | 构建/工程依赖/工具",
      "hidden": true
    },
    {
      "type": "ci",
      "section": "👷 Continuous Integration | CI 配置",
      "hidden": true
    }
  ]
}

至此我们就完成了对项目的代码提交规范的配置，代码格式和提交规范一勺烩了，拒绝不规范代码进入git仓库。

相关文章

基于vue3+ts的uni-app组件库，快来了解下 - 掘金 (juejin.cn)

基于vue3的uni-app路由库助你实现跳转、传参、拦截等路由功能 - 掘金 (juejin.cn)

支持多平台小程序的uni-app持续集成工具 - 掘金 (juejin.cn)