Biome工具：现代化前端代码质量工具

Biome工具现代化前端代码质量工具前言各位前端小伙伴不知道你们有没有遇到过这种情况项目中有多个代码检查工具配置复杂我曾经维护过一个前端项目同时使用ESLint、Prettier、Stylelint配置文件一大堆。后来我切换到Biome一个工具搞定所有Biome核心特性为什么选择BiomeBiome是一个现代化的前端代码质量工具具有以下优势一体化集格式化、lint、检查于一体快速基于Rust开发性能优秀零配置开箱即用无需复杂配置语言支持支持JavaScript、TypeScript、JSX、CSS等Biome架构┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 解析阶段 │ │ 检查阶段 │ │ 修复阶段 │ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │ │ │ │ 1. 解析源代码 │ │ │───────────────────────│ │ │ │ │ │ │ 2. 进行检查 │ │───────────────────────│ │ │ │ │ │ │ │ 3. 自动修复 │ │ │────────────────────────│Biome配置详解基本配置// biome.json { $schema: https://biomejs.dev/schemas/1.0.0/schema.json, formatter: { enabled: true }, linter: { enabled: true } }格式化配置{ formatter: { enabled: true, indentStyle: space, indentWidth: 2, lineWidth: 80, lineEnding: lf, formatWithErrors: false } }Linter配置{ linter: { enabled: true, rules: { recommended: true, correctness: { noUndefinedVariable: error, noUnusedVariables: warn }, style: { noSingleVarDeclarations: off } } } }目标文件配置{ files: { include: [src/**/*], exclude: [node_modules/**, dist/**] } }Biome使用命令基本命令# 检查文件 npx biome check src/ # 修复问题 npx biome check --apply src/ # 格式化文件 npx biome format src/ # 格式化并修复 npx biome check --apply-unsafe src/集成到项目{ scripts: { lint: biome check src/, lint:fix: biome check --apply src/, format: biome format src/, format:fix: biome format --write src/ } }Biome VS Code集成安装插件{ recommendations: [biomejs.biome] }配置settings.json{ editor.defaultFormatter: biomejs.biome, editor.formatOnSave: true, editor.codeActionsOnSave: { quickfix.biome: true } }Biome对比其他工具Biome vs ESLint Prettier特性BiomeESLint Prettier安装复杂度低高配置复杂度低高运行速度快慢功能完整性中高生态成熟度低高Biome vs Stylelint特性BiomeStylelintCSS支持基础完整运行速度快中等规则数量少多配置复杂度低高Biome最佳实践1. 使用推荐规则{ linter: { rules: { recommended: true } } }2. 自定义规则{ linter: { rules: { recommended: true, correctness: { noUndefinedVariable: error }, style: { noSingleVarDeclarations: off } } } }3. 忽略文件{ files: { exclude: [ node_modules/**, dist/**, *.config.js ] } }4. CI集成# .github/workflows/ci.yml name: CI on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 - run: npm install - run: npx biome check src/Biome常见问题问题1规则不够用解决方案使用ESLint补充等待Biome更新提交Issue问题2VS Code插件问题解决方案更新插件检查配置重启VS Code问题3性能问题解决方案检查文件数量使用exclude配置升级Biome版本总结Biome是一个现代化的前端代码质量工具通过一体化设计和高性能特性提供了更好的开发体验一体化一个工具搞定格式化和lint快速Rust编译优化零配置开箱即用现代化支持最新语法现在开始使用Biome提升代码质量吧你的代码会感谢你的最后一句忠告Biome还在发展中一些高级功能可能需要ESLint补充