@winner-fed/biome-config-win

@winner-fed/biome-config-win

Biome 配置包，用于 winner-fed 前端编码规范。

简介

这是 Biome 的共享配置包，用于替代 ESLint 和 Prettier，提供统一的代码检查和格式化规则。

特性

• 集成 Linter 和 Formatter 于一体
• 高性能（基于 Rust 实现）
• 零配置，开箱即用
• 支持 JavaScript、TypeScript、JSX、TSX、JSON、CSS、Less、SCSS、Sass、Vue

安装

npm install --save-dev @winner-fed/biome-config-win @biomejs/biome
# 或
pnpm add -D @winner-fed/biome-config-win @biomejs/biome
# 或
yarn add -D @winner-fed/biome-config-win @biomejs/biome

使用方法

方式一：继承配置（推荐）

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

{
  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
  "extends": ["@winner-fed/biome-config-win"]
}

方式二：直接复制配置

将 @winner-fed/biome-config-win/biome.json 的内容复制到项目的 biome.json 文件中，并根据项目需要进行调整。

配置说明

支持的规则

• Correctness: 代码正确性检查
• Style: 代码风格检查
• Suspicious: 可疑代码模式检查
• Performance: 性能相关检查
• Complexity: 代码复杂度检查

支持的文件类型

• JavaScript/TypeScript: 完全支持（.js, .jsx, .ts, .tsx）
• JSON: 完全支持（.json）
• CSS: 完全支持（.css）- 格式化和检查
• Vue: 部分支持（.vue）- 仅支持 <script> 标签内的代码
  • 注意: Biome 对 Vue 文件的支持不区分 Vue 2 和 Vue 3，只对 <script> 标签中的 JavaScript/TypeScript 代码进行检查和格式化
  • Vue 特定的模板语法和组件选项 API 不会被检查
  • 建议 Vue 项目配合使用专门的 Vue 开发工具（如 Volar）
• Less/SCSS/Sass: 配置中包含（.less, .scss, .sass），但 Biome 目前不支持这些预处理器，这些文件会被忽略

格式化选项

• 缩进：2 个空格
• 行宽：100 字符
• 引号：单引号（JS），双引号（JSX）
• 分号：始终使用
• 尾随逗号：ES5 风格

自定义扫描范围

Biome 的 extends 对 files.includes 采用并集合并（父配置模式在前、子配置在后、最后匹配优先）。因此子配置里写正向模式（如 src/**）无法收窄扫描范围，只能扩大。要排除文件或目录，请使用否定模式：

{
  "extends": ["@winner-fed/biome-config-win"],
  "files": {
    "includes": ["!vue.config.js", "!public", "!src/assets/**/*"]
  }
}

注意：忽略整个目录时写 !public 即可，不要写 !public/**（会触发 useBiomeIgnoreFolder 告警）。

Vue 文件的规则豁免

共享配置通过 overrides 对 .vue 文件关闭了 noUndeclaredVariables 和 noUnusedVariables，原因有二：

• Biome 只检查 <script> 内容，看不到模板中的使用（如 {{ title }}、@click="refresh"），未关闭时会产生大量误报；
• unplugin-auto-import 等工具注入的 API（ref、watch、onMounted 等）对 Biome 不可见。

如项目在 .js/.ts 文件中也使用自动注入的 API，请在项目 biome.json 中通过 javascript.globals 声明，或对相应文件关闭该规则。

与 ESLint 的差异

Biome 的规则与 ESLint 不完全对应，但覆盖了大部分常用规则。主要差异：

1. Biome 内置格式化功能，无需单独配置 Prettier
2. 部分 ESLint 规则在 Biome 中可能名称不同或不存在
3. Vue 文件支持：
   • Biome 目前对 Vue SFC 的支持有限，仅检查 <script> 标签内的代码
   • 不区分 Vue 2 和 Vue 3：Biome 将所有 Vue 文件视为相同，只检查其中的 JavaScript/TypeScript 代码
   • Vue 特定的规则（如组件选项、模板语法等）需要配合其他工具（如 ESLint + eslint-plugin-vue）
   • 对于 Vue 项目，建议：
     • 使用 Biome 处理 .js、.ts 等纯 JavaScript/TypeScript 文件
     • 对于 .vue 文件，Biome 会放宽部分规则（如 noUnusedVariables、noUndeclaredVariables），以避免误报

迁移指南

从 ESLint + Prettier 迁移到 Biome：

1. 安装 Biome 和本配置包
2. 创建 biome.json 并继承本配置
3. 移除 ESLint 和 Prettier 相关依赖和配置
4. 更新 CI/CD 脚本中的 lint 命令
5. 更新编辑器配置（VSCode 等）

许可证

MIT