项目新增commitLint 和 husky 步骤

第一步：安装依赖

安装 commitlint 工具和规则集。

npm install --save-dev @commitlint/cli @commitlint/config-conventional

安装 husky 用于 git 拦截

（如果安装失败需检查node版本，需要node10以上）

npm i husky -D

第二步：增加 commitlint 配置文件

在根目录新增 commitlint.config.js 当然也可以是 .commitlintrc.js 文件，并增加以下配置：

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

或者一键生成配置文件

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

增加中文配置文件，新建 .cz-config.js 文件，复制以下代码：

'use strict';module.exports = {types: [{value: 'feat', name: 'feat：增加了新功能'},{value: 'fix', name: 'fix：修复bug'},{value: 'docs', name: 'docs：只改动了文档相关的内容'},{value: 'style', name: 'style：与代码逻辑无关的改动，例如删除空格、改变缩进、增删分号等',},{value: 'refactor', name: 'refactor：代码重构，与bug修复和新功能无关',},{value: 'perf', name: 'perf：优化相关，比如提升性能、体验',},{value: 'test', name: 'test：测试用例，包括单元测试、集成测试等'},{value: 'chore', name: 'chore：改变构建流程、或者增加依赖库、工具等',},{value: 'revert', name: 'revert：版本回滚'},],// override the messages, defaults are as followsmessages: {type: '选择一种你的提交类型:',scope: '选择一个scope (可选):',// used if allowCustomScopes is truecustomScope: 'Denote the SCOPE of this change:',subject: '短说明:\n',body: '长说明，使用"|"换行(可选)：\n',breaking: '非兼容性说明 (可选):\n',footer: '关联关闭的issue，例如：#31, #34(可选):\n',confirmCommit: '确定提交说明?'},allowCustomScopes: true,allowBreakingChanges: ['特性', '修复'],subjectLimit: 100
};

第三步：配置拦截

在 package.json 中增加以下配置项

"husky": {"hooks": {"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}
},

第四步：配置完成

以上三步，配置完成，接下来遵守提交规范，不然提交不上去。以下是提交示例：

// <type>(<scope>): <subject>
git commit -m 'feat(package.json): commitlint 拦截增加'

Tip: 如果项目中使用了 eslint 和 ts ，有可能以上两个文件会报以下错误：

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.

解决方案：在 tsconfig.json 中增加以下配置：

"include": ["mock/**/*","src/**/*","config/**/*",".umirc.ts","typings.d.ts",".commitlintrc.js",   // 主要是这两个".cz-config.js",    // 主要是这两个".eslintrc.js",".prettierrc.js"],

项目新增commitLint 和 husky 步骤相关推荐

[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
老项目换unicorn的大致步骤
老项目换unicorn的大致步骤: (1)修改config/application.rb 删除 29 # assign log4r's logger as rails' logger. 3 ...
面试总结-----工程化软件项目开发的流程、步骤
工程化软件项目开发的流程.步骤需求分析 (1)相关系统分析员向用户初步了解需求,然后用相关的工具软件列出要开发的系统的大功能模块,每个大功能模块有哪些小功能模块,对于有些需求比较明确相关的界面时,在 ...
webpack项目css插件压缩等步骤
webpack项目css插件压缩等步骤 minicssextractplugin css插件防止闪屏首先安装npm i mini-css-extract-plugin -S 要求webpack5 这 ...
java怎么把项目导成jar包步骤图
把java项目导成jar包步骤图
RN项目安卓真机调试步骤
RN项目安卓真机调试步骤 1.adb(Android Debug Bridge)工具安装: 打开终端,入当前用户的home目录,默认就是,不是的话执行命令:cd ~ 或 cd /Users/YourM ...
一张图掌握项目复盘的方法和步骤
[慕哲系列18]一张图掌握项目复盘的方法和步骤
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
commitLint和husky实现代码提交校验
现在使用的版本管理工具,首选应该都是git,入职到现在,git之外的版本管理工具也就最开始使用过svn.现在的项目,规范也越来越重要,所以才有各种强制的代码格式检测.当然,自己做过的项目还没有那么严格 ...

项目新增commitLint 和 husky 步骤

第一步：安装依赖

第二步：增加 commitlint 配置文件

第三步：配置拦截

第四步：配置完成

项目新增commitLint 和 husky 步骤相关推荐

最新文章

热门文章