前端代码自动格式化之husky

Posted 夜月孤狼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端代码自动格式化之husky相关的知识,希望对你有一定的参考价值。

在使用git hooks的时候,我们一般会使用husky工具,它可以使本地git hooks变的更加的简单,我们一般会这样使用;

1、安装husky

npm install husky --save-dev  
or 
yarn add husky -D

2、配置husky文件

//.huskyrc.json
{
    "hooks":{
    "pre-commit":"npm test && npm run foo"
  }
}

or

//package.json
{
  "husky":{
    "hooks":{
      "pre-commit":"npm test && npm run foo"
    }
  }
}

以上就是husky配置的git 钩子,我们这里只用了pre-commit钩子,husky是支持所有的钩子的;有了上边的配置,在我们执行git commit命令的时候,就会先执行husky中配置的hooks;

以上的配置是husky v4版本之前的使用方法,v6版本发布后,使用方式上有了很大的改变;可以说是它的设计发生了变化;

v6版本已不在使用.huskyrc.js文件,同时也不支持在package.json文件中配置,而是使用了.husky/目录中配置的单个git钩子;

husky为什么放弃了传统方式的配置呢

v4版本之前husky为了能够运行用户在.huskyrc.json中创建的任何钩子,它不得不将所有的钩子都安装在.git/hooks目录中。当触发到钩子脚本的时候,每个脚本都会先检查.huskyrc.json文件中是否有相应的钩子定义;这样的好处就是用户可以随意的添加、更新和删除钩子,所做的更改会自动的生效;缺点就是,即使没有任何东西要运行,该钩子节点也会被启动;

在当时husky有过这样的设想,就是只启动在.huskyrc.json文件中配置的钩子,但随后的问题就又出现了,如果改动了.huskyrc.json文件中的钩子定义,husky将不会自动工作,因为在.git/hooks目录里还没有启动相应的钩子脚本,所以保证两个地方的配置同步成了一个难题;

直到2016年,Git 2.9引进了core.hooksPath,可以设置Git hooks脚本的目录,这个引进也就是新版husky改进的基础;

  • husky install命令告诉Git使用.hooks目录作为钩子脚本目录,实际上就是修改了core.hooksPath的值;
  • husky add创建了一个独立的shell脚本

这样也就解决了启动单一的钩子脚本和所有的配置都在一个文件目录下;但是这样也就在根目录下生成了一个.hooks目录,看起来不爽的话, 你也可以指定让.hooks放到config目录下;

v6版本的具体使用方法

自定配置(推荐)

husky-init是一个一次性命令,可以在项目中快速添加husky配置;

npx husky-init && npm isntall

上边命令会设置husky,修改package.json并且创建了一个可执行的pre-commit脚本样例,当你git commit命令式,默认会执行npm test

hooks add添加其他hooks

npx hooks add .hooks/commit-msg \'npx --no-install commitlint --edit "$1"\'

手动配置

1、 安装husky

npm install husky --save-dev

2、修改git hooks默认目录

npx husky install

3、如果想安装后自动启用hooks,请编辑package.json

{
  "scripts":{
        "prepare":"husky install"
  }
}
yarn2不支持prepare,可以修改为postinstall

4、创建hooks,语法:husky add <file> [cmd]

npx husky add .husky/pre-commit "npm test"

执行git commit -m "test" 命令,如果npm test失败,将终止提交

5、卸载husky

npm uninstall husky && git config --unset core.hooksPath

其他用法

1、推荐在package.json中添加husky,您可以使用lernafilter等工具来只运行已更改包中的脚本

(1) 添加hooks

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

(2) 在package.json文件中添加pre-commit

{
    "script":{
        "pre-commit":"npm run test && eslint"
    }
}

2、自定义.husky目录

npx husky install .config/husky

3、绕过钩子

git commit -m "test" --no-verify

以上是关于前端代码自动格式化之husky的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 Git 和 Husky 添加提交钩子并实现代码任务自动化

.NET 也有 Husky 了

vue 代码规范 之 husky

前端代码自动格式化之Git hooks

前端面试题之手写promise

使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式