快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 帮助到你,动动你发财的小手点个星🌟吧。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek