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

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

Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速な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を試してみましょう:

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

すべてを一度に

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

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

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

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

高速

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

シンプル

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

スケーラブル

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

最適化済み

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

豊富な情報量

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

すぐに使える

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

Biomeを試す

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

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

Biomeをエディタに組み込む

コミュニティ

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

Discord

Github

Twitter

Mastodon

スポンサー