vue3-ts:Commitlint / 规范化Git提交消息格式

一、理解Commitlint

Commitlint是一个用于规范化Git提交消息格式的工具。它基于Node.js,通过一系列的规则来检查Git提交信息的格式,确保它们遵循预定义的标准。

1.1、Commitlint的核心功能

代码规则检查:Commitlint基于代码规则进行检查,这些规则可以自定义以适应项目的特定需求。例如,可以设置规则来要求所有的函数都有明确的参数列表等。
多种编程语言和框架支持:Commitlint支持多种编程语言和框架,如JavaScript、Python、React、Angular等,使其能够适应各种项目需求。
可视化报告和警告:Commitlint提供可视化报告和警告,帮助团队成员了解有关代码问题的详细信息。

1.2、Commitlint的工作流程

它在Git的commit-msg钩子中运行,这意味着每次提交时,Commitlint都会自动检查提交信息。
如果提交信息不符合规则,Commitlint会阻止提交并给出错误提示。

此外,Commitlint与Husky等工具可以配合使用,确保代码在提交到版本控制系统之前经过检查和验证。

二、vue3 + ts 项目使用Commitlint

pnpm add  @commitlint/cli @commitlint/config-conventional

pnpm add husky

.commitlintrc.js

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

测试一、

提交成功

验证通过

测试二、

三、过程记录

3.1、.commitlintrc.js

.commitlintrc.js 是一个配置文件,用于 Commitlint,一个工具,用于帮助你在 Git 仓库中强制执行一致的 commit message 格式。Commitlint 允许你定义规则,这些规则会在你尝试提交一个新的 Git commit 时被检查。

这个文件通常包含一个配置对象,该对象定义了你希望 Commitlint 遵循的规则。

以下是一个简单的 .commitlintrc.js 示例:

module.exports = {  
  extends: ['@commitlint/config-conventional'], // 使用常规的 commitlint 配置文件  
  rules: {  
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']], // 定义允许的提交类型  
    'scope-case': [2, 'always', 'lower-case'], // 强制提交范围为小写  
    'subject-case': [0], // 不强制主题大小写(但通常建议使用 sentence-case)  
    'subject-empty': [2, 'never'], // 禁止空的提交主题  
    'subject-full-stop': [0, 'never'], // 不强制主题以句号结尾  
    'header-max-length': [2, 'always', 72], // 强制 header 最大长度为 72 个字符  
    'body-leading-blank': [1, 'always'], // 强制 body 前面有一个空行  
    'footer-leading-blank': [1, 'always'], // 强制 footer 前面有一个空行  
    'footer-max-line-length': [2, 'always', 80], // 强制 footer 的每行最大长度为 80 个字符  
  },  
  parserPreset: {  
    parserOpts: {  
      headerPattern: /^(\w*)(?:\(([\w$\.,\s]*?)\))?\s*:(.*)$/, // 自定义 header 的正则表达式  
      headerCorrespondence: ['type', 'scope', 'subject'], // 与 headerPattern 匹配的部分  
    },  
  },  
};

四、欢迎交流指正

### 创建和配置 Vue 3 TypeScript Git 项目的初始化过程 #### 安装 Vue CLI 并验证安装情况 为了确保环境准备充分,需先全局安装 Vue CLI 工具。这一步骤对于后续通过命令行工具快速构建项目至关重要。 ```bash npm install -g @vue/cli ``` 确认 Vue CLI 是否成功安装以及其版本号: ```bash vue --version ``` 上述操作依据了关于检查是否已安装 Vue CLI 的说明[^3]。 #### 使用 Vue CLI 创建新项目并启用 TypeScript 支持 启动交互式的项目创建向导,期间可以选择集成 TypeScript 功能来增强开发体验。 ```bash vue create my-vue-ts-app ``` 当提示选择特性时,务必勾选 `TypeScript` 选项以激活该语言特性的支持。此步骤基于 Vue 对 TypeScript 更好兼容性的描述[^2]。 #### 添加 ESLint 和 Prettier 来保持代码风格一致性 为了让团队协作更加顺畅,建议引入静态分析工具如 ESLint 结合特定于 TypeScript 的规则集,从而提高代码质量。 编辑 `.eslintrc.json` 文件,加入如下所示的内容用于定义基本的 linting 行为: ```json { "root": true, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "project": ["./tsconfig.json"] }, "plugins": ["@typescript-eslint"], "rules": {}, "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"] } ``` 这段配置来源于有关 ESLint 设置的最佳实践指南[^4]。 #### 配置 Commit Message 规范化插件 commitlint 为了统一提交信息格式,可以在仓库根目录下添加 `commitlint.config.js` 文件,并指定遵循常规约定扩展包中的标准。 ```javascript module.exports = { extends: ['@commitlint/config-conventional'] }; ``` 这部分设定参照了如何规范化提交消息的具体做法[^5]。 完成以上各环节之后,即拥有了一个完整的、基于 Vue 3 和 TypeScript 构建的新前端应用框架,并且具备良好的编码习惯保障机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值