SuperAPI AI 工具集

tooling-setup

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:在搭建新项目或更新工具配置时,为 React 19 前端项目提供 Vite、TypeScript、Biome、Vitest 的配置方案。

主要能力:Vite 中集成 React 19 与 React Compiler(通过 @vitejs/plugin-react 的 babel 插件,React Compiler 需最先运行,可用 DevTools 的“Memo ✨”标记验证);TypeScript 采用 strict 与 bundler 模式,包含 moduleResolution: "bundler"、verbatimModuleSyntax、noUncheckedIndexedAccess 等选项,types 指定 vite/client 与 vitest;Biome 同时承担格式化与 lint,替代 ESLint + Prettier,并给出 biome.json 的 formatter、linter 配置;Vitest 使用 jsdom 环境与 setupFiles,配合 @testing-library/jest-dom,覆盖率输出 text 与 html;环境变量通过 import.meta.env 读取,暴露给客户端的变量需以 VITE_ 前缀,密钥不得放入客户端包;还提供 package.json scripts 与 VSCode 扩展、格式化设置建议。

使用方式:核心依赖用 pnpm add react@rc react-dom@rc,开发依赖包括 vite、@vitejs/plugin-react、typescript、@biomejs/biome、babel-plugin-react-compiler、vitest、@testing-library/react、@testing-library/jest-dom、@testing-library/user-event、jsdom、msw,以及 TanStack 与 axios、zod 等。Biome 用 npx @biomejs/biome init 初始化,npx biome check . 检查,npx biome check --write . 自动修复。测试用 npx vitest(监听模式)、npx vitest run(单次)、npx vitest --coverage(覆盖率)。

适用场景:React 19 新项目初始化、既有项目的工具配置升级。

限制:资料未提供各工具的具体版本号、安装命令之外的迁移步骤、性能数据或除上述平台外的兼容性说明;api 地址、分析 ID 等环境变量仅为示例,需按实际填写。