团队化规范commit message 和代码格式

凌辰亦梦
402 阅读6分钟

团队化规范commit message 和代码格式

规范化管理代码的优点

在项目规范化开发过程中，我们期望所有人提交的代码都是符合代码规范的，同时提交信息也要清晰和统一，有利于团队的协作和后期的维护。

我们用husky配合Git hooks 进行commit message校验和代码格式化校验。

commit message 的规则

我们用ESLint格式化工具来校验代码问题；同时我们也需要用比较严格的流程来保证提交到远程仓库的代码一定是经过ESLint检查并修复的。

为什么要用husky

我们需要使用Git hooks，来保证代码提交前都经过hooks的校验，不符合规则的都会被hooks拦截提交动作。

为了达成目的，我们需要使用husky来进行git hooks规则的配置。

如何使用husky

安装husky

  1. 安装husky到前端项目
npm install husky -D
  1. 启用Git hooks
npx husky install

在执行命令后，项目根目录中会出现一个**.husky** 文件夹，实际上与自定义的.githooks文件是一样的。

  1. 为了保证husky功能的正常运行，我们需要将其加到package.json的scripts中
npm set-script prepare "husky install"

执行该命令后，我们会得到如下配置，prepare脚本会在执行npm install后会制动执行husky install命令，并指定该目录为Git hooks所在的目录。

💡 注：这个命令需要npm版本>7.0，且不支持yarn2+，具体yarn2+的可以通过官网文档查看 
{
	"scripts": {
		"prepare": "husky install"
	}
}

配置commit message 的hooks

安装commitizen

commitizen，是一个工具，我们可以使用它指定一个提交规则的标准方式，并用它提供的cli进行沟通，目的是为了让commit更加易读，并且强制书写commit的描述信息；同时我们可以使用扩展插件，自定义commit message 的模板。

  1. 安装commitizen和cz-customizable
npm install -g commitizen

npm install cz-customizable -D
  1. package.json文件增加以下内容
{
	//....其他配置
	"config": {
	    "commitizen": {
	      "path": "node_modules/cz-customizable"
	    }
	  },
}
  1. 创建.cz-config.js自定义提示文件
module.exports = {
  // 可选类型
  types:[
    { value: 'feature',   name: 'feature:      新功能'},
    { value: 'fix',       name: 'fix:       修复'},
    { value: 'docs',      name: 'docs:      文档变更'},
    { value: 'style',     name: 'style:     代码格式（不影响代码运行的变动）'},
    { value: 'refactor',  name: 'refactor:  重构（既不是增加feature）,也不是修复bug'},
    { value: 'pref',      name: 'pref:      性能优化'},
    { value: 'test',      name: 'test:      增加测试'},
    { value: 'ci',        name: 'test:      脚本变更（对CI配置文件或者脚本的修改）'},
    { value: 'chore',     name: 'chore:     构建过程或辅助工具的变动'},
    { value: 'revert',    name: 'revert:    回退'},
    { value: 'build',     name: 'build:     打包'}
  ],

  // 步骤
  messages: {
    type: '请选择提交的类型；',
    customScope: '请输入修改的范围（可选）',
    subject: '请简要描述提交（必填）',
    body: '请输入详细描述（可选）',
    footer: '请选择要关闭的issue（可选）',
    confirmCommit: '确认要使用以上信息提交？（y/n）'
  },

  // 跳过步骤
  skip: ['body', 'footer'],

  // 默认长度
  subjectLimit: 72
}
  1. 安装commitlint依赖
npm install @commitlint/config-conventional @commitlint/cli -D
  1. 新建commitlint.config.js文件，增加校验逻辑
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feature', // 新功能
        'fix', //  修复
        'docs', // 文档变更
        'style', // 代码格式（不影响代码运行的变动）
        'refactor', // 重构（既不是增加feature）,也不是修复bug
        'pref', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

增加commit message校验

添加 commitlint 的 hook 到 husky 中，执行以下命令，即可在.husky文件夹中生成commit-msg 文件

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

到这，commit message 的校验配置就完成了，但在工作过程中我们经常会使用ide的可视化提交工具，VS Code有 Commit Message Editor 和 Conventional Commits，WbeStorm有Git Commit Message Helper 和 Git Commit Template 对应的链接中都有详细的使用配置教程。

💡 注：VS Code中的两个插件，都无法进行可视化的**BREAKING CHANGE**的选择提示，只能手写。

配置代码提交检查的hooks

添加pre-commit hooks

npx husky add .husky/pre-commit "npx run lint-staged"

运行完该命令后我们会看到 .husky/目录下新增了一个名为 pre-commit的shell脚本

添加eslint依赖，配置文件，与ignore文件

npm install  eslint @babel/eslint-parser eslint-plugin-vue @vue/cli-plugin-eslint -D

其中：

  • eslint: ESLint的核心代码
  • babel-eslint: eslint 与 babel 整合包
  • eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包

添加文件.eslintrc.js ，将下列通用规则拷贝进去

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
    commonjs: true,
    amd: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    parser: '@babel/eslint-parser'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': [
      'error',
      {},
      {
        usePrettierrc: true,
        fileInfoOptions: {}
      }
    ]
  }
};

如果有需要忽略的文件也可以在 .eslintignore 文件中进行配置:

// .eslintignore
.DS_Store
.husky
apply
build/*.js
dist
src/assets
public
node_modules
💡 **文件中取消 ESLint 常用注释** 
/* eslint-disable */ —- 禁用全部规则 放在文件顶部则整个文件范围都不检查
/* eslint-disable no-alert, no-console */ -— 禁用某些规则
// eslint-disable-line -— 当前行上禁用规则
// eslint-disable-next-line —- 下一行上禁用规则

添加prettier依赖，配置文件，与ignore文件

Prettier 是一个代码格式化工具，但并非针对一种语言，对 HTML/CSS/JavaScript/Vue/SCSS 都有效果。可以通过配置文件在不同项目间统一代码格式化，以修正不同编辑器IDE之间格式化不同的问题。

npm install prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli -D --save-exact prettier
#--save-exact 是锁定版本号,确保项目里的所有人都使用相同版本

其中：

• prettier：prettier插件的核心代码

• eslint-plugin-prettier：将prettier作为ESLint规范来使用

• eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效 • prettier-eslint-cli:prettier-eslint-cli 允许你对多个文件用prettier-eslint进行格式化。

添加.prettierrc.js 文件，并拷贝以下内容

// .prettierrc.js
module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 行末分号
  semi: false,
  // 单引号
  singleQuote: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）
  trailingComma: "none",
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxBracketSameLine: false,
  // 箭头圆括号
  arrowParens: "avoid",
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: "auto",
  HTMLWhitespaceSensitivity: "ignore",
};

添加.prettierignore 文件，将需要忽略格式校验的文件与文件夹加入其中

# Ignore artifacts:
.DS_Store
.husky
apply
build/*.js
dist
src/assets
public
node_modules/*

这时，我们需要修改下eslint的配置，避免prettier与eslint的冲突

//.eslintrc.js
module.exports = {
	//仅修改extents
	extends: [
	    //继承 vue 的标准特性
	    "plugin:vue/essential",
	    "eslint:recommended",
	    //避免与 prettier 冲突,增加此行内容
	    "plugin:prettier/recommended",
	  ],
}

安装lint-staged依赖

执行以下命令，使用lint-staged 来校验提交暂存区的代码格式是否符合规范

npm install lint-staged -D

修改package.json 文件，增加以下内容，使用eslint来fix代码格式错误

"scripts": {
    ...
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue,json,css,scss,md}": [
      "eslint --fix"
    ]
  },

编译器配置读取格式化配置文件

VS Code 需要在扩展中安装ESLint，Prettier，Vetur插件。并将Vetur的format设置为prettier。

WebStorm需要在Setting中将Eslint 设置为Automatic ESLint configuration ，且将Prettier的 On ’Reformat Code‘ action Ctrl+Alt+L , On save 两个选项勾选应用。

avatar
文章
阅读
粉丝