专栏首页编程之旅使用 husky 和 lint-staged 来构建你的前端工作流

使用 husky 和 lint-staged 来构建你的前端工作流

ESLint 是一个在前端工具链中被众人熟知的代码检查工具,它能够被开发者灵活的配置,使其能够达到我们提前制定好的代码规范的要求,并且在编码过程中实时检测输入的代码,对于不符合代码规范的代码警告或报错。不得不说,在有了 ESLint 这个工具之后,团队之间开发维护会舒服很多,因为在强制约束下,你只需要去理解代码本身的含义就可以了,对于风格的问题则少了很多麻烦。

既然 ESLint 这么好用,那我们为什么又要引入今天要介绍的这两种工具呢?因为在日常的团队工作中,自觉地同学会将 ESLint 的警告或报错修复了再提交代码,而总有一些不自觉的,对于代码风格不重视的同学,会不管报错,直接将代码风格不符合规范的代码提交到 git 仓库中,久而久之随之项目的代码数量越来越多,ESLint 报错的地方也会越来越多,想要一个一个修复实在是积重难返。于是当我在使用 Vant 这个前端开源组件库的时候,提交代码的过程中发现他们在 commit 之前会检查你提交的代码是否规范,当时就觉得这个非常实用,后来发现用 git 提供的一组 hook 可以实现这样的功能,git commit 是最常用的命令之一,它可以触发四个 hook ,分别是 pre-commit, prepare-commit-msg, commit-msgpost-commit。 从字面上猜测着四个 hook 分别对应了 “commit 之前”,“准备 commit log message 的时候”,“生成 commit log message 的时候”,“commit 之后”四个阶段。

而我们要解决我们的问题,其实只需要在 'pre-commit' 这个阶段去写一段脚本,就能解决我们检测代码的问题。

正当我准备写脚本来解决这个问题的时候,发现 github 上有一个已经被造好的轮子,有很多的 star,于是乎,本着不重复造轮子的精神,我去看了一下这两个工具的文档。

husky

husky 这个库,老师说我看他的文档的时候看笑了,不为别的,就为了这个命名。我的理解是作者觉得这个库的作用是看(chai)家护院的二哈么?

Husky can prevent bad git commit, git push and more ? woof!

Husky 能够帮你阻挡住不好的代码提交和推送。一句话很精准的说明了这个库的意义,而配置也非常简单,

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

就像这样,在我们的 package.json 中配置 husky,并且在对应的 git hook 阶段来执行对应的命令。于是乎,不用繁琐的去配置 git hook 阶段的脚本文件了,提供对应的 node 操作变好。

lint-staged

lint-stage 这个库是这么解释它的存在的。

在你提交代码之前,Linting 的运行是更有意义的。当你这样去做了,那么就会有更少的错误进入你的代码库。

有多种方式能够配置 lint-staged,例如在 package.json 中添加对应的对象,例如使用 JSON 或者 YML 文件来配置,例如写一个 js 文件来配置等等。

而鉴于我们的 husky 使用了 package.json 的方式来配置,那么 lint-staged 也保持统一使用同样的方式好了。

// in package.json
{
  "lint-staged": {
    "*.{js, vue, css}": [
      "eslint",
      "git add"
    ]
  }
}

当你这样配置完成,在你的 git commit 之前,会自动触发 eslint 检查,如果你的代码风格没问题,commit 会成功,否则提交会失败哦。

对于这样好的工具,闭着眼睛就能按 star 了,统一团队的代码风格,真的很重要。能够让错误防范于未然。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《Clean Code》 读书小节(二)

    之前在看了《Clean Code》这本书的前两章时,就写下了第一篇读书小节,而随着读书的深入,便决定再总结一下后面一部分的读书心得。

    Originalee
  • Objective-C开发编码规范

    其实大多数的时间,我们写出来的代码并不仅仅是给自己看的,在协同开发中还有很多人会来Review你的代码,因此,为了不让别人吐槽自己的代码,必须要养成良好的习惯,...

    Originalee
  • 简单的编程体会

    今天的这篇博文,我不谈及具体的编程技术,只想从这段时间的学习以及写代码的过程中,分享一下自己的编程体会。

    Originalee
  • 关于git的reset指令说明-soft、mixed、hard

        在开发过程中,git的版本管理越来越普及。在版本管理中,最常用和最重要的是重置提交的版本,恢复后悔做了的事。大家都知道用reset命令。但是有几种形态需...

    一夕如环
  • git hook实践心得

    优秀的团队必不可缺少源代码的质量管理,比如eslint、sasslint等代码检测工具,借助git hook能力,我们可以将这些工具无缝地整合到git开发工作流...

    IMWeb前端团队
  • 【编程基础】C++引用简单介绍

    对于习惯使用C进行开发的朋友们,在看到c++中出现的&符号,可能会犯迷糊,因为在C语言中这个符号表示了取地址符,但是在C++中它却有着不同的用途,掌握C++的&...

    程序员互动联盟
  • Git 修改已提交 commit 的信息

    由于 Github 和公司 Git 使用账号不一样,偶尔没注意,提交出错后就需要修改 commit 信息。

    叨叨软件测试
  • 一个奇怪的链接问题

    链接是代码生成可执行文件中一个非常重要的过程。我们在使用一些库函数时,有时候需要链接库,有时候又不需要,这是为什么呢?了解一些链接的基本过程,能够帮助我们在编译...

    编程珠玑
  • 小程序中rpx与px

    pt与px pt称为逻辑分辨率 pt大小与屏幕分辨率有关系,简单可以理解为长度与视觉单位 px是指物理分辨率,与屏幕尺寸没有关系 小程序中的rpx ? 屏幕分辨...

    听城
  • OC基础Category和Extension区别

    表现形式上,Category有名称,有自己的.m文件,extension没有名称看起来像个匿名的分类,没有.m文件。 Category也可以没有名称,这样两者在...

    Light413

扫码关注云+社区

领取腾讯云代金券