适用于你的 Web 项目的工具链

像 Prettier 一样格式化代码，节省时间

Biome 是一个适用于 JavaScript、TypeScript、JSX、TSX、JSON、CSS、以及 GraphQL 的 快速格式化器，与 Prettier 的兼容性达到 97%，从而节省了 CI 和开发者的时间。

Biome 甚至可以格式化你在 你最喜欢的编辑器 中编写的格式错误的代码。

代码

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

      // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
  { greeted }
    </em>
    { (silent)
      ? "."
      : "!"}

    </div>;
}

输出

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1E+7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

性能

Biome

0.00s

Prettier

0.00s

~35x

使用 Intel Core i7 1270P 格式化 2,104 个文件中的 171,127 行代码时比 Prettier 更快。

在 在线运行 上或直接在你的项目中尝试 Biome 格式化器：

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src

解决问题，学习最佳实践

Biome 是一个针对 JavaScript、TypeScript、JSX、CSS、以及 GraphQL 的 高性能代码检查器，具有来自 ESLint、TypeScript ESLint 和 其他来源 的 274 条规则。

Biome 输出详细且情境化的诊断信息，帮助你改进代码并成为更好的程序员！

complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The call chain .map().flat() can be replaced with a single .flatMap() call.

    1 │ const array = ["split", "the text", "into words"];
  > 2 │ array.map(sentence => sentence.split(' ')).flat();
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 

  ℹ Safe fix: Replace the chain with .flatMap().

    1 1 │   const array = ["split", "the text", "into words"];
    2   │ - array.map(sentence·=>·sentence.split('·')).flat();
      2 │ + array.flatMap(sentence·=>·sentence.split('·'));
    3 3 │   

在 在线运行 上或直接在你的项目中尝试 Biome 代码检查器：

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome lint --write ./src

一切同时发生

你不仅可以单独格式化和检查代码，还可以使用单个命令一次性完成所有操作！

每个工具都与其他工具无缝集成，为 Web 项目创建一个有凝聚力的工具链。

使用 check 命令运行所有工具：

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src

快速

采用 Rust 构建，并采用受 rust-analyzer 启发的创新架构。

简单

无需配置即可开始使用。当你需要时，提供广泛的选项。

可扩展

旨在处理任何规模的代码库。专注于发展产品而不是工具。

优化

通过紧密的内部集成，我们能够重复使用以前的工作，并且对一个工具的任何改进都会改善所有工具。

可操作且信息丰富

避免模糊的错误消息，当我们告诉你出现问题时，我们会准确地告诉你问题所在以及如何修复它。

包含适配

开箱即用，支持你目前使用的所有语言功能。对 TypeScript 和 JSX 提供一流的支持。

Try Biome

使用你喜欢的包管理器安装 Biome 并将其集成到你的编辑器中。

使用包管理器安装

将 Biome 集成到你的编辑器中