@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 风格

与 ESLint 的差异

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

• Biome 内置格式化功能，无需单独配置 Prettier
• 部分 ESLint 规则在 Biome 中可能名称不同或不存在
• 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：

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

许可证

MIT