Biome 代码检查：别再等 ESLint 慢吞吞了

Biome 代码检查别再等 ESLint 慢吞吞了毒舌时刻这代码写得跟网红滤镜似的——仅供参考。各位前端同行咱们今天聊聊 Biome。别告诉我你还在用 ESLint Prettier那感觉就像用老爷车跑高速——能跑但慢得让人崩溃。为什么你需要 Biome最近看到一个项目ESLint 检查要 30 秒Prettier 格式化要 10 秒。我就想问你是在写代码还是在等 lint反面教材# 反面教材慢吞吞的 ESLint $ npx eslint src/ # ⏱️ 30秒后... # ✖ 45 problems (30 errors, 15 warnings) $ npx prettier --write src/ # ⏱️ 10秒后... # 50 files formatted # 还要配置一堆插件 # .eslintrc.js - 100 行配置 # .prettierrc - 20 行配置 # 各种 plugin、extends、rules...// .eslintrc.js - 复杂的配置 module.exports { extends: [ eslint:recommended, plugin:typescript-eslint/recommended, plugin:react/recommended, plugin:react-hooks/recommended, plugin:jsx-a11y/recommended, prettier ], plugins: [typescript-eslint, react, react-hooks, jsx-a11y], parser: typescript-eslint/parser, parserOptions: { ecmaVersion: 2020, sourceType: module, ecmaFeatures: { jsx: true } }, rules: { react/react-in-jsx-scope: off, typescript-eslint/explicit-function-return-type: off, // ... 还有 50 条规则 } };毒舌点评这配置100 多行就为了检查代码你是在写代码还是在写配置文件Biome 的正确姿势1. 快速开始# 安装 Biome $ npm install --save-dev biomejs/biome # 初始化配置 $ npx biomejs/biome init # 检查代码 $ npx biomejs/biome check src/ # ⚡ 1秒后... # 格式化代码 $ npx biomejs/biome format src/ --write # ⚡ 0.5秒后...2. 简单配置// biome.json - 一个文件搞定所有 { $schema: https://biomejs.dev/schemas/1.5.3/schema.json, organizeImports: { enabled: true }, linter: { enabled: true, rules: { recommended: true, suspicious: { noConsoleLog: warn } } }, formatter: { enabled: true, indentStyle: space, indentWidth: 2, lineWidth: 80 }, javascript: { formatter: { quoteStyle: single, trailingComma: es5 } } }毒舌点评这才叫简洁一个 JSON 文件替代 ESLint Prettier 的所有配置。3. 使用示例# 检查并格式化 $ biome check --apply src/ # 只检查 $ biome lint src/ # 只格式化 $ biome format src/ --write # 检查特定文件 $ biome check src/components/Button.tsx # CI 模式发现错误时退出 $ biome ci src/4. 与编辑器集成// VS Code settings.json { editor.defaultFormatter: biomejs.biome, editor.formatOnSave: true, editor.codeActionsOnSave: { quickfix.biome: explicit, source.organizeImports.biome: explicit } }5. 脚本配置// package.json { scripts: { lint: biome lint src/, lint:fix: biome lint --apply src/, format: biome format src/ --write, check: biome check src/, check:fix: biome check --apply src/, ci: biome ci src/ } }毒舌点评这才叫现代代码检查工具一个命令搞定 lint format。实战技巧Biome 最佳实践1. 规则配置// biome.json - 详细配置 { linter: { enabled: true, rules: { recommended: true, complexity: { noForEach: error, useOptionalChain: error }, correctness: { noUnusedVariables: error, useHookAtTopLevel: error }, performance: { noDelete: warn }, security: { noDangerouslySetInnerHtml: error }, style: { useConst: warn, useTemplate: warn }, suspicious: { noConsoleLog: warn, noDoubleEquals: error } } }, formatter: { enabled: true, formatWithErrors: false, indentStyle: space, indentWidth: 2, lineWidth: 100, ignore: [node_modules, dist, build] } }2. 忽略文件// biome.json { files: { ignore: [ node_modules, dist, build, *.min.js, coverage ], include: [src/**/*, tests/**/*] } }3. 与 Git Hooks 集成// package.json { lint-staged: { *.{js,ts,jsx,tsx}: [biome check --apply --no-errors-on-unmatched] } }# 安装 husky 和 lint-staged $ npx husky-init npm install $ npm install --save-dev lint-staged # 创建 pre-commit hook $ npx husky add .husky/pre-commit npx lint-staged4. CI/CD 集成# .github/workflows/ci.yml name: CI on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Setup Biome uses: biomejs/setup-biomev2 with: version: latest - name: Run Biome run: biome ci src/5. 性能对比项目ESLint PrettierBiome提升检查时间30s1s30x格式化时间10s0.5s20x配置行数150305x依赖数量50150x6. 迁移指南# 1. 安装 Biome $ npm install --save-dev biomejs/biome # 2. 初始化配置 $ npx biomejs/biome init # 3. 运行检查看看有哪些差异 $ npx biomejs/biome check src/ # 4. 格式化所有文件 $ npx biomejs/biome format src/ --write # 5. 移除 ESLint 和 Prettier $ npm uninstall eslint prettier typescript-eslint/* $ rm .eslintrc.js .prettierrc # 6. 更新 package.json 脚本 # 完成7. 常见陷阱// 陷阱1忘记启用推荐规则 { linter: { rules: { // ❌ 没有 recommended } } } // 正确做法 { linter: { rules: { recommended: true // ✅ } } } // 陷阱2与 Prettier 冲突 // 不要同时使用 Biome 和 Prettier // 选择其中一个 // 陷阱3忽略文件配置不正确 { files: { ignore: [ dist, // ✅ 正确 ./dist // ❌ 不需要 ./ ] } }最后想说的Biome 不是可选的是代码检查工具的未来。别再等 ESLint 慢吞吞了——用上 Biome你的开发体验会质的飞跃。记住好的工具应该让你专注于代码而不是等待。Biome 让你写代码如丝般顺滑。