快2024年了你还在用husky、eslint、prettier来规范前端代码?

前言

2023年已经过了大半,都快2024年了,搜了一下前端代码规范的解决方案,翻来覆去还是huskyeslintprettierlint-stagedcommitlint......

这些方案有两个最大的问题:

  • 配置步骤繁琐。因为这些工具都是散装的,组合起来步骤异常多,如果再想摸索出最佳实践少说两天的时间过去了。
  • 配置文件又多又杂 。当你配置完,就算是最佳实践的情况下, 你的项目都将会增加非常多的配置文件。.eslintrc/.prettierrc/.husky/commitlint.config.js/lint-staged.config.js等等,而且每个配置文件的内容还不简单。

如果你的参与的项目不止一个代码仓库,每个仓库的可能都或多或少有差异,这个仓库能好好提交,另一个仓库却老是报错😂。这酸爽......

2024年该用什么

作为程序员,能一步到位就不要两步,能一行配置解决就不要两行。废话少说,直接上干货:

git-validator

简单翻译一下:

git-validator 通过在提交阶段自动检查代码风格和Git提交信息来提高代码质量。只需一个包两个步骤零配置,一网打尽你所有代码质量问题。

下面介绍一下用法。

安装

首先在你的项目根目录安装 git-validator:

sh 复制代码
# npm 项目使用如下命令
npm install git-validator -D
# pnpm 项目使用如下命令
pnpm add git-validator -D

配置脚本

在你的项目根目录的 package.jsonscripts 中,增加两行:

json 复制代码
{
  "scripts": {
    "postinstall": "git-validator install",
    "style": "git-validator",
    "style:update": "git-validator -u"
  }
}
  • postinstall 命令用于将钩子文件写到 .git/hooks 文件夹内。说白了,写完以后,以后你提交代码都会被自动校验代码风格(不会全量检查,只会检查改动的,加快检查速度)和提交信息的格式。
  • style 命令用于全量校验整个代码仓库的代码风格。
  • style:update 命令用于全量校验整个代码仓库的代码风格,如果有能自动修复的,就帮你自动修复掉。

配置以上脚本,运行一下 postinstall 命令让钩子文件写到.git/hooks 文件夹内。

sh 复制代码
# npm 项目使用如下命令
npm run postinstall
# pnpm 项目使用如下命令
pnpm run postinstall

到这里,你就可以开始愉快地提交代码了。这个库会将你所提交的代码会先经过 eslint 检查一下逻辑问题,比如 async 函数忘了加 await 的情况,然后会经过 prettier 检查一下缩进、分号、单双引号等格式问题。然后会检查你的提交信息,需要符合 Conventional Commits 规范

  1. 代码校验失败的情况
  1. 代码校验通过,但是提交的信息不通过的情况
  1. 代码和提交信息都没问题的情况

到这里,你就掌握了这个库的核心用法,你会发现这过程除了配置一下 package.json > scripts,并没有增加任何配置。

自定义规则

等等,你用了两天,发现内置的规则太严格,想要使用自己公司内的 ESLint 规则?

这也简单,只需要在项目根目录添加你自己的 .eslintrc.jseslint.config.js 文件就行。这个库会在执行代码检查时检测到并使用你自己的规则。

首先安装你自己的 eslint 配置,然后就在 .eslintrc.jseslint.config.js 写你自己的配置即可,这里以 @antfu/eslint-config 为例。

sh 复制代码
npm install @antfu/eslint-config -D
js 复制代码
// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu()

prettier 也同理,就不赘述了。

总结

  1. 传统的配置 husky/eslint/prettier/commitlint/lint-staged 的方式不统一、步骤多、配置多,不推荐。
  2. git-validator 提供了一个统一的包,只需装一个,解决前端和 Node 工程代码和提交规范问题。而且步骤简单,可以做到零配置文件。

给个星🌟

😆如果你觉得这篇博客和这个 git-validator 帮助到你,动动你发财的小手点个星🌟吧。

相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
爱编程的喵9 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js