年前的最后一个礼拜，由于所负责项目的暂停版本排期，于是乎有几天的空闲的时间，就想着把项目的代码质量搞上去。背景是，半年前我开始负责这个项目的前端开发，发现当时代码质量不理想。加之团队内部也着手把代码规范这件事落实下来。于是乎，就有了这个系列的文章。

我打算从三个方面对代码规范需要做的事情进行总结，后续有新的想法会继续更新。

  1. 代码质量-1 使用自动化工具提高代码质量
  2. 代码质量-2 制订代码规范
  3. 代码质量-3 code review

制订代码规范

技术栈:

  • Vue 2.6.10
  • Vue-Router 3.0.6
  • Vuex 3.1.0·
  • @vue/cli-service 4.4.4
  • webpack 4.0.0

本文主要介绍，如何使用 commitlint 在开发过程中规范提交

1. CommitLint

commitlint是一个可校验提交信息的工具

1.1. 安装 commitlint

1
2
# 会自动安装 @commitlint/cli 和 @commitlint/config-conventional 两个依赖
npm install --save-dev @commitlint/{config-conventional,cli}

1.2. 生成配置文件

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

生成一个如下的配置文件，默认使用 @commitlint/config-conventional 规范

1
2
3
4
// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
};

1.3. 添加到 husky 的 commit-msg hook 中

1
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

运行完毕，会在 .husky/ 目录下生成一个 commit-msg 文件，内容如下

1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit "$1"

配置完毕，现在可以体验 commitlint 带来的良好体验了