vue项目配置git提交规范

这篇具有很好参考价值的文章主要介绍了vue项目配置git提交规范。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、背景介绍

项目中代码格式以及git message如果不加以约束,可能最终的格式会五花八门,这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。

二、husky、lint-staged、@commitlint/cli

1.husky

Husky 是一个 Git Hook 工具,可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制,它允许在 Git 执行操作时自动运行特定脚本,以执行自定义操作。
使用 Husky,可以轻松地添加 Git Hooks,并在特定的 Git 事件(如提交代码)发生时执行自定义的脚本。例如,在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
Husky 支持多种 Git Hooks,包括 pre-commit、pre-push 等,并可以配置多个钩子,以便在多个 Git 事件发生时执行自定义脚本。

2.lint-staged

lint-staged 是一个工具,可以在 Git 暂存区的文件上运行指定的 lint 工具,以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用,以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率,因为只需要针对本次提交的文件执行 lint 检查,而不是所有的文件。
lint-staged 支持多种 lint 工具,例如 ESLint、Prettier、Stylelint 等,并可以配置多个 lint 工具。它还支持使用 glob 模式来选择要运行 lint 工具的文件。

3.@commitlint/cli

@commitlint/cli 是一个命令行工具,用于校验 Git 提交信息是否符合规范。它通常与 Husky 和 lint-staged 配合使用,以在提交代码前对提交信息进行校验,从而确保提交信息的格式和内容符合项目规范和约定。
@commitlint/cli 遵循 Conventional Commits 规范,可以自定义配置校验规则。它支持多种校验规则,例如校验提交信息的类型、描述和主体等,并可以在不同的提交阶段执行不同的校验规则。例如,在提交代码前只检查代码格式和 lint 检查,而在合并代码时进行更全面的提交信息校验。

三、具体使用

1.安装依赖

npm i husky -D
npm i lint-staged -D
npm i @commitlint/cli @commitlint/config-conventional -D
vue项目配置git提交规范,vue.js,git,husky,lint-staged

2.运行初始化脚本

npx husky install :生成 .husky 的文件夹
vue项目配置git提交规范,vue.js,git,husky,lint-staged

npx husky add .husky/pre-commit "npx --no-install lint-staged": 添加 hooks,会在 .husky 目录下生成一个 pre-commit 脚本文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"':添加 commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

3.在package.json中配置lint-staged

lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{scss,less,css,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ]
},

4.根目录新增 commitlint.config.js

module.exports = {
  // 继承的规则
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type类型定义,表示git提交的type必须在以下类型枚举范围内
    "type-enum": [
      2, // 当前验证的错误级别 2:错误
      "always", // 在什么情况下进行验证 always:随时
      [
        // 泛型内容,与.cz-config.js一致
        "feat", // 新功能 feature
        "fix", // 修复 bug
        "docs", // 文档注释
        "style", // 代码格式(不影响代码运行的变动)
        "refactor", // 重构(既不增加新功能,也不是修复bug)
        "perf", // 性能优化
        "test", // 增加测试
        "chore", // 构建过程或辅助工具的变动
        "revert", // 回退
        "build", // 打包
      ],
    ],
    // subject大小写不做校验 0:关闭校验
    "subject-case": [0],
  },
};

提交格式:
git commit -m <type>: <description> // 冒号后面有空格

  • type:提交的类型(如新增、修改、更新等)
  • description:信息描述

4.提交测试

1.提示信息格式错误时

git commit -m '测试提交'
vue项目配置git提交规范,vue.js,git,husky,lint-staged

2.eslint校验不通过时

vue项目配置git提交规范,vue.js,git,husky,lint-staged
提交就会报错了
vue项目配置git提交规范,vue.js,git,husky,lint-staged文章来源地址https://www.toymoban.com/news/detail-673871.html

到了这里,关于vue项目配置git提交规范的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【章节1】git commit规范 + husky + lint-staged实现commit的时候格式化代码

    创建项目我们不多说,可以选择默认的,也可以用你们现有的项目。注意章节1和章节2请一起看! 章节1: commit规范+ husky + lint-staged格式化代码 章节2: husky + 检测是否有未解决的冲突 + 预检查debugger + 自动检查是否符合commit规范 前言: git commit 的时候总有人填写一堆花里胡哨乱

    2024年02月08日
    浏览(55)
  • vite初始化vue3项目(配置自动格式化工具与git提交规范工具)

    初始化项目 vite构建vue项目还是比较简单的,简单配置选择一下就行了 初始化命令 初始化最新版本vue项目 2. 基本选项含义 Add TypeScript 是否添加TS ADD JSX是否支持JSX ADD Vue Router是否添加Vue Router路由管理工具 ADD Pinia 是否添加pinia(状态管理工具) Add ESLinit 是否添加ESLint是否添加

    2024年02月12日
    浏览(60)
  • 前端项目git提交规范配置

    为了使团队多人协作更加的规范,所以需要每次在 git 提交的时候,做一次硬性规范提交,规范 git 的提交信息 安装依赖 配置package.json 新增配置文件 commitlint.config.js 添加自定义提示 .cz-config.cjs 安装 创建 .prettierrc 文件,并添加如下配置, 具体配置可以查看官网 安装(注意:这

    2024年02月19日
    浏览(37)
  • 代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用

    使用 vscode 新建一个项目(比如叫 my-project) 初始化 git 仓库( git init ) 初始化 package.json ( npm init -y ) 新建 src/main.js 项目结构如图 .git 目录没有出现在 vscode 编辑器中是正常的。 在介绍 husky 之前,首先要理解什么是 hook(钩子),在前端 Vue 框架中提供了 beforCreated、created、

    2024年02月03日
    浏览(49)
  • 基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建

    博客后台管理系统使用后的是基于Vue3+Vite+TS+ESLint+Prettier的开发,具体项目构建如下 ESLint: 控制代码质量 Prettier: 控制代码风格 2.1、安装ESLint、Prettier相关相关包 eslint: ESLint的核心代码库 prettier: Prettier的格式化代码的核心代码库 eslint-config-airbnb-base: airbnb的代码规范(依赖pl

    2024年02月07日
    浏览(57)
  • 为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

    因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。 eslint 是一个代码校验工具,用来规范项目代码风格。 初始化 通

    2024年02月14日
    浏览(98)
  • 配置 Git Husky 代码提交约束

    Git Husky 是一个可以管理 Git Hooks 的工具,它可以帮助我们在代码提交的时候运行脚本,以确保代码提交符合特定的规范和约定。 在 Git 中,允许在操作特定的事件时执行特定的脚本,这些事件我们称之为 Hooks 。 Git Husky 利用这些 Hooks 实现了在代码提交前、提交信息规范校验等

    2024年02月03日
    浏览(49)
  • 项目git commit时卡主不良代码:husky让Git检查代码规范化工作

    看完 《前端规范之Git工作流规范(Husky + Commitlint + Lint-staged) 前端规范之Git工作流规范(Husky + Commitlint + Lint-staged) - Yellow_ice - 博客园》,再次修改本文 团队人一多,提交一多,还是要对备注加以区分,好快速找到变更点。这时候就需要对每次提交,需要输入message,对提交

    2024年02月03日
    浏览(112)
  • 前端项目规范化:手把手教你使用prettier和pre-commit(git hook或者husky)优化规范项目代码

    最简单的两种方式: 使用 prettier + git pre-commit 使用 prettier + husky(原理和第一种一模一样哦) git hooks 下图为git hooks的官方示例,以.sample结尾。注意这些以.sample结尾的示例脚本是不会执行的,重命名后会生效 是一些自定义的脚本,用于控制git工作的流程,分为客户端钩子和服务

    2024年02月04日
    浏览(73)
  • 前端工程化配置-husky + eslint + lint-staged

    配置步骤如下: 1、下包 npm i eslint -D 或者 yarn add  eslint 2、配置 ESlint npx eslint --init 然后根据弹出的内容区选择你需要的规范。 1、 你想怎么使用ESLint? 2、 你的项目使用哪个规范? 3、你的项目使用哪个框架开发? 4、你的项目使用 TypeScript 了吗?   5、你的代码在哪里运行

    2023年04月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包