使用commitize+husky+commitlint制定git提交规范并自动修复代码格式

原创 已于 2022-04-12 22:36:52 修改 · 984 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#git #webpack

于 2022-04-12 11:59:58 首次发布
本文介绍了如何结合git、commitizen、cz-customizable、husky和commitlint来规范代码提交流程。首先，通过全局安装Commitizen和cz-customizable插件，自定义提交提示信息。接着，创建.cz-config.js文件以设置提交类型。然后，安装并配置husky和commitlint，确保提交描述遵循指定的规范。最后，利用lint-staged在提交时进行代码规范检查和自动修复，确保团队开发过程中代码提交的质量和一致性。

文章目录

一、使用git+commitize+cz-customizable制定提交规范

1.全局安装 Commitizen

npm install -g commitizen@4.2.4

2.安装并配置 cz-customizable 插件

// 使用npm 下载 cz-customizable
npm install cz-customizable@6.3.0 --save--dev

添加以下配置到package.json中

"config": {
   
   
	  "commitizen": {
   
   
   		  "path": "node_modules/cz-customizable"
		 }
	 }

3.项目根目录创建 .cz-config.js 自定义提示文件

module.exports = {
   
   
  //可选类型
  types: [
    {
   
    value: 'feat', name: 'feat:   新功能' },
    {
   
    value: 'fix', name: 'fix:   修复' },
    {
   
    value: 'docs', name: 'docs:   文档变更' },
    {
   
    value: 'style', name
最低0.47元/天 解锁文章
HuskyJS:JavaScript，WIP中类似Haskell的解释器
05-28
哈士奇 JavaScript，WIP中类似Haskell的解释器 安装 通过Node上的npm： npm install huskyjs 用法 var husky = require ( 'huskyjs' ) ; 待定 参考 下划线 极简主义的前奏 Haskell中的函数调用评估 Haskell中mod和rem之间的区别 哈斯克尔分部 图书 Haskell，函数式编程手艺； 西蒙·汤普森 Haskell从第一本原理开始编程 样本 待定 版本号 待定 贡献 随时[提出问题]（ https://github.com/ajlopez/HuskyJS并提交拉取请求-欢迎贡献。 如果您提交拉取请求，请确保添加或更新相应的测试用例，并确保npm test继续通过。
Commitizen + Husky + Commitlint实现commit message校验
小陈的博客
05-23 1631
Commitizen, Husky, Commitlint 先简要地介绍这三个工具的作用，让大家对整个校验过程如何实现有一个大体的了解。 Commitizen：是一个命令行提示工具，它主要用于帮助我们更快地写出规范的commit message Commitlint：用于校验填写的commit message是否符合设定的规范 Husky：是一个git hook工具，用于在提交过程中的某个特定时刻触发commitlint 第一步：Commitizen 安装Commitizen有全局安装和单个项目安装两种
commitlint+husky的git代码规范
weixin_42397189的博客
12-06 506
Hello,everyone ! 想以一个轻松愉悦的心情来开始我的每一篇文章。 这是每一次的整理和缩影，希望大家可以发表意见，促进成长。 项目优化中，可以运用一下这个。 1.安装 commitlint/config-conventional和commitlint/cli npm install --save-dev @commitlint/config-conventional @com...
Commitlint + Husky 配置指南
最新发布
qq_42952637的博客
09-17 437
Commitlint + Husky 配置指南
【Vue工程】003-配置 husky、lint-staged、@commitlint/cli
訾博（ZiBo）的博客
05-07 1324
husky 的读音为 /ˈhʌski/Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。使用 Husky，可以轻松地添加 Git Hooks，并在特定的 Git 事件（如提交代码）发生时执行自定义的脚本。例如，在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
vue3-ts：Commitlint / 规范化Git提交消息格式
snow的博客
07-01 1452
是一个配置文件，用于 Commitlint，一个工具，用于帮助你在 Git 仓库中强制执行一致的 commit message 格式。Commitlint 允许你定义规则，这些规则会在你尝试提交一个新的 Git commit 时被检查。它基于Node.js，通过一系列的规则来检查Git提交信息的格式，确保它们遵循预定义的标准。它在Git的commit-msg钩子中运行，这意味着每次提交时，Commitlint都会自动检查提交信息。如果提交信息不符合规则，Commitlint会阻止提交并给出错误提示。
使用commitlint规范git提交
weixin_34318956的博客
07-19 568
在我们开始一个项目的时候通常会用eslint去规范js代码。我们还可以用一些命令行工具去规范我们的git提交信息以及在每次git操作过程中执行一些测试，最快可以依据git提交信息生成CHANGELOG文件 commitlint: git 提交信息规范与验证husky: 使ghook更容易standard-version: 自动生成CHAN...
Git 提交规范：如何通过 Commitlint + Husky 实现团队代码提交标准化
degree520的博客
08-29 1057
本文介绍如何使用Commitlint+Husky规范Git提交信息，提升团队协作效率。通过Angular规范格式（如feat/fix/docs等类型），实现提交信息标准化，便于版本追踪、自动生成changelog和CodeReview。具体步骤包括：安装配置Commitlint和Husky，创建校验钩子，并可选集成Commitizen引导规范提交。方案支持自定义规则并与CI/CD集成，建议团队统一规范、文档化并持续执行，以提升工程化水平，为自动化发布奠定基础。
husky + lint-staged + commitlint 对 git 提交信息和代码格式进行验证
weixin_42301445的博客
06-24 1518
husky + lint-staged + commitlint 对 git 提交信息和代码格式进行验证，husky + gerrit 报错ERROR: commit dbf44af: missing Change-Id in message footer，问题
代码提交检查husky+Lint-staged+Commitizen & cz-git
weixin_45636198的博客
06-29 2164
注意一定要使用pnpm来下载所有的husky包，不然到后面无法生成commit-msg钩子Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。
git Husky 搭配 commitizen ，规范代码提交
贤蛋大眼萌
10-23 6359
husky可以帮助我们在 执行 git commit 提交的时候，按照eslint 规范进行修复代码。husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push 支持所有的Git 钩子简单说就是在 Git 执行一些操作时，在钩子处执行一些自己需要的命令。
react eslint自动修复_ESlint+Prettier+EditorConfig+VScode
weixin_42445810的博客
02-03 1812
背景协同开发时,因各人使用代码格式化不一致,diff 时就很难看出改动点在哪里看到 esint 报红就害怕,觉得上了 eslint 就像上了枷锁目标 少依赖,只需要开启 ESlint 即可 "零"配置,减少风格差异选择的争吵 全自动化,自动修复,保持原本的习惯即可所用知识点ESLintPrettierEditorConfigvscode效果点击保存command + s / Ctrl + s后...
Husky 入门
软考鸭
07-22 1417
Husky 是一个流行的 Node.js 工具，用于管理 Git 钩子。Git 钩子是在特定 Git 操作（如提交、推送等）发生时自动触发的脚本。Husky 允许你轻松地为你的项目添加这些钩子，以便在代码提交或推送之前自动执行检查、测试或其他任务。
使用 commitizen 规范git提交说明
小菜张的博客
03-10 2468
使用 commitizen 规范git提交说明
前端开发规范(三)-Git规范化提交
Johkilroy的博客
01-18 1268
在开发团队协作中，“开发规范” 是经常被讨论的话题。当然，除了代码上的规范，还有一个很重要的规范就是“提交规范”。提交统一的、有规则的信息；而不是混乱的、看不懂是什么意思的信息可以提供更加明朗的历史信息，便于后续快速定位问题、代码回滚等的操作可以自动化生成changelog。
husky + lint-staged + commitizen 配置提交代码规范
lhz_333的博客
08-24 5126
又又又来了，依旧是接上文。
Commitlint 使用总结
热门推荐
小草莓的博客
12-28 3万+
1、Commitlint 是什么  在多人协作的背景下，git 仓库和 workflow 的作用很重要。而对于 commit 提交的信息说明存在一定规范，现使用 commitlint + husky 规范git commit -m ""中的描述信息。 一句话说，当我们运行git commmit -m 'xxx'时，用来检查xxx是否满足固定格式的工具。 2、为什么使用 commitlint? 我们都知道，在使用 git commit 时，git 会提示我们填入此次提交的信息。...
Commit Lint 代码提交规范
wbddds的博客
11-01 3312
Commit Lint 代码提交规范 Install Husky v6 npm install husky --save-dev or yarn add husky --dev Active hooks npx husky install # or yarn husky install Add hook 注意：这一步命令，要在 .git 文件同级目录执行 注意：.husky 文件是执行了这一步命令后才生成 npx husky add .husky/commit-msg 'npx --no-inst
简单使用Commitizen-规范你的commit message
飞翔的熊blabla
11-09 854
最近在学习规范使用git开发,发现一个比较好用的来规范comment的工具,记录一下,一般来说，commit message 应该清晰明了，说明本次提交的目的,所以需要一些规范来使这些comment变得可读.commitizen则是最近发现的一款比较易用的工具 git的提交使用git commit -m "hello world"来提交comment,但是一些像hello world这样没有意义的comment让人无法理解这次的提交到底是为了什么 下面是一些基础介绍如果觉得麻烦直接查看第二部分 1. c
Vite + React + ESLint + Prettier + Husky + Commitlint 项目搭建指南及代码规范配置详解
08-01
### 项目初始化 首先，使用 `Vite` 创建一个基于 `React` 和 `TypeScript` 的项目。可以通过以下命令完成： ```bash npm create vite@latest my-app --template react-ts ``` 进入项目目录并安装依赖： ```bash cd my-app npm install ``` 启动项目： ```bash npm run dev ``` ### 集成 ESLint 为了使用 `ESLint` 进行代码规范，首先需要安装相关依赖： ```bash npm init @eslint/config ``` 在交互式命令行中，选择以下配置： - **To check syntax, find problems, and enforce code style** - **JavaScript modules (import/export)** - **React** - **Yes** for using TypeScript - **Browser** - **Use a popular style guide** - **Airbnb** - **JSON** 配置格式 安装 `ESLint` 插件和配置： ```bash npm install eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks --save-dev ``` 在项目根目录下创建 `.eslintrc.json` 文件，并添加以下配置： ```json { "root": true, "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module" }, "plugins": ["react", "@typescript-eslint", "prettier"], "rules": {} } ``` ### 集成 Prettier 安装 `Prettier` 及其插件： ```bash npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier ``` 创建 `.prettierrc` 文件，并添加以下配置： ```json { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "always", "endOfLine": "auto" } ``` 同时，在 `.eslintrc.json` 中添加 `prettier` 插件以确保 `ESLint` 与 `Prettier` 协作无冲突： ```json { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ] } ``` ### 集成 Husky 安装 `Husky` 以支持 Git Hook： ```bash npm install husky --save-dev ``` 启用 Git Hook： ```bash npx husky install ``` 添加 `pre-commit` Hook 以在提交代码前运行 `lint-staged`： ```bash npx husky add .husky/pre-commit "npx lint-staged" ``` ### 集成 Commitlint 安装 `commitlint` 以规范提交信息： ```bash npm install --save-dev @commitlint/config-conventional @commitlint/cli ``` 创建 `commitlint.config.js` 文件，并添加以下配置： ```js module.exports = { extends: ['@commitlint/config-conventional'] }; ``` 添加 `prepare-commit-msg` Hook 以确保提交信息符合规范： ```bash npx husky add .husky/prepare-commit-msg "npx commitlint --edit" ``` ### 集成 Lint-staged 安装 `lint-staged` 以确保只对修改的文件进行检查： ```bash npm install --save-dev lint-staged ``` 在 `package.json` 中添加 `lint-staged` 配置： ```json { "lint-staged": { "src/**/*.{ts,tsx}": ["eslint --fix", "prettier --write"], "src/**/*.{js,jsx}": ["eslint --fix", "prettier --write"], "src/**/*.css": ["stylelint --fix", "prettier --write"] } } ``` ### 配置 Stylelint（可选） 如果需要对 CSS 文件进行格式化，可以安装 `stylelint`： ```bash npm install --save-dev stylelint stylelint-config-standard stylelint-prettier ``` 创建 `.stylelintrc` 文件，并添加以下配置： ```json { "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"] } ``` ### 总结 通过以上步骤，已经成功搭建了一个基于 `Vite + React` 的项目，并集成了 `ESLint`、`Prettier`、`Husky`、`Commitlint` 和 `Lint-staged` 来规范代码风格和 Git 提交流程。这些工具的组合可以有效提升团队协作效率，并确保代码质量[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值