跳到主要内容

Biome

Biome 是一个快速的一体化代码格式化、lint 工具，旨在替代 ESLint 和 Prettier 的组合。它使用 Rust 编写，具有极快的性能。

安装​

npm install --save-dev @biomejs/biome

配置文件​

在项目根目录创建 biome.json 文件：

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "error",
        "useTemplate": "error"
      },
      "suspicious": {
        "noExplicitAny": "error",
        "noConsoleLog": "warn"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf",
    "ignore": [
      "node_modules/**",
      "dist/**",
      "build/**"
    ]
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingComma": "all",
      "semicolons": "always"
    }
  }
}

主要特点​

  • 统一的工具链，无需配置多个工具
  • 极快的执行速度（比 ESLint + Prettier 快 20-50 倍）
  • 内置格式化和 lint 功能
  • 支持自动修复
  • 支持导入语句排序
  • 默认配置经过精心设计
  • 支持增量检查，提高大型项目的性能

常用命令​

# 格式化代码
npx biome format .

# 运行 lint
npx biome lint .

# 检查和修复问题
npx biome check --apply .

# 仅检查暂存的文件
npx biome check $(git diff --staged --name-only)

# 使用 --verbose 查看详细信息
npx biome check --verbose .

# 检查特定文件类型
npx biome check "src/**/*.{js,ts,jsx,tsx}"

常见规则配置​

1. 导入语句排序​

{
  "organizeImports": {
    "enabled": true,
    "groupMode": "maintain",  // 保持现有的导入组
    "groups": [
      "react",               // React 相关导入
      "type",               // 类型导入
      "external",           // 外部依赖
      "internal",           // 内部模块
      "style"               // 样式文件
    ]
  }
}

2. 代码风格规则​

{
  "linter": {
    "rules": {
      "style": {
        "useBlockStatements": "error",
        "useShorthandArrayType": "error",
        "noVar": "error",
        "useConst": "error"
      }
    }
  }
}

VS Code 集成​

  1. 安装 Biome VS Code 插件
  2. 在 settings.json 中添加：
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": true,
    "quickfix.biome": true
  }
}

从 ESLint/Prettier 迁移​

  1. 删除 ESLint 和 Prettier 相关依赖：
npm uninstall eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier
  1. 删除配置文件：
  • .eslintrc.js
  • .prettierrc.js
  • .prettierignore
  1. 安装并配置 Biome：
npm install --save-dev @biomejs/biome

  1. 创建 biome.json 配置文件

  2. 更新 CI/CD 配置（如果有）：

# GitHub Actions 示例
- name: Lint and Format
  run: npx biome ci .

优势​

  • 性能：比 ESLint + Prettier 快 20-50 倍
  • 简单：单一配置文件，无需处理工具间的冲突
  • 现代：支持最新的 JavaScript/TypeScript 特性
  • 可靠：Rust 实现保证了稳定性和性能
  • 增量检查：只检查修改的文件，提高效率
  • 内存效率：较低的内存占用
  • IDE 集成：优秀的编辑器集成体验

常见问题解决​

1. 与现有项目集成​

如果项目中已经有了 ESLint/Prettier，可以采用渐进式迁移：

  1. 先在新文件中使用 Biome
  2. 逐步迁移现有文件
  3. 使用 --files-ignore-unknown 参数忽略未迁移的文件

2. 自定义规则​

如果需要禁用某些规则：

{
  "linter": {
    "rules": {
      "style": {
        "useTemplate": "off"
      }
    }
  }
}

3. 性能优化​

对于大型项目：

  1. 使用 .biomeignore 文件排除不需要检查的目录
  2. 使用增量检查模式
  3. 配置适当的 formatter.ignore 规则