husky+lint-staged 提交前的钩子的配置和git cz 格式化提交

最新推荐文章于 2025-09-19 07:34:17 发布

原创

最新推荐文章于 2025-09-19 07:34:17 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

本文介绍如何使用lint-staged和husky设置自动化代码格式化及检查流程，包括安装配置过程、预提交钩子设置及与prettier、eslint等工具的集成。

安装 lint-staged和 husky

npm install --save-dev lint-staged husky
// 手动启用husky
npx husky install

在这里插入图片描述

会生成 .husky 文件夹
在这里插入图片描述

添加 .husky里面的pre-commit 文件

  npx husky add .husky/pre-commit "npm run lint-staged"

在这里插入图片描述

在根目录添加 lint-staged.config.js

module.exports = {
   
   
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
    "prettier --write--parser json",

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

h5433

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

git代码提交规范限制-husky和git cz的使用

红岸基地

05-26

1711

写在前面这篇文章能写纯属是没什么可以写的了，最近vue3还没有进行完全看完，所以不敢写教程和博客，害怕误导你们，但是一直不写博客其实也不太好，翻了一下自己写的博客，关于git的还是一些基本的使用，但是关于git规范的目前来看还没有比较详细的文章，所以今天就将husky这个功能性的插件简单的介绍一下，也为后面的代码规范提交打个基础！介绍一下husky husky你可以简单认为他就是一个在你提交代码的时候进行格式校验的工具，因为git有自己的hooks也就是钩子，不理解的也没关系，你可以简单的理解为g

【Vue3】项目配置Eslint+prettier+stylelint+lint-staged+husky（超详细教程）

weixin_49352307的博客

12-23

1097

初始化vue3项目时,使用pnpm create vue ，可选配置Eslint，选择即可初始化配置完成Eslint。在husky文件下创建lint-staged.config.js。在eslint.config.js文件导入包,即可生效。接下来可以完美的编程规则的代码提交到同一个仓库了。创建eslint.config.js配置文件。配置stylelint.config.js。package.json设置脚本命令。配置prettierrc.json。1.自动配置Eslint配置。

参与评论您还未登录，请先登录后发表或查看评论

化前端代码规范Eslint + Prettier+ Lint-staged + Husky + Commitlint

大灰狼的小绵羊哥哥的博客

08-13

868

在实际开发中常常会遇到同事之间协作开发，由于编辑器代码格式化的不同以及其他代码规范问题，导致代码之间格式不统一，合并代码时常常非常痛苦，因此急需在项目中配置一套可靠的代码规范工具，但是网上的文章很多配置非常复杂，因此总结了一套非常简单的配置方式，能够快速搭建一套可用模板。本文主要有两大工具Prettier+Commitlint，配置中穿插Lint-staged 、Husky 、Eslint 等工具的配置。 ...

告别全量检查！TypeScript Lint-Staged 增量类型优化实战指南

最新发布

gitblog_00196的博客

09-19

951

你是否还在忍受全量代码检查带来的漫长等待？是否每次提交代码都要等待数分钟才能看到检查结果？本文将带你通过 Lint-Staged 实现 TypeScript 项目的增量代码检查，只检查变更文件，将反馈速度提升 10 倍，同时确保类型安全与代码质量。 ## 为什么需要增量代码检查传统的全量代码检查在大型 TypeScript 项目中存在严重性能问题。当项目达到数千个文件规模时，执行一次完整的类...

eslint9+prettier+commitlint+husky+lint-staged 配置实践

qelen的博客

11-26

1608

前端工程化eslint9最新配置

vue老项目增加提交格式化功能[eslint+prettier+husky+lint-staged]

Crazy_LinkFern的博客

01-30

857

vue老项目增加提交格式化功能[eslint+prettier+husky+lint-staged]

【git规范--husky的使用】

qq_51558433的博客

05-22

3201

在团队开发中，或者自己的项目中，我们都会用到git来管理我们的代码，但是当我们commit(git commit)的时候，是没有规范的，有的时我们偷懒甚至`git commit -m'..'`，这种提交虽然当时爽，但如果有一天我们需要回滚版本的时候，`git relog`，妈耶，这都是啥啊，如果在团队开发中这种情况更让人绝望。这时候，指定制定一套commit规范显得格外重要，我们可以借助`husky`和`Commitizen`这两个工具帮助我们来管理commit

代码提交检查husky+Lint-staged+Commitizen & cz-git

weixin_45636198的博客

06-29

2155

注意一定要使用pnpm来下载所有的husky包，不然到后面无法生成commit-msg钩子Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。

husky + lint-staged + commitlint 对 git 提交信息和代码格式进行验证

weixin_42301445的博客

06-24

1505

husky + lint-staged + commitlint 对 git 提交信息和代码格式进行验证，husky + gerrit 报错ERROR: commit dbf44af: missing Change-Id in message footer，问题

前端工程化: Husky + Eslint + Commitlint+ lint-staged + Prettier

weixin_59237791的博客

05-19

689

✅ 代码风格统一性✅ 提交信息可追溯性✅ 团队协作规范性✅ 质量检查自动化一、下载安装二、初始化 HuskyGit 提交操作↓Husky（触发钩子）├── pre-commit 钩子 → 启动 lint-staged → 运行 ESLint/Prettier└── commit-msg 钩子 → 启动 commitlint → 校验消息格式↓@commitlint/config-conventional（提供校验规则）

git commit校验代码格式、提交信息（husky+lint-staged+commitlint）

wh1t3z的博客

11-30

4867

前言一千人眼里有一千个哈姆雷特，在一个团队项目中，代码风格不统一，会大大的降低可读性，也会给后期的维护增加时间成本。如果代码风格统一、代码提交信息也简单明了，那么在后期协作以及处理bug时可以达到事半功倍的效果，所以就需要在我们使用git提交时校验eslint和提交信息的格式问题。需要用到的插件 husky、lint-staged、commitlint，写这个之前也看过网上的一些教程，使用的时候多多少少还存在一些问题，下面会把期间遇到的问题和解决方案详细的列出来。

【学不动系列】lint-staged 使用教程

oschina_41559824的博客

03-23

5330

当以JS格式提供配置时，可以将任务定义为一个函数，该函数将接收一个分段文件名/路径数组，并应以字符串形式返回完整的命令。也可以返回一个完整的命令字符串数组，例如当任务只支持单个文件输入时。函数可以是sync或async。示例：将文件名用单引号引起来，并在每个文件中运行一次‘**/*.js?示例：运行tsc对TypeScript文件的更改，但不传递任何文件名参数‘**/*.ts?示例：如果超过10个暂存文件，则在整个存储库上运行eslint‘**/*.js?

code-lint：一行命令为项目集成eslint，stylelint，commitlint，lint-staged，prettierr支持

02-05

@ fantasticit / code-lint 一行命令为项目集成eslint，stylelint，commitlint，lint-staged，prettierr支持用法 yarn add @fantasticit/code-lint -D -W 然后运行： yarn fantasticit-code-lint init 您可以看到在项目中添加了以下文件： .editorconfig .prettierignore .prettierrc.js stylelint.config.js .eslintignore .eslintrc.js .cz-config.js commit

【转载】一种git commit前自动格式化的方式

阅微草堂

06-02

1597

查看原文简介这个系列为了解决一个问题：自动化的去管理代码风格和格式前提：Linux，C语言，Clang 如何在每次commit的时候，将代码风格自动格式化后再提交commit，且格式化的内容必须是本次commit中的内容。这个需求看似很简单实现，但是做到后来我发现，要把这个需求做完美并没有这么容易我将一步步的去尝试实现最完美的状态：自动格式化代码只格式化staged changes 完整保留changes not staged现场漂亮的输出Clang干了啥这里会大量的使

代码提交git时自动格式化并通过ESlint检测

Jsoning的博客

12-17

4339

前言在同一个项目中，一般都是几个人合作开发，每个人的代码风格不同，因此提交到git之前，需要统一下格式，因此才有了这篇文章，分享一下自己的配置过程。希望每个小伙伴都能规范自己的代码，如果你认为对你有帮助或者有小伙伴有更好的方法欢迎积极留言！准备工作以vue为例，用脚手架生成一个项目，目录结构（这个没有什么影响，已有项目更好）介绍下我们需要使用到的npm模块 prettie...

VSCode中git出现“lint-staged“报错

clion_TQJ的博客

08-05

703

git出现“lint-staged“报错

git提交时由于eslint的检测机制报错：npm run lint-staged:js found some errors