Web 项目开发的一体化工具链

像 Prettier 一样格式化代码，但是更省时

Biome 是一个适用于 JavaScript、TypeScript、JSX、JSON、CSS 和 GraphQL 的快速格式化工具，与 Prettier 有高达 97% 的兼容覆盖率，能有效节约持续化集成和开发者的时间。

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

相较于 Prettier 的速度提升。搭配英特尔酷睿 i7 1270P，格式化 2,104 个文件中的 171,127 行代码。

你可以在演练场试用 Biome 格式化工具，或者直接在你的项目中安装使用：

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

修复错误，学习最佳实践

Biome 是一个适用于 JavaScript、TypeScript、JSX、CSS 和 GraphQL 的高性能 linter，拥有来自 ESLint、typescript-eslint 以及其它规则源的超过 200 条规则。

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 linter，或者直接在你的项目中安装使用：

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

所有操作，一气呵成

你不仅可以分别对代码进行格式化和 lint，还可以通过一条命令同时完成它们！

每项工具都能与其他工具无缝集成，为 Web 项目创建一条连贯的工具链。

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

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

快速

使用 Rust 和受 rust-analyzer 启发的革命性架构构建。

简单

无需任何配置即可开始使用。若需要，亦有大量配置选项可供使用。

可扩展

专为处理任何规模的代码库而设计。让你专注于产品开发，而不是工具。

优化

通过紧密的内部整合以达到工具互相复用的效果。对一种工具的任何改进都会让所有工具更好用。

可操作且信息丰富

避免出现晦涩的错误消息。当出现问题时，我们会准确告诉你问题的位置以及该如何修复它。

一应俱全

开箱即用，支持前端各种语言特性。尤其对 TypeScript 与 JSX 提供一流的支持。

试用 Biome

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

使用包管理器安装

将 Biome 集成到你的编辑器中

Trusted by leading organizations

Join thousands of developers and companies using Biome in production

AWS

Canonical

Cloudflare

Coinbase

Comcast

Discord

Google

Microsoft

n8n

Node.js

Slack

Socket

Uniswap

Vercel

Astro

View all users

社区

由我们的开源贡献者提供支持

Discord

Github

BlueSky

Mastodon

赞助商