EMP 3.0 利用LeftHooK 与 Biome 打造高性能代码格式化管理方案随着 EMP v3 的推出，代码格式化

随着 EMP v3 的推出，代码格式化和 Lint 工具的选择变得尤为重要。在这篇文章中，我们将深入探讨新引入的 @empjs/biome-config（Biome）与 ESLint 的对比，并展示为什么 Biome 可能是您的理想选择。

Biome 格式化性能

根据官方数据，Biome 在格式化大型代码库时表现出色。在格式化包含 171,127 行代码和 2,104 个文件的代码库时，Biome 的速度比 Prettier 快约 25~35 倍。这意味着，无论您的项目规模如何，使用 Biome 进行代码格式化都将大大提高工作效率。

Lint 性能

除了格式化性能，Lint 速度也是开发者关注的重点。在 EMP 工作空间中，使用 Biome 进行 Lint 检查的时间约为 2 秒，涉及约 600 个文件。这种快速的 Lint 体验有助于开发者快速识别并修复代码中的问题，从而保持代码质量。

ESLint 对比

ESLint 无疑是代码 Lint 领域的领导者，但 Biome 在某些方面提供了更优秀的体验。以下是 Biome 相对于 ESLint 的几个优势：

性能：如上所述，Biome 在格式化和 Lint 性能上表现出色，特别是处理大型代码库时。
配置简单：Biome 提供了简洁易懂的配置选项，使开发者能够快速设置并开始使用。
React & Typescript 支持：对于使用 React 和 Typescript 的开发者来说，Biome 提供了良好的支持，确保代码格式化和 Lint 检查的准确性。
VS Code 插件：Biome 提供了 VS Code 插件，方便开发者在编辑器中直接进行格式化和 Lint 检查。

Lefthook 和 Husky 对比

灵活性：lefthook 在灵活性方面更具优势，因为它允许开发人员使用任何语言和工具编写 Git 钩子。而 husky 主要关注于基于 JavaScript 的工具和 lint 集成。
可扩展性：lefthook 的高可扩展性使得它可以与其他工具和系统集成，从而构建一个更加完善的开发环境。而 husky 主要关注于代码质量检查和格式化，与其他工具的集成相对较少。
语言支持：lefthook 支持多种编程语言，这使得不同技术栈的开发人员都可以使用它。而 husky 主要基于 JavaScript，更适合使用 JavaScript 的开发人员。
易用性：lefthook 具备 husky 的 lint-staged 能力，避免额外安装lint-staged以及lint-staged可能带来的问题影响整体流程

如何配置和使用 Biome

安装

使用 pnpm 安装 @empjs/biome-config 作为开发依赖：

pnpm add @empjs/biome-config --save-dev --save-exact

安装插件

biome vscode plugin

VS Code 配置

在 VS Code 的设置中禁用 ESLint 并设置 Biome 为默认格式化工具：

{
  // ... 其他设置
  "eslint.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false,
    "quickfix.biome": true,
    "source.organizeImports": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  // ... 为其他支持的文件类型设置默认格式化工具
}

项目设置

在项目的根目录的 biome.json (biome.jsonc 暂时不被默认读取) 文件中，使用 @empjs/biome-config 作为扩展配置：

{
  "extends": ["@empjs/biome-config"]
}

`package.json` 脚本

在 package.json 文件中添加格式化、Lint 和检查的脚本：

{
  // ... 其他字段
  "scripts": {
    "lint": "biome lint . --apply-unsafe",
    "format": "biome format . --write",
    "check": "biome check .",
    // ... 其他脚本
  },
}

Lefthook 迁移

如果您之前使用了 Husky 进行 Git hooks 的管理，并希望迁移到 Lefthook，可以按照以下步骤操作：

清除 Git 配置文件中的 hooksPath 设置（如果您之前设置了它）：

git config --unset core.hooksPath

删除 .husky 文件夹和 package.json 中与 Husky 相关的脚本和依赖。
安装 Lefthook 并按照其官方文档进行配置。

pnpm add lefthook --save-dev

在 package.json 的 scripts 中添加 Lefthook 的安装脚本：

{
  "scripts": {
    "prepare": "lefthook install",
    // ... 其他脚本
  },
  // ... 其他字段
}

注意事项

pnpm 设置

设置 public-hoist-pattern[] 提升至根模块目录中意味着应用代码可以访问到幻影依赖

public-hoist-pattern[]=*@biomejs/biome*

总结

综上所述，Biome 在性能、配置、支持以及集成方面均表现出色，是一个值得考虑的代码格式化和 Lint 工具。如果您正在寻找一个高效、易用且功能强大的工具来提升代码质量和开发效率，那么我强烈推荐您尝试使用 Biome。

通过 Biome，您可以更轻松地管理代码格式和质量，从而专注于编写高质量的代码。

EMP 3.0 利用LeftHooK 与 Biome 打造高性能代码格式化管理方案