工程开发
tooling-setup avatar

tooling-setup

为 React 19 项目提供的生产级开发环境配置,包含 Vite、TypeScript、Biome 及 Vitest,提供严格的类型检查、代码规范、格式化与测试基础设施。

简介

此技能为现代 React 19 应用程序提供标准化且具生产就绪性的基础。专为重视性能、类型安全与可维护性的软件工程师与前端团队设计。通过整合业界标准工具链,它消除了配置新存储库或更新旧项目时常见的设定负担。

配置内容包含使用 Vite 作为构建工具,专为 React 19 优化并通过 Babel 启用 React Compiler。它强制执行严格的 TypeScript 标准,利用 bundler 模式解析以确保高质量且低错误的代码。Biome 被用作一体化的高性能 linter 与格式化工具,取代 ESLint 与 Prettier 以提升开发效率。测试部分由 Vitest 处理,并支持 React Testing Library 与 MSW,以进行强健的 DOM 与 API 测试。

  • 包含 React Compiler 优化构建管线的 React 19 项目脚手架

  • 严格的 TypeScript 配置,包含 noUncheckedIndexedAccess、verbatimModuleSyntax 与 bundler 解析模式

  • 用于 Linting、代码风格强制与自动格式化的零配置 Biome 整合

  • 具备 Vitest、jsdom 与覆盖率报告功能的专业测试基础设施

  • 用于安全客户端配置的环境变量管理模式

  • 为 Biome 与 TypeScript 推荐的 VSCode 设定,实现标准化的 IDE 整合

  • 请在存储库初始设定阶段,或重构构建管线以符合生产标准时使用此技能。

  • 预期的输入为空项目目录或需要依赖项更新与配置标准化的既有代码库。

  • 输出为完整配置的项目环境,包含 package.json 脚本、tsconfig.json、vite.config.ts 与 biome.json 配置文件。

  • 确保安装 pnpm,因为依赖项安装脚本已针对 pnpm 包管理器进行优化。

  • 可通过 React DevTools 浏览器扩展功能观察组件上的 Memo 标记来验证 React Compiler。

  • 请务必将敏感密钥排除在 bundle 之外;依说明文档所示,环境变量应使用 VITE_ 作为前缀。

仓库统计

Star 数
255
Fork 数
31
Open Issue 数
7
主要语言
TypeScript
默认分支
main
同步状态
空闲
最近同步时间
2026年4月29日 13:13
在 GitHub 查看