专栏首页前端技匠开箱即用的代码提交规范

开箱即用的代码提交规范

开篇

在团队中代码提交(git commit)会有各种各样的风格,甚至有些人根本没有 commit 规范的概念,所以在我们回头去查找在哪个版本出现问题的时候,就会非常尴尬?,很难快速定位到问题。为了项目的规范化,代码提交规范就显得尤为重要!下面是我做的代码提交规范插件 vue-cli-plugin-commitlint(对 conventional-changelog-angular 进行了修改/封装)。开箱即用!

vue-cli-plugin-commitlint 介绍

vue-cli-plugin-commitlint 是根据 vue 插件的形式写的,可以执行 vue add commitlint 直接使用,如果不是 vue 的项目也可以根据下面的配置自行配置。

结合 commitizen commitlint conventional-changelog-cli husky conventional-changelog-angular,进行封装,一键安装,开箱即用的代码提交规范。

功能

  1. 自动检测 commit 是否规范,不规范不允许提交
  2. 自动提示 commit 填写格式。不怕忘记规范怎么写
  3. 集成 git add . && git commit 不需要在执行两个命令
  4. 自动生成 changelog

配置

  1. 如果您是 vue-cli3 的项目可以直接使用即可
vue add commitlint
  1. 如果您不是 vue-cli3 的项目
npm i vue-cli-plugin-commitlint commitizen commitlint conventional-changelog-cli husky -D
  • 在 package.json 中添加
{
  "scripts": {
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
    "cz": "npm run log && git add . && git cz"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"
    }
  }
}

增加 commitlint.config.js 文件

module.exports = {
  extends: ['./node_modules/vue-cli-plugin-commitlint/lib/lint']
};

使用

npm run cz  # git add . && git commit -m 'feat:(xxx): xxx'
npm run log # 生成 CHANGELOG
  1. 代码提交 npm run cz
  1. 选择一个类型会自动询问
    1. (非必填)本次提交的改变所影响的范围
    2. (必填)写一个简短的变化描述
    3. (非必填)提供更详细的变更描述
    4. (非必填)是否存在不兼容变更?
    5. (非必填)此次变更是否影响某些打开的 issue

changelog 演示

规则

规范名

描述

docs

仅仅修改了文档,比如 README, CHANGELOG, CONTRIBUTE 等等

chore

改变构建流程、或者增加依赖库、工具等

feat

新增 feature

fix

修复 bug

merge

合并分支

perf

优化相关,比如提升性能、体验

refactor

代码重构,没有加新功能或者修复 bug

revert

回滚到上一个版本

style

仅仅修改了空格、格式缩进、都好等等,不改变代码逻辑

test

测试用例,包括单元测试、集成测试等

总结

目前我有好几个项目都在使用这套规范

项目地址:https://github.com/luoxue-victor/commitlint

欢迎来 pr、star

本文分享自微信公众号 - 前端技匠(gh_057b814fc3f7),作者:罗学

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-router的超神之路

    本文是vue-router系列。这里从浏览器到vue-router原理到最佳实践都会有详细的讲解。由于篇幅较长,建议可以选择感兴趣的目录看。

    用户4131414
  • 原生JS灵魂之问(下), 冲刺进阶最后一公里(附个人成长经验分享)

    笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有...

    用户4131414
  • 如何写一个代码编辑器

    学无止境,我们现在的技术都是基于前一代人之上做出来的,要想成为一个高级/资深的前端,重点不是你能创造多少东西,而是你知道多少东西。有没有解决问题的能力。遇到问题...

    用户4131414
  • vue[0x01] -- Hello World

    如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早...

    丰臣正一
  • 如何在Vue面试环节,证明自己值月薪15K?

    回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的。

    闰土大叔
  • vue实践之采用vue-cli3.x创建项目

    vue.js 官方文档 https://cn.vuejs.org/v2/guide/

    陨石坠灭
  • Vue 3.0将正式发布,对我们有哪些改变?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    前端迷
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园

扫码关注云+社区

领取腾讯云代金券