跳转到内容
Biome,Web 工具链 Biome,Web 工具链

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

格式化代码、修复错误,不止于此,就在一瞬间!

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

Biome 是一个适用于 JavaScriptTypeScriptJSXJSONCSSGraphQL快速格式化工具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 格式化工具,或者直接在你的项目中安装使用:

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

修复错误,学习最佳实践

Biome 是一个适用于 JavaScriptTypeScriptJSXCSSGraphQL高性能 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,或者直接在你的项目中安装使用:

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

所有操作,一气呵成

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

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

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

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

快速

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

简单

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

可扩展

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

优化

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

可操作且信息丰富

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

一应俱全

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

试用 Biome

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

使用包管理器安装

arrow

将 Biome 集成到你的编辑器中

arrow

社区

由我们的开源贡献者提供支持
User ematipico User sebmck User Conaclos User MichaReiser User leops
User denbezrukov User xunilrj User Sec-ant User yassere
User IWANABETHATGUY User diokey User yeonjuan User EduardoLopes User ooflorent User arendjr
User faultyserver User nissy-dev User unvalley User jer3m01 User dyc3
User bitpshr User togami2864 User nhedger
User macovedj User vohoanglong0107 User ah-yu User vasucp1207 User chansuke
User victor-teles User Boshen User Kelbie User mattcompiles

赞助商