Biome：更快的格式化和 Linting

2024-04-25 15:56:29 浏览数 (2)

网络项目的高效工具链

大家好，今天要介绍一个超棒的工具链——Biome，它是为网络项目量身打造的，旨在为开发者提供维护项目健康的工具。

Biome 是一个速度极快的代码格式化工具，支持 JavaScript、TypeScript、JSX 和 JSON。它与 Prettier 的兼容性高达 97%，这意味着如果你习惯了 Prettier，那么切换到 Biome 会非常顺滑。

Biome 还是一个性能出色的 linter 工具，支持 JavaScript、TypeScript 和 JSX，提供了超过 200 条规则，这些规则来自 ESLint、typescript-eslint 以及其他来源。它输出的诊断信息详细且具有上下文，帮助你提升代码质量，成为一个更优秀的程序员！

Biome 从一开始就被设计为在编辑器中交互式使用。当你在编写代码时，它可以即时格式化和 lint 那些写得乱七八糟的代码。

安装

想要安装 Biome？非常简单，只需要在你的项目中运行：

代码语言：javascript复制
npm install --save-dev --save-exact @biomejs/biome

使用方法

格式化文件：

代码语言：javascript复制
npx @biomejs/biome format --write ./src

lint 检查文件：

代码语言：javascript复制
npx @biomejs/biome lint ./src

运行格式化、lint 等，并将安全的提议应用到代码中：

代码语言：javascript复制
npx @biomejs/biome check --apply ./src

在 CI 环境中检查所有文件是否符合格式化、lint 等要求：

代码语言：javascript复制
npx @biomejs/biome ci ./src

如果你不想安装 Biome，也可以使用它的 在线游乐场[1]，它被编译成了 WebAssembly 格式。

文档和更多信息

想了解更多关于 Biome 的信息？请访问 主页[2]，或者直接查看 入门指南[3] 开始使用 Biome。

Biome 的更多亮点

  • Biome 默认设置很合理，不需要额外配置。
  • Biome 旨在支持现代网络开发的所有主要语言。
  • Biome 运行不依赖 Node.js。
  • Biome 提供了一流的 LSP（语言服务器协议）支持，拥有一个复杂的解析器，能够以完全保真的方式表示源文本，并具有一流的错误恢复能力。
  • Biome 将以前是独立工具的功能统一起来。在共享基础上构建，让我们能够为处理代码、显示错误、并行工作、缓存和配置提供一致的体验。

Biome v1.7 版本发布

Biome v1.7 版本正式和大家见面了！这个新版本不仅让从 ESLint 和 Prettier 迁移变得更简单，还带来了实验性的机器可读报告、新的 linter 规则，以及许多修复。

更新 Biome 的步骤

想要尝鲜的朋友，可以通过以下命令更新你的 Biome：

代码语言：javascript复制
npm install --save-dev --save-exact @biomejs/biome@latest
npx @biomejs/biome migrate

从 ESLint 迁移，一键搞定

这次更新，带来了一个新命令 biome migrate eslint。这个命令会读取你的 ESLint 配置，并尝试将设置迁移到 Biome 中。

无论是传统的还是扁平化的配置文件，这个命令都能搞定。它支持传统配置的 extends 字段，并能加载共享和插件配置。此外，它还会迁移 .eslintignore 文件。

举个例子，假设你有如下的 ESLint 配置：

代码语言：javascript复制
{
  "extends": ["plugin:unicorn/recommended"],
  "plugins": ["unicorn"],
  "ignore_patterns": ["dist/**"],
  "globals": {
    "Global1": "readonly"
  },
  "rules": {
    "eqeqeq": "error"
  },
  "overrides": [
    {
      "files": ["tests/**"],
      "rules": {
        "eqeqeq": "off"
      }
    }
  ]
}

以及如下的 Biome 配置：

代码语言：javascript复制
{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

只需运行 biome migrate eslint --write，你的 ESLint 配置就能迁移到 Biome 了。这个命令会覆盖你最初的 Biome 配置。比如，它会禁用 recommended。最终你会得到如下的 Biome 配置：

代码语言：javascript复制
{
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": false,
      "complexity": {
        "noForEach": "error",
        "noStaticOnlyClass": "error",
        "noUselessSwitchCase": "error",
        "useFlatMap": "error"
      },
      "style": {
        "noNegationElse": "off",
        "useForOf": "error",
        "useNodejsImportProtocol": "error",
        "useNumberNamespace": "error"
      },
      "suspicious": {
        "noDoubleEquals": "error",
        "noThenProperty": "error",
        "useIsArray": "error"
      }
    }
  },
  "javascript": {
    "globals": ["Global1"]
  },
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noDoubleEquals": "off"
          }
        }
      }
    }
  ]
}

这个命令需要 Node.js 来加载和解析 ESLint 配置文件中配置的插件和 extends。目前，biome migrate eslint 还不支持 YAML 格式的配置。有一个专门的页面[4]列出了给定 ESLint 规则的等效 Biome 规则。处理了一些 ESLint 插件，比如 TypeScript ESLint[5]、ESLint JSX A11y[6]、ESLint React[7] 和 ESLint Unicorn[8]。一些规则与它们的 ESLint 对应物相同，而其他一些则是受启发的。默认情况下，Biome 不会迁移受启发的规则。你可以使用 CLI 标志 --include-inspired 来迁移它们。

从 Prettier 迁移，也是一键搞定

Biome v1.6 引入了 `biome migrate prettier` 命令[9]。

在 Biome v1.7 中，增加了对 Prettier 的 overrides 支持，并尝试将 .prettierignore 的全局模式转换为 Biome 支持的模式。

在迁移过程中，Prettier 的 overrides 被转换成了 Biome 的 `overrides`[10]。假设你有如下的 .prettierrc.json：

代码语言：javascript复制
{
  "useTabs": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": ["*.json"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

运行 biome migrate prettier --write 将你的 Prettier 配置迁移到 Biome。这将得到如下的 Biome 配置：

代码语言：javascript复制
{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingComma": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false,
      "quoteStyle": "single",
      "attributePosition": "auto"
    }
  },
  "overrides": [
    {
      "include": ["*.json"],
      "formatter": {
        "indentWidth": 2
      }
    }
  ]
}

这个命令需要 Node.js 来加载 JavaScript 配置，如 .prettierrc.js。biome migrate prettier 不支持 JSON5、TOML 或 YAML 格式的配置。

发出机器可读的报告

Biome 现在能够输出 JSON 报告，详细列出命令发出的诊断信息。

例如，你可以在代码库进行 linter 检查时发出报告：

代码语言：javascript复制
biome lint --reporter=json-pretty .

目前，支持两种报告格式：json 和 json-pretty。

请注意，报告格式是 实验性的，未来可能会有所变化。

检查 git 暂存的文件

Biome v1.5 添加了 --changed 选项，用于格式化和 linter 检查已经更改的 git 跟踪文件。

今天，引入了一个新的选项 --staged，它允许你只检查添加到 Git 索引（即暂存的文件）中的文件。这对于确保你想要提交的文件已经格式化和 linter 检查非常有用：

这个功能非常适合用来编写你自己的 pre-commit 脚本[11]。请注意，对于暂存文件上的未暂存更改 不会被忽略。因此，仍然推荐使用一个 专门的 pre-commit 工具[12]。

总结

总的来说，Biome以其强大的功能、灵活的配置和用户友好的设计，正逐渐成为网络开发者不可或缺的工具之一，引领着代码质量和开发效率的双重提升。大家快去试试吧。

参考链接：

  • https://biomejs.dev/blog/biome-v1-7/
  • https://github.com/biomejs/biome

Reference

[1]

在线游乐场: https://biomejs.dev/playground/

[2]

主页: https://biomejs.dev/

[3]

入门指南: https://biomejs.dev/guides/getting-started/

[4]

专门的页面: https://biomejs.dev/linter/rules-sources/

[5]

TypeScript ESLint: https://typescript-eslint.io/

[6]

ESLint JSX A11y: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y

[7]

ESLint React: https://github.com/jsx-eslint/eslint-plugin-react

[8]

ESLint Unicorn: https://github.com/sindresorhus/eslint-plugin-unicorn

[9]

Biome v1.6 引入了 biome migrate prettier 命令: https://biomejs.dev/blog/biome-v1-6/#easier-migration-from-prettier

[10]

Biome 的 overrides: https://biomejs.dev/reference/configuration/#overrides

[11]

pre-commit 脚本: https://biomejs.dev/recipes/git-hooks/#shell-script

[12]

专门的 pre-commit 工具: https://biomejs.dev/recipes/git-hooks/

配置 网络 迁移 插件 工具

0 人点赞