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

前言

2023年已经过了大半，都快2024年了，搜了一下前端代码规范的解决方案，翻来覆去还是husky、eslint、prettier、lint-staged、commitlint......

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

配置步骤繁琐。因为这些工具都是散装的，组合起来步骤异常多，如果再想摸索出最佳实践少说两天的时间过去了。
配置文件又多又杂 。当你配置完，就算是最佳实践的情况下，你的项目都将会增加非常多的配置文件。.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.json 的 scripts 中，增加两行：

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 规范

代码校验失败的情况

代码校验通过，但是提交的信息不通过的情况

代码和提交信息都没问题的情况

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

自定义规则

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

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

首先安装你自己的 eslint 配置，然后就在 .eslintrc.js 或 eslint.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 也同理，就不赘述了。

总结

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

给个星🌟

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