前端工具链 vite-plus 【一】

安装 vp

macOS / Linux

curl -fsSL https://vite.plus | bash

Windows

irm https://vite.plus/ps1 | iex

Skills

npx skills add https://github.com/absolutelyskilled/absolutelyskilled --skill vite-plus

快速打开方式

先使用 pnpm create vite 创建一个自己的模板，再使用 vp migrate 迁移模板。

Oxlint

官方把核心的 lint 都内置了，可以通过 plugin 来引入：

Plugin name	Default	Source
eslint	Yes	ESLint core rules
typescript	Yes	TypeScript rules from typescript-eslint
unicorn	Yes	eslint-plugin-unicorn
react	No	eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-refresh
react-perf	No	eslint-plugin-react-perf
nextjs	No	@next/eslint-plugin-next
oxc	Yes	Oxc-specific rules and selected rules ported from deepscan
import	No	eslint-plugin-import (also equivalent to eslint-plugin-import-x)
jsdoc	No	eslint-plugin-jsdoc
jsx-a11y	No	eslint-plugin-jsx-a11y
node	No	eslint-plugin-n
promise	No	eslint-plugin-promise
jest	No	eslint-plugin-jest
vitest	No	@vitest/eslint-plugin
vue	No	eslint-plugin-vue rules that work with script tags

其他的第三方 ESLint plugin 都是通过 js plugin 来转入的。这个还是来源于 plugin 的接口兼容，参考 write-js-plugins。

VS Code 配置

// .vscode/settings.json
{
  "biome.enabled": false,
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "explicit"
  },
  "oxc.configPath": ".oxlintrc.jsonc",
  "oxc.fmt.configPath": ".oxfmtrc.jsonc"
}

.oxlintrc.jsonc

{
  "plugins": [
    "import",
    "jsdoc",
    "promise",
    "react",
    "react-perf",
    "jsx-a11y"
  ]
}

.oxfmtrc.jsonc

{
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "sortImports": {},
  "sortTailwindcss": {},
  "sortPackageJson": true
}

目前不太好的地方

一个配置管全部

默认会在 vite.config.ts 存在 lint、fmt、staged、vitest 等配置。首先集中在一个文件不太合适（内容太多不太好阅读），然后就是 VS Code 大量插件目前不兼容这种配置的读法。所以还是建议写在外面：.oxfmtrc.jsonc、.oxlintrc.jsonc、vitest.config.ts 还是建议写在外面。

Oxlint 没有 Vue Parser（等待生态吧）

这一方面还是只能 Oxlint 和 ESLint 结合使用。

Tips：因为没有 Vue parser，所以与模板 Vue 相关的 plugin 不会生效。

没有集成 Commitlint

好的地方

Stage

集成了 stage，可以使用他的 .vite-hooks/commit-msg、.vite-hooks/pre-commit。

Node.js 版本管理

vp 提供了 Node.js 版本管理的功能，可以管理 Node.js 版本。

依赖安装

vp 提供了依赖安装的功能，可以安装依赖：vp install。

AI

相当于一个工具给 AI，从创建到整体项目的周期都在使用一个工具 vp。

总结

React 项目可以梭哈了。Vue 嘛，也可以，不过要配合 ESLint。