开发工具链详解
项目中使用的各种开发工具详解，包括类型检查、代码格式化、性能优化工具的最佳实践
开发工具链详解
我们的项目采用了现代化的开发工具链，确保代码质量、开发效率和项目性能。本文档详细介绍每个工具的使用场景和最佳实践。
🛠️ 工具概览
| 工具 | 主要功能 | 执行时间 | 使用场景 | |------|----------|-----------|----------| | TypeScript | 类型检查 | ~7秒 | 完整类型安全 | | oxlint | 快速代码检查 | ~0.05秒 | 日常开发 | | Biome | 格式化+Lint | ~0.4秒 | 代码格式化 | | Knip | 死代码检测 | ~2秒 | 代码清理 |
🚀 TypeScript 类型检查
基础命令
# 完整类型检查
bun type-check
# 分项类型检查 (并行)
bun type-check:components # 组件类型检查
bun type-check:modules # 模块类型检查
# 监听模式
bun type-check:watch
性能优化配置
项目已配置以下优化来提升类型检查性能：
.npmrc 配置:
# 增加内存限制到 8GB
node-options = --max-old-space-size=8192
# 提升 Prisma 相关包
public-hoist-pattern[]=*prisma*
tsconfig.json 优化:
{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo",
"skipLibCheck": true,
"skipDefaultLibCheck": true
}
}
使用建议
- 提交前/CI: 必须运行
bun type-check - 大型重构后: 确保类型安全
- 日常开发: 可使用更快的替代方案
⚡ oxlint - 极速代码检查
oxlint 是我们的主要日常代码检查工具，比传统 ESLint 快 10-100 倍。
核心优势
- 🚀 极速: 0.05秒完成整个项目检查
- 🎯 全面: 检测未使用变量、语法错误、基础类型问题
- 🔧 ESLint兼容: 规则与 ESLint 高度兼容
- ⚡ 多核并行: 充分利用多核 CPU 性能
基本命令
# 快速代码检查 (推荐日常使用)
bun lint:fast
# 直接使用 oxlint
bunx oxlint --tsconfig tsconfig.json src
# 检查并输出详细信息
bunx oxlint --tsconfig tsconfig.json src --verbose
与 TypeScript 的区别
| 功能 | oxlint | TypeScript | |------|--------|------------| | 未使用变量 | ✅ | ✅ | | 基础语法错误 | ✅ | ✅ | | 接口兼容性 | ❌ | ✅ | | 泛型约束 | ❌ | ✅ | | 高级类型推断 | ❌ | ✅ |
最佳实践
# 日常开发工作流
bun lint:fast # 0.05秒，快速反馈
# 提交前工作流
bun lint:fast && bun type-check # 快速检查 + 完整类型检查
🎨 Biome - 格式化和代码整理
Biome 提供代码格式化、导入排序等一体化功能。
主要功能
- 代码格式化: 统一代码风格
- 导入排序: 自动整理 import 语句
- 自动修复: 修复可修复的代码问题
- 配置简单: 零配置即可使用
基本命令
# 格式化所有代码
bun format
# Lint 检查
bun lint
# 自动修复
bun lint:fix
# 不安全修复 (谨慎使用)
bunx biome lint . --fix --unsafe
配置文件
项目使用 biome.json 配置文件，主要规则包括：
- 启用推荐规则
- 关闭严格模式下的
noExplicitAny - 保留未使用的导入检测
使用建议
- 保存时: 配置编辑器自动格式化
- 提交前: 运行
bun lint:fix - CI 检查: 确保
bun lint通过
🧹 Knip - 死代码检测
Knip 帮助我们检测和清理未使用的代码、文件和依赖。
检测能力
- 🔍 未使用的文件和导出
- 📦 未使用的依赖包
- 🔧 缺失的依赖
- 🎯 支持各种框架和工具
基本命令
# 检测未使用的代码
bun lint:unused
# 生产环境检测 (更严格)
bun lint:unused:production
使用场景
- 代码重构后: 清理无用代码
- 依赖优化: 减少 node_modules 大小
- 定期维护: 保持代码库整洁
🔄 推荐工作流
日常开发 (95% 的情况)
# 1. 快速代码检查 (0.05秒)
bun lint:fast
# 2. 代码格式化 (0.4秒)
bun lint:fix
# 3. 开发服务器
bun dev
提交前检查
# 完整检查流程
bun lint:fast && bun lint:fix && bun type-check
CI/CD 流水线
# 1. 代码格式检查
bun lint
# 2. 快速代码检查
bun lint:fast
# 3. 完整类型检查
bun type-check
# 4. 死代码检测 (可选)
bun lint:unused
⚡ 性能优化技巧
1. 并行执行
利用多核 CPU 并行运行检查：
# 并行运行多个检查
bun lint:fast & bun type-check & wait
2. 增量检查
- TypeScript 使用增量编译 (
.tsbuildinfo) - oxlint 和 Biome 本身就很快，无需缓存
3. 内存优化
项目已配置 8GB 内存限制，确保大型项目类型检查顺畅：
# 如果遇到内存不足，可以临时增加
NODE_OPTIONS="--max-old-space-size=16384" bun type-check
🛠️ IDE 配置推荐
VS Code 设置
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "biomejs.biome",
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"typescript.preferences.preferTypeOnlyAutoImports": true
}
推荐插件
- Biome: 官方 Biome 扩展
- TypeScript Importer: 自动导入
- Auto Rename Tag: 标签重命名
📊 工具选择指南
| 场景 | 推荐工具 | 理由 | |------|----------|------| | 日常编码 | oxlint + Biome | 速度快，反馈及时 | | 类型安全 | TypeScript | 完整的类型系统 | | 代码清理 | Knip | 检测死代码 | | CI/CD | 全部工具 | 确保代码质量 | | 性能优化 | oxlint | 73倍性能提升 |
🔧 故障排除
oxlint 问题
# 如果 oxlint 报错过多，可以先禁用某些规则
bunx oxlint --allow suspicious --tsconfig tsconfig.json src
TypeScript 缓存问题
# 清理 TypeScript 缓存
rm .tsbuildinfo
bun type-check
Biome 配置问题
# 检查 Biome 配置
bunx biome check --print-config
📚 相关文档
通过合理使用这些工具，我们可以在保证代码质量的同时，最大化开发效率。记住：工具是手段，写出好代码才是目的。