抛弃 ESLint + Prettier？基于 Biome + Husky 的下一代前端工程化实践

引言：天下苦 ESLint 配置久矣

痛点：你是否厌倦了配置 ESLint 和 Prettier 的冲突？你是否觉得大型项目的 Lint 检查速度越来越慢？
破局：介绍 Biome ------ 基于 Rust 编写，集代码格式化（Formatter）和代码检查（Linter）于一体，速度快到飞起，配置只有在一个文件。
目标：本文将带你用 Biome + Husky + lint-staged 搭建一套极速、现代化的代码提交规范体系。

第一部分：主角登场 ------ 为什么选择 Biome？

极速体验：基于 Rust，比 Prettier 快 35 倍，瞬间完成格式化。
All-in-One ：不再需要 eslint-plugin-prettier 或 eslint-config-prettier 来解决冲突。Biome 既管长相（Format），又管质量（Lint）。
开箱即用：零配置也能跑，拒绝"配置地狱"。

第二部分：实战配置 ------ 三步走

1. 安装依赖 不要再装一堆 eslint 插件了，现在清爽多了：

复制代码

npm install --save-dev @biomejs/biome husky lint-staged

2. 初始化 Biome 运行命令生成 biome.json：

复制代码

npx @biomejs/biome init

展示一个简单的 biome.json 配置示例（开启 formatter 和 linter）：

javascript 复制代码

{
  // Biome工具的中央控制面板
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": { // 导入优化
    "enabled": true  // 自动排序顶部import
  },
  "linter": { // 静态检查规则
    "enabled": true,
    "rules": {
      "recommended": true // 开启官方推荐的静态检查规则
    }
  },
  "formatter": { // 全局格式化设置
    "enabled": true, 
    "formatWithErrors": false,   // 代码有错误时 不进行格式化
    "indentStyle": "space",  // 缩进方式：空格
    "indentWidth": 2,  // 缩进大小：两个空格
    "lineEnding": "lf", // 换行符：强制使用LF
    "lineWidth": 100  // 单行最大长度100ch
  },
  "javascript": { // 针对JS/TS的特别定制
    "formatter": {
      "quoteStyle": "single",  // 引号风格： 强制使用单引号
      "semiColons": "always"  // 分号习惯：每行末尾必须有分号
    }
  }
}

3. 配置 Husky + lint-staged (守门员) 这是工程化的核心。我们不仅要快，还要拦住烂代码入库。

初始化 Husky : npx husky init
配置 package.json:

javascript 复制代码

{
  "scripts": {
    "format": "biome format --write ./src",   // 修正格式
    "lint": "biome lint ./src", // 检查语法问题 不修正
    "check": "biome check --apply ./src", // 检查并修正格式与语法问题
    "prepare": "husky" // npm install时自动运行 
  },
  "lint-staged": {
    // 关键点：不再分别调 eslint 和 prettier，直接调 biome check
    "*.{js,ts,cjs,mjs,d.cts,d.mts,json,jsonc}": [
      "biome check --apply --no-errors-on-unmatched"
    ]
  }
}

修改 .husky/pre-commit:

npx lint-staged

第三部分：核心命令解析 (干货)

解释一下 biome check --apply 这个神级命令到底做了什么：

Format: 格式化代码（缩进、引号）。
Lint: 检查代码逻辑错误。
Organize Imports: 自动去除无用的 import 并排序。
--apply: 能自动修的错误（比如 var 变 const），直接帮你修了，不需要手动改。

第四部分：对比与总结

对比：
- 旧方案：ESLint + Prettier + 5个插件 + 3个配置文件 = 🐢 慢，易冲突。
- 新方案：Biome + 1个配置文件 = 🚀 极速，统一。
结论：如果你的新项目（特别是 TypeScript 项目）想要追求极致的开发体验和构建速度，Biome 是目前的最佳选择。虽然它的规则生态不如 ESLint 丰富，但对于 95% 的常规开发场景，它已经完美胜任。