Vite+ 发布 Beta 版本，一个命令搞定前端工具链

最近看到 Vite+ 发了 Beta 版，试了一下，确实有点意思。简单来说，它就是把你项目里那些乱七八糟的配置（ESLint、Prettier、TypeScript 校验、测试、提交检查……）全部整合到一起，一个 viteplus check 命令搞定。

这玩意儿解决什么问题？

用过前端脚手架的兄弟应该都懂：项目初始化完，光配 lint、format、test、commit hook 这些就得折腾半天。Vite+ 的思路是——你只管写代码，工具链的事交给我。

具体来说，它提供了一套开箱即用的“质量检查”流程，包括：

• 代码风格（ESLint + Prettier）
• 类型检查（TypeScript）
• 单元测试（Vitest）
• 提交前检查（lint-staged）

而且不需要你手动装一堆插件，一个命令全部搞定。

怎么用？

安装

# 全局安装
npm install -g viteplus

# 或者项目里装
npm install viteplus --save-dev

初始化配置

在项目根目录跑：

viteplus init

它会自动生成 viteplus.config.ts，你可以在里面配置需要检查的项目：

// viteplus.config.ts
import { defineConfig } from 'viteplus'

export default defineConfig({
  // 启用哪些检查
  lint: true,        // ESLint
  format: true,      // Prettier
  typeCheck: true,   // TypeScript 类型检查
  test: true,        // Vitest 单元测试
  commitCheck: true  // commit 前检查
})

运行检查

# 一键执行所有检查
viteplus check

# 只跑 lint
viteplus check --lint

# 只跑测试
viteplus check --test

# 检查并自动修复
viteplus check --fix

执行结果会在终端显示每个检查项的通过/失败状态，失败的话会给出具体错误信息。

集成到 Git Hook

# 自动配置 husky + lint-staged
viteplus setup-husky

之后每次 git commit 前，它会自动跑一遍配置好的检查，只有全部通过才能提交。

实际跑一下

我用一个 Vue3 + TypeScript 项目试了试，项目里有 ESLint 和 Prettier 配置，但之前都是手动跑。

跑 viteplus check 之后：

✔ ESLint passed (0 errors, 2 warnings)
✔ Prettier passed (1 file formatted)
✔ TypeScript check passed
✔ Vitest passed (12 tests, 0 failures)

整个过程大概 15 秒，比我自己一个个跑快不少。而且它把结果聚合展示，一眼就能看到哪里有问题。

和同类工具对比

工具	特点
Vite+	专为 Vite 项目设计，集成度高，配置简单
lint-staged	只做 git 暂存区检查，需要自己拼装工具链
husky	只负责 git hooks，不提供检查逻辑
eslint + prettier	需要手动组合，配置繁琐

Vite+ 相当于把上面这些东西打包了，而且还加了个统一的入口 check 命令。

需要注意的点

1. 目前还是 Beta，可能会有 bug，生产环境慎用
2. 它依赖 node >= 16，老项目可能跑不起来
3. 如果你的项目已经用了自定义的 ESLint/Prettier 配置，Vite+ 会尝试读取，但某些高级配置可能不兼容
4. 测试默认用 Vitest，如果你用 Jest 可能需要额外配置

总结

Vite+ 的思路挺讨巧的——前端工具链越来越复杂，与其让开发者自己拼乐高，不如直接给一个集成好的“工具箱”。对于新项目或者团队规范不明确的情况，直接用 Vite+ 省心省力。

如果你的项目已经是 Vite 生态，而且不想折腾那些重复的配置，可以试试。反正 npm install 一下，大不了删了也不亏。

官方文档：viteplus.dev
GitHub：github.com/viteplus/viteplus