Git:Commit Message 规范和代码格式校验

Commit Message 规范

以 angular 规范为例,格式如下:

type(scope): subject        # head 必填,其中 type 和 subject 必填。
                            # 空行
72-character wrapped.       # body 选填。
                            # 空行
BREAKING CHANGE: msg.       # footer 选填。

其中:

head 部分

type (只允许下列7个标识):

  • feat:新功能(feature)

  • fix:修补bug

  • docs:文档(documentation)

  • style: 格式(不影响代码运行的变动)

  • refactor:重构(即不是新增功能,也不是修改bug的代码变动)

  • test:增加测试

  • chore:构建过程或辅助工具的变动

注意:feat 和 fix 类型的 commit 将出现在 Change log 中。

scope(选填):

此次提交的影响范围,如数据层、控制层、视图层等,多个可以用 * 代替,必须在type 之后、小括号之内。

subject:

此次提交的简要描述,必须在 type 之后的冒号之后的一个空格之后,结尾没有句号。

body 部分(选填)

此次提交的详细描述,应包含变动描述、变动理由等内容,使用第一人称现在时描述。

必须和 head 部分间隔一个空行,每超过72的字符必须换一行。

foot 部分(选填)

包含两种情况:1.当前代码不兼容上一个版本,BREAKING CHANGE冒号空格,后跟变动描述、变动理由和迁移方法;2.关闭 Issue,Closes #234 。

特殊情况:当前 commit 用于撤销之前的 commit,revert冒号空格,后跟要撤销的 commit 的 head。

Commit Message 规范约束工具

在项目中安装 commitizen :

npm i -D commitizen cz-conventional-changelog

在项目根目录创建 .czrc 文件:

{ "path": "cz-conventional-changelog" }

修改项目中 package.json 文件:

"script":{
    "commit":"git-cz",
},
"config":{
    "commitizen":{
        "path":"node_modules/cz-conventional-changelog",
    },
},

此时,在项目中使用 git cz 或 npm run commit 命令可以代替 git commit 命令,在提交时会自动带出 angular 规范的 commit message 编辑选项,下面将使用 cz-customizable 实现自定义规范。

在项目中安装 cz-customizable

npm i -D cz-customizable

修改项目中 .czrc 文件:

{ "path": "cz-customizable" }

修改项目中 package.json 文件:

"script":{
    "commit":"git-cz",
},
"config":{
    "commitizen":{
        "path":"node_modules/cz-customizable",
    },
},

在项目根目录创建 .cz-config.js 文件,配置项如下:

  • type: {Array of Object}:项目中使用的 type 和默认描述。
  • scopes: {Array of Strings}:预设项目中使用的可选 scope 。如:在一个银行系统项目中使用 [“acccounts”, “payments”];在一个旅行应用中使用 [“bookings”, “search”, “profile”]。
  • scopeOverrides: {Object where key contains a Array of String}:当您想重写特定提交类型的作用域时,使用此方法。如:在类型为“fix”时指定范围 { fix: [ {name: 'merge'}, {name: 'style'}, {name: 'e2eTest'},{name: 'unitTest'} ] }。
  • allowCustomScopes: {boolean, default false}:增加自定义 scope 选项,开启可以在设置 scope 时支持直接输入。
  • allowBreakingChanges: {Array of Strings: default none}:配置想要 breaking change 弹出提示的scope列表,如:[‘feat’, ‘fix’]。
  • appendBranchNameToCommitMessage:当配合 cz-customizable-ghooks 使用 cz-customizable 时, 可自动获取分支名称并添加到 commit message 中,此功能已经在 cz-customizable-ghooks实现,对应选项已经被添加到 cz-customizable-ghooks, v1.3.0. 中,默认值为 true。
  • breakingPrefix: {string, default ‘BREAKING CHANGE:’}:设置自定义 breaking change 块。
  • footerPrefix: {string, default ‘ISSUES CLOSED:’}:设置自定义 foot 块。

下面是是一个示例,具体可以参考项目根目录下node_modules下cz-customizable下cz-config-EXAMPLE.js文件:

module.exports = {
  types: [
    {value: 'feat',     name: 'feat:     A new feature'},
    {value: 'fix',      name: 'fix:      A bug fix'}
  ],
  scopes: [
    {name: 'accounts'},
    {name: 'admin'}
  ],
  messages: {
    type: 'Select the type of change that you\'re committing:',
    scope: '\nDenote the SCOPE of this change (optional):',
    customScope: 'Denote the SCOPE of this change:', 
    // used if allowCustomScopes is true
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix']
}

此时,在使用 commit 命令会自动带出 自定义 规范的 commit message 编辑选项。

Commit Message 校验

在项目中安装 commitlint/cli

npm i -D @commitlint/cli @commitlint/config-conventional

在项目根目录创建 commitlint.config.js 文件:

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

此时,commitlint 默认按照angular 规范对 commit message 校验,要校验自定义规范可以通过 rules 参数来实现。

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [2, 'always', 
            ["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"]
        ],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never']
    }
}

由于前面使用了 cz 来自定义 commit message 规范,下面将实现根据 cz 规范进行校验。

在项目中安装 commitlint-config-cz :

npm i -D commitlint-config-cz @commitlint/cli

修改项目中 commitlint.config.js 文件:

module.exports = {extends: ['cz'], rules:{}}

此时 commitlint 虽然可以校验之前指定的 commit message 规范,但是没有关联到 commit 指令上,下面将实现在提交代码时按照规范约束并自动校验。

在项目中安装 husky :

npm i -D husky

修改项目 package.json 文件:

"husky": {
    "hooks": { "commit-msg":"commitlint -e $GIT_PARAMS" }
},

此时,在提交代码时将按照之前自定义的规范约束 commit message 并自动按照对应规范进行校验,下面将实现自动生成 Change log(需要符合 angular 规范)。

在项目中安装 conventional-changelog-cli

npm i -D conventional-changelog-cli

输出 Change log

conventional-changelog -p angular -i CHANGELOG.md -s

根据实际需要,可以将输出 Change log 命令,加入项目中 package.json 文件:

"script":{
    "commit":"git-cz",
    "changelog":"conventional-changelog -p angular -i CHANGELOG.md -s",
}

代码格式校验

在项目中安装eslint:

npm i -D eslint

在项目中创建 .eslintrc.json / .eslintrc / .eslintrc.js (任一即可,非 json 文件需要导出) ,详细配置参考 Eslint 规则详解,下面是示例代码:

{ // 务必删除注释
  "env": { // 环境变量
    "node": true, // brower、node、es6、mocha等
    "es6": true
  },
  "globals": { // 全局变量
    "vue": true, // "$"、"wx"、"ng"等
  },
  "parserOptions": { // 格式配置
    "ecmaVersion": 6,  //es 版本,默认5,可选3、6(2015)、7(2016)等
    "ecmaFeatures": { // 附加语言特征,globalReturn、impliedStrict、jsx
      "globalReturn": true,
      "jsx": true
    }
  },
  
  "rules": { // 规则配置,0或'off':关闭规则;1或'warn':打开规则,且作为警告(检查通过);2或'error':打开规则,且作为错误(退出码为1,检查不通过)。
    "camelcase": 2,
    "curly": 2,
    "brace-style": [2, "1tbs"],
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "space-in-brackets": [2, "never"],
    "space-infix-ops": 2
  }
}

除了手动设置规范还可以使用目前 eslint 三种(googlestandardairbnb)流行规范,并在其基础上进一步自定义,安装方式如下:

npm i eslint-config-google -D

npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D 

npm i eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

修改项目中 package.json 文件:

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS",
      "pre-commit" : "eslint ./app/**/*.js --fix"
    }
  },

配置好eslint 规则之后,在提交时会自动带出之前的自定义约束,输入完成后自动校验 commit message ,并自动校验代码规范,只有全部通过才能提交成功,否则退出 commit ,同时还可以使用指令输出 change log 文档。

如果在项目中使用了 typescript,则可以继续添加响应校验:

在项目中安装tslint:

npm i -D tslint typescript

在项目中创建 tslint.json  ,详细配置参考 TSLlint Rules,下面是示例代码:

{
  "lintOptions": {
    "typeCheck": true
  },
  "extends": [
    "tslint:recommended"
  ],
  "rules": {
    "no-constant-condition": true,
    "file-header": [
      true,
      "Author \\w{2,20}\nCopyright 20\\d{2} Qietv"
    ],
    "max-line-length": [
      true,
      120
    ]
  }
}

除了手动设置规范也可以使用诸如 tslint-config-standard 等规范,并在其基础上进一步自定义,安装方式如下:

npm i tslint-config-standard -D

npm i tslint-eslint-rules -D 

修改项目中 tslint.json 文件

{
  "lintOptions": {
    "typeCheck": true
  },
  "extends": [
    "tslint:recommended",
    "tslint-config-standard"
  ],
  "rulesDirectory": [
    "node_modules/tslint-eslint-rules/dist/rules"
  ],
  "rules": {
    "no-constant-condition": true,
    "file-header": [
      true,
      "Author \\w{2,20}\nCopyright 20\\d{2} Qietv"
    ],
    "max-line-length": [
      true,
      120
    ]
  }
}

除此之外,还需要在项目中创建 tsconfig.json 文件 ,下面是示例代码:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "allowJs": true
  },
  "exclude": [
    "app/public",
    "app/views",
    "node_modules*"
  ]
}

修改项目中 package.json 文件,把 ts 校验绑定到提交操作:

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS",
      "pre-commit" : "eslint ./app/**/*.js --fix && tslint ./app/**/*.ts --fix"
    }
  },

此时,在项目中提交时会自动带出之前的自定义约束,输入完成后自动校验 commit message ,并自动校验指定位置的 js 和 ts 代码规范,只有全部通过才能提交成功,否则退出 commit ,同时还可以使用指令输出 change log 文档。

 

 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值