高速
Rustで構築され、rust-analyzerにインスパイアされた革新的なアーキテクチャを採用しています。
Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速なフォーマッタ であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。
Biomeは、お気に入りのエディタでコードを書く際に、不正な形式のコードさえもフォーマットできます。
1function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {2
3 if(!greeting){return null};4
5 // TODO: Don't use random in render6 let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")7
8 return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>9
10 <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>11 {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }12 <em>13 { greeted }14 </em>15 { (silent)16 ? "."17 : "!"}18
19 </div>;20}
1function HelloWorld({2 greeting = "hello",3 greeted = '"World"',4 silent = false,5 onMouseOver,6}) {7 if (!greeting) {8 return null;9 }10
11 // TODO: Don't use random in render12 let num = Math.floor(Math.random() * 1E+7)13 .toString()14 .replace(/.d+/gi, "");15
16 return (17 <div18 className="HelloWorld"19 title={`You are visitor number ${num}`}20 onMouseOver={onMouseOver}21 >22 <strong>23 {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}24 </strong>25 {greeting.endsWith(",") ? (26 " "27 ) : (28 <span style={{ color: "grey" }}>", "</span>29 )}30 <em>{greeted}</em>31 {silent ? "." : "!"}32 </div>33 );34}
BiomeはPrettierよりも高速です(Intel Core i7 1270Pを使用して、2,104ファイルにわたる171,127行のコードをフォーマットした場合)。
プレイグラウンドか、あなたのプロジェクトで、Biomeのフォーマッタを試してみましょう:
1npm i -D --save-exact @biomejs/biome2npx @biomejs/biome format --write ./src
Biomeは JavaScript、TypeScript、JSX、CSS そして GraphQL のための高性能なリンタ であり、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のリンタを試してみましょう:
1npm i -D --save-exact @biomejs/biome2npx @biomejs/biome lint --write ./src
コードのformatとlintを別々に行うだけでなく、1つのコマンドで一度に行うこともできます!
各ツールは他のツールとシームレスに統合され、Webプロジェクトのための一貫したツールチェーンを構成します。
check
コマンドですべてのツールを実行してみましょう:
1npm i -D --save-exact @biomejs/biome2npx @biomejs/biome check --write ./src
高速
Rustで構築され、rust-analyzerにインスパイアされた革新的なアーキテクチャを採用しています。
シンプル
設定なしで始められます。必要に応じて豊富なオプションが利用可能です。
スケーラブル
あらゆる規模のコードベースに対応するよう設計されているので、ツールではなく製品の成長に集中できます。
最適化済み
各機能の内部処理は、可能な限り統合され、再利用されています。このため、あるツールの改善がすべてのツールを向上させることがあります。
豊富な情報量
曖昧なエラーメッセージを極力避けます。問題がある場合は、その位置を明示して、解決のためのステップを提供します。
すぐに使える
フロントエンド開発で利用される言語に対して、優れたサポートを提供します。特にTypeScriptおよびJSXへのサポートを第一にしています。