Biome

why

在 Rust 重建前端工具链之前，通常使用 Prettier 格式化代码，使用 ESLint 来检查代码问题。

最新的 ESLint 已废弃了格式化类型的规则（v8.53.0 及之后），但是对于使用旧版本的用户，经常面临的问题就是：避免 Prettier 和 ESLint 规则冲突，需要通过 eslint-config-prettier 等方式来规避。

但是不管怎么说，这依然需要 2 个工具来完成格式化和检查的事情，并且它们本身使用 JS/TS 实现，运行速度略慢。

Biome 的出现，通过一个工具，不仅解决了格式化和检查，还提供了一些动作助手功能（优化导入、html 属性排序、对象属性排序、css 属性排序等），并且通过 Rust 显著提升了性能。

WARNING

自发现优化导入问题（260118）：

• 在 Angualr 项目中，组件在 constructor 中注入了 service，service 可能被转为 type 导入，导致运行出错。

how

参考 Biome 观望的配置文档。根据“程序准备 -> 配置 -> 插件触发”的思路来配置

what

常规项目级 Biome 使用方式：

1. 项目中安装 Biome 依赖（pnpm add -D -E @biomejs/biome）
2. 项目中添加 Biome 配置（biome.json）
3. vscode 中安装 Biome 插件
4. vscode 配置启用 biome 插件的辅助功能

全局 Biome 使用方式👍：

1. 全局安装 Biome 依赖（pnpm add -g @biomejs/biome）
2. 项目中添加 Biome 配置（biome.json）
3. vscode 中安装 Biome 插件
4. vscode 配置启用 biome 插件的辅助功能

TIP

使用全局 biome 可以避免在项目中安装依赖，尤其是项目中依赖来源有限制无法安装的情况。

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
  "files": { "ignoreUnknown": false },
  "formatter": {
    "lineWidth": 120,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "indentStyle": "space",
      "indentWidth": 2
    }
  },
  "html": {
    "formatter": {
      "indentWidth": 4
    }
  }
}

// vscode settings.json
// biome.lsp.bin 全局 biome 二进制所在路径，不同平台不一致
// bin 路径例如: /home/user/.local/share/pnpm/global/5/.pnpm/@biomejs+cli-linux-x64@2.3.11/node_modules/@biomejs/cli-linux-x64/biome
{
    "biome.lsp.bin": "path/to/biome/bin",
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports.biome": "explicit",
		"source.action.useSortedAttributes.biome": "explicit",
		"source.action.useSortedKeys.biome": "explicit",
		"source.action.useSortedProperties.biome": "explicit",
        "source.fixAll.biome": "explicit"
    }
}

参考

• Configuration | Biome