首页/文章/前端规范

husky 无效? 新版本 husky 怎么配置

2023-04-08
14135 分钟
...

husky 没有生效

安装了 husky、lint-staged,并且完成配置。配置如图:

commit 的时候还是没有效果,没有去执行lint-staged

原因:husky的新版本和老版本是不一样的,如上图的配置,只适用 4.x

因此直接安装 4.3.8版本的husky即可生效

关于新版本的husky,比老版本多了一个动作。

老版本:安装 ——> 配置

新版本:安装 ——> 启用 ——> 生成 .husky相关配置

步骤:

  1. npm install husky --save-dev 安装
  2. npx husky install  手动启用husky
  3. npx husky add .husky/pre-commit "npm run lint-staged"  生成husky配置文件(执行完这一步,根目录会有一个 .husky目录)

完成这三步便可以正常使用了(前提是package.json里面的lint-staged已经配置好了)

上面的配置方法有一个问题:我们不可能每次 install 之后都需要手动去启用husky,如果开发A配置好了并提交,开发B拉下代码,装完依赖还需要去手动启用。

解决这个问题的办法,在package.json的里面添加如下配置:

"scripts": { "prepare": "husky install" }

它的作用是:在husky安装完之后,自动关联启用。这样除了开发A需要关心husky配置之外,其他后续的开发人员是不需要关心husky配置的。

husky lint-staged 完整步骤

  1. npm install husky lint-staged prettier --save-dev
  2. npx husky install          【启用】
  3. "prepare": "husky install"  【install后自动启用,这个操作一定要做,否则下次新拉代码还需要手动启用】
  4. npx husky add .husky/pre-commit "npm run lint-staged"  【创建一个hook,执行完根目录回生成一个.husky目录】
  5. 继续在 scripts 里面添加  "lint": "eslint --ext .js,.jsx,.ts,.tsx src", "lint-staged": "lint-staged"
  6. package.json  里面添加     "lint-staged": { "/*.{js,jsx,ts,tsx}": "npm run lint", "/*.{js,jsx,tsx,ts,less,md}": [ "prettier --write" ] }

完成上述操作之后,就可以去试一试了。

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
前端规范2024-12-04
Husky(husky9.x版本适配) + Lint-staged + Commitlint + Commitizen
Husky Husky 是 钩子工具,可以设置在 git 各个阶段(pre commit、commit msg 等)触发。 官方网站: Husky 安装方式: 安装命令: 自动生成的 目录和指令: Lint staged lint staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具,避免在 git commit 提交时在整个项目执行。 可以让你当前的...
学习
前端规范2024-09-11
✨ feat: 自动给git提交添加emoji 无需手动输入
很多人都用过 ,或者类似的工具,但这些工具都需要靠手动书写、命令行工具、vscode插件来添加emoji,不太方便,本身emoji意义不大只是锦上添花的东西, 本文通过几行简单的自定义脚本来自动添加emoji , 锦上添花的同时没有任何额外负担 不用手动输入 ,根据type自动添加,也可以根据type scope组合 支持用任何工具提交 命令行 GUI图形化 自定义emoji映射 feat(core): 🥇 feat(ui): 🥈...
学习
前端规范2024-09-10
从HTML活动页面到 Vue、React 大型项目都通用的 git hooks 配置
git提交时不加审核,团队内的git规范很容易被一次次的样式拉扯修改、小bug调整等git提交给冲得稀烂。这时候可以使用 git 原生的 hooks,在 commit 之前监听一下 commit 内容。但是原生 git hooks 的配置默认是不同步到仓库的,这样一来,配置好的 hooks 事件其实就是本地单机事件,无法很好的团队共享。而 + 刚好能处理这个场景。 Husky Husky 是一个 Git Hook 工具,它允许开发者在...
学习
前端规范2023-07-06
nextjs项目配置eslint+prettier
一、安装 \+ prettier + eslint plugin prettier 二、配置.eslintrc.json 三、配置.prettiterrc.js
学习
前端规范2023-04-17
declare module '*.module.less' {
declare module ' .module.less' { const classes: { readonly \[key: string\]: string }; export default classes; }
前端规范2023-04-08
husky 与 lint-staged安装与配置
一、husky 注:本文引入的 husky 都是 8.0.0 以上的版本,老版本的使用可能与下文描述的不一致! 1\. husky 是什么? husky 的 开篇是这么描述的: Modern native Git hooks made easy (轻松创建现代化的原生 git hooks) Husky improves your commits and more 🐶 woof! 最重要的就是:它可以在项目中植入你设定的 git hoo...

评论

请登录后发表评论

去登录
加载评论中...