使用husky + lint-staged助力团队编码规范

小咪咪 2023-02-19 15:23 19阅读 0赞

使用husky + lint-staged助力团队编码规范

  • 写在前面
  • 了解 githooks
  • husky
    • 钩子中执行多个命令
    • hook 拦截
  • lint-staged
  • mrm
  • 关于 prettier 的问题

写在前面

husky 是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 .git/ 目录下增加相应的钩子;比如 pre-commit 钩子就会在你执行 git commit 的触发。

那么我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然,pre-commit 阶段执行的命令当然要保证其速度不要太慢,每次 commit 都等很久也不是什么好的体验。

lint-staged,一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具;这个很实用,因为我们如果对整个项目的代码做一个检查,可能耗时很长,如果是老项目,要对之前的代码做一个代码规范检查并修改的话,这可能就麻烦了呀,可能导致项目改动很大。

所以这个 lint-staged,对团队项目和开源项目来说,是一个很好的工具,它是对个人要提交的代码的一个规范和约束。

了解 githooks

Git Hooks 就是在 Git 执行特定事件(如commit、push、receive等)时触发运行的脚本,类似于“钩子函数”,没有设置可执行的钩子将被忽略。

在项目的 .git/hooks 目录中,有一些 .sample 结尾的钩子示例脚本,如果想启用对应的钩子,只需手动删除后缀,即可。(删除某一个 hook 的后缀 .sample 即可启用该 hook 脚本,默认是不启用的。)

【但是,我们一般不去改动 .git/hooks 里面的文件,因为我们使用 husky 】

husky

  • husky 的安装

    npm i husky -D —registry=https://registry.npm.taobao.org

husky 在安装过程中会在 .git/hooks 文件夹中生成一系列的 git hook 脚本。

需要注意的是:你要留意 husky 的安装信息,是否为你安装了 git 钩子。

如果安装正确的话,可以看到 husky 会打印出如下消息:

  1. > node husky install
  2. husky > setting up git hooks
  3. husky > done

在这里插入图片描述

但也有可能:
在这里插入图片描述

这个就是由于电脑 node 版本的原因,跳过了 Git 钩子安装,相当于是没有安装成功哦~

OK,假设你的 husky 安装是正常的,那么 husky 为你安装的 hooks 将会生效。这样我们在 git commit 的时候会触发 pre-commit 钩子从而触发到 huksy。

我们在 package.json 文件中配置 husky 的钩子需要执行的 命令 或 操作。

  1. "husky": {
  2. "hooks": {
  3. "pre-commit": "echo \"git commit trigger husky pre-commit hook\" "
  4. }
  5. }

这样,在 git commit 的时候就会看到 pre-commit 执行了。
在这里插入图片描述

从 1.0.0 开始,husky 的配置可以使用 .huskyrc.huskyrc.json.huskyrc.jshusky.config.js 文件

钩子中执行多个命令

  • 根据 npm script 的规则,使用 &&

    “husky”: {

    “hooks”: {

    1. "pre-commit": "echo \"git commit trigger husky pre-commit hook\" && npm run test"

    }
    }

  • 如果您更喜欢使用数组,建议的方法是在 .huskyrc.js 中定义它们

    const tasks = arr => arr.join(‘ && ‘)

    module.exports = {

    ‘hooks’: {

    1. 'pre-commit': tasks([
    2. 'npm run lint',
    3. 'npm run test'
    4. ])

    }
    }

hook 拦截

为了阻止提交,pre-commit 脚本必须以非零的退出代码退出。

如果您的提交未被阻止,请检查脚本退出代码。

当然 husky 不止能验证 commit ,也可以进行 push 等其他操作验证,这里就不一一举例了,具体可以参照 npm husky 。


lint-staged

lint-staged 是一个在 git 暂存文件上(也就是被 git add 的文件)运行已配置的 linter(或其他)任务。lint-staged 总是将所有暂存文件的列表传递给任务。

  1. // package.json
  2. "lint-staged": {
  3. "src/**/*.{js,vue}": [
  4. "prettier --write",
  5. "eslint --cache --fix",
  6. "git add"
  7. ]
  8. }

这里 lint-staged 的配置是:在 git 的待提交的文件中,在 src 目录下的所有 .js .vue 都要执行三条命令。前两条一会儿说,后一条是将处理过的代码重新 add 到 git 中。

结合我们前面介绍的 husky,配合 husky 的 pre-commit 钩子,将会形成一个自动化工具链。

  1. "husky": {
  2. "hooks": {
  3. "pre-commit": "lint-staged"
  4. }
  5. },
  6. "lint-staged": {
  7. "src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"]
  8. }

在 commit 之前,将暂存区的内容做一次 代码检查 和 代码美化,然后再添加到暂存区;然后再 commit,完美!!

从 v3.1 开始,您现在可以使用不同的方式进行 lint-staged 配置:

  • lint-staged 在你的对象 package.json
  • .lintstagedrc JSON或YML格式的文件
  • lint-staged.config.js JS格式的文件
  • 使用 —config 或 -c 标志传递配置文件

mrm

mrm 是一个自动化工具。推荐

它将根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 lint-staged,因此请确保在此之前安装并配置所有代码质量工具,如 Prettier 和 ESlint

安装 mrm 并执行 lint-staged 任务:

  1. npm i mrm -D --registry=https://registry.npm.taobao.org
  2. npx mrm lint-staged

此时,将会自动给你安装相关依赖工具,以及相关配置文件。

mrm 文档、mrm api doc

关于 prettier 的问题

prettier 是一个很好的格式化代码的插件,但对已经有一定迭代完成度的代码不推荐使用。使用该插件后,它会将原有的代码也进行格式化,造成很多不可知的问题,我就是前车之鉴,使用 prettier 后,原本已经没有 eslint 问题的代码,又多出了更多的不知道什么原因的报错,只能将代码回退处理。

所以,这也就是我们为什么在 lint-staged 中,执行 prettier 的原因。

-————————(正文完)-————————-

前端学习交流群,想进来面基的,可以加群:
![Vue学习交流][Vue] ![React学习交流][Vue]
或者手动search群号:685486827,832485817;

写在最后: 约定优于配置 —— 软件开发的简约原则
-———————————————- (完)-——————————————————-

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

[Vue]:

发表评论

表情:
评论列表 (有 0 条评论,19人围观)

还没有评论,来说两句吧...

相关阅读

    相关 团队规范之Git规范

    在实际开发中,无论是 Git 版本的规范,还是 Git Commit 的规范,都是一环较重要的部分,因为他们绝对是大有裨益的; 方便跟踪工程历史; 方便快速回溯代

    相关 编码规范

    编码规范 1. 代码清晰度 > 无规矩不成方圆,编程也是有套路的,好的代码不仅要好的性能,还要有好的规范。 > > 如果代码没有按照一定的规范进行编写,那么代码的

    相关 编码规范

    设计原则与设计模式使用好了,能有效地改善代码质量,但非常依赖个人经验。而编码规范简单明了,在提高代码的可读性方面,立竿见影。 1、命名 长度:足够表达含义的情况下,越

    相关 编码规范

     一 命名规则 1)包:命名应该都是名词或名词性词组,全部小写,单词之间用"."分开;一般使用本公司/组织网站域名的逆序后跟具体的软件内部模块名 包命名举例: pac

    相关 PSR规范--php编码规范

    前言:一开始写代码的时候,只是自己觉得怎么舒服怎么写,什么格式都是自己觉得顺眼就怎么安排,没有怎么阅读什么规范的代码,最近读了《PHP The Right Way》,发现写代码