コンテンツにスキップ
Enduring Heartsへの寄付をご検討ください。
Biome、Webのためのツールチェーン Biome、Webのためのツールチェーン

Web開発のためのたった1つのツールチェーン

format、lintなどが一瞬で完了します!

Prettierのようにコードをformat、しかも高速

Biomeは JavaScriptTypeScriptJSX そして JSON のための高速なformatter であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します

Biomeは、お気に入りのエディタでコードを書く際に、不正な形式のコードさえもformatできます。

コード
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

BiomeはPrettierよりも高速です(Intel Core i7 1270Pを使用して、2,104ファイルにわたる171,127行のコードをformatした場合)。

プレイグラウンドか、あなたのプロジェクトで直接Biomeのformatterを試してみましょう:

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

問題を修正し、ベストプラクティスを学ぶ

Biomeは JavaScriptTypeScript そして JSX のための高性能な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 --apply ./src

すべてを一度に

コードのformatとlintを別々に行うだけでなく、1つのコマンドで一度に行うこともできます!

各ツールは他のツールとシームレスに統合され、Webプロジェクトのための一貫したツールチェーンを構成します。

checkコマンドですべてのツールを実行してみましょう:

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

高速

Rustで構築され、rust-analyzerにインスパイアされた革新的なアーキテクチャを採用しています。

シンプル

設定なしで始められます。必要に応じて豊富なオプションが利用可能です。

スケーラブル

あらゆる規模のコードベースに対応するよう設計されているので、ツールではなく製品の成長に集中できます。

最適化済み

各機能の内部処理は、可能な限り統合され、再利用されています。このため、あるツールの改善がすべてのツールを向上させることがあります。

豊富な情報量

曖昧なエラーメッセージを極力避けます。問題がある場合は、その位置を明示して、解決のためのステップを提供します。

すぐに使える

フロントエンド開発で利用される言語に対して、優れたサポートを提供します。特にTypeScriptおよびJSXへのサポートを第一にしています。

Biomeを試す

好みのパッケージマネージャーを使用してBiomeをインストールし、エディターに組み込みましょう。

パッケージマネージャーでインストール

arrow

Biomeをエディタに組み込む

arrow

コミュニティ

OSSコントリビューターにより支えられています

User ematipico User sebmck User MichaReiser User Conaclos User leops
User denbezrukov User xunilrj User yassere User IWANABETHATGUY
User diokey User yeonjuan User EduardoLopes User ooflorent User faultyserver User nissy-dev
User jer3m01 User unvalley User Sec-ant User bitpshr User nhedger
User macovedj User arendjr User vasucp1207
User togami2864 User victor-teles User Boshen User Kelbie User mattcompiles
User VictorHom User JustBeYou User ah-yu User jamiebuilds

スポンサー