Zenn
Closed8

Biomeの理解を深める！

ESLint
Prettier
Biome
nakamotonakamoto

Biome

https://biomejs.dev/ja/guides/getting-started/

  • ESLintとPrettierを合体させたようなライブラリ。Biomeをローカルではなく、グローバルにインストールすることも可能。しかし推奨されず。ESLint Prettierも同様。チーム開発するとなったらverを固定すべきなので。ほとんどのコマンドがグローバルインストールしない方がいい。バージョン範囲演算子を使用することも推奨されず。
  • initコマンドによってbiome.json（設定ファイル）を作成する。
    （.eslintrc.json prettier.config.jsに該当する）
biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}
  • formatコマンドを --write オプションを指定し実行することで、ファイルやディレクトリをformatできる。（Prettierの機能に該当する）
npx @biomejs/biome format <files> --write
  • lintコマンドを --apply オプションを指定し実行することで、ファイルやディレクトリに対してLintを実行し安全な修正を適用できる。（ESLintの機能に該当し--applyが--fixのイメージ）
npx @biomejs/biome lint <files>
  • checkコマンドを実行することで、それら両方のコマンドを実行できる。checkコマンドは複数のツールを一度に実行するコマンド。ファイルのformat ファイルのlint インポートの整理を行う。
npx @biomejs/biome check --apply <files>
nakamotonakamoto

https://biomejs.dev/ja/guides/big-projects/

  • Biomeはモノレポ（一つのリポジトリで複数のプロジェクトを管理する）や複数のプロジェクトを含むワークスペースなどの大きなプロジェクトで、適切に使用するためのツールを提供してる。
  • Vercelの出してるTurborepoとも相性が良さそう。
  • Biomeの機能をCLIやLSPで使用する場合、ツールは現在の作業ディレクトリから最も近い設定ファイルを参照する。設定ファイルが見つからない場合、Biomeは設定ファイルが見つかるまで、上へ上へとディレクトリを移動する。この機能を活かすとプロジェクトやディレクトリ毎に異なるオプションを適用できる。
app
├── backend
│   ├── biome.json
│   └── package.json
└── frontend
    ├── biome.json
    ├── legacy-app
    │   └── package.json
    └── new-app
        └── package.json
  • legacy-appはfrontendのbiome.jsonをもとにちょっと別の設定を適用したいという場合はextendsプロパティを使ってapp/biome.jsonのすべてのオプションを継承できる。
app/frontend/legacy-app/biome.json
{
   "extends": ["../../biome.json"],
   "formatter": {
     "indentStyle": "space"
   }
}
nakamotonakamoto

https://biomejs.dev/ja/guides/how-biome-works/

  • Biomeはデフォルトで十分な機能を提供する為、設定ファイルの使用はオプショナル。 デフォルトの挙動を変更する時に設定ファイルを使用する。Biomeの設定ファイルはbiome.jsonという名前でプロジェクトのルートディレクトリに置く必要がある。 通常、プロジェクトのpackage.jsonが置かれているところがルートディレクトリになる。biome.jsonが見つからなかった場合はBiomeのデフォルト設定を適用する。
  • 以下のファイルは現在Biomeによって無視される。

package.json package-lock.json npm-shrinkwrap.json yarn.lock composer.json composer.lock typescript.json tsconfig.json jsconfig.json deno.json deno.jsonc

https://biomejs.dev/ja/guides/integrate-in-editor/

  • Visual Studio CodeはBiome VS Code extensionをインストールする必要がある。
nakamotonakamoto

https://biomejs.dev/ja/analyzer/

  • インポートの整理に該当する。
  • import文は“距離” によってソートされる。ユーザーから “遠い” モジュールが上に配置され、
    ユーザーに “近い” モジュールが下に配置される。
  • 主にフロントエンドのプロジェクトで作業する場合やCSSファイルをインポートする際には特定の順序でimport文を宣言することは一般的。Biomeがimport文をすべてソートすることによって、アプリの従来の挙動を壊す可能性もある。これを回避するためimport文の”グループ”を作成する。改行を追加することでグループに区切れる。これによりBiomeはソートの対象をグループに属するimport文のみに制限する。
// group 1, only these two files will be sorted
import "../styles/reset.css";
import "../styles/layout.css";

// group 2, only this one is sorted
import { Grid } from "../components/Grid.jsx";
  • BiomeのVS Code拡張機能『Biome（nightlyじゃない方）』はOrganize Imports コードアクションによるimport文のソートをサポートしてる。 このアクションはデフォルトで ⇧+Alt+O キーボードショートカットを使用して実行するか、 コマンドパレット (Ctrl/⌘+⇧+P) から Organize Imports を選択してアクセスできる。
  • ファイル保存時に自動で実行したい場合は、エディタの設定に以下を追加することで実現できる。
settings.json
{
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": true
  }
}
nakamotonakamoto

https://biomejs.dev/ja/formatter/

  • デフォルトではformatterはコードをチェックし、差分がある場合はそれを報告する。
pnpm dlx @biomejs/biome format ./src
  • 新しいformatを適用する場合は、--writeオプションを使用する。
pnpm dlx @biomejs/biome format --write ./src
  • 以下はformatterのデフォルトの設定。デフォルトでも問題なさそう。強いて変えるとしたらlineWidth。コードのformatを無効にするには無効したい箇所に以下を追加する。
// biome-ignore format: <説明文>
biome.json
{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf",
    "ignore": []
  }
}
nakamotonakamoto

https://biomejs.dev/ja/linter/

  • linterのrulesはrecommendedじゃなくてall
    にした方が書き方がもっと統一化されていいとのこと。
    "all": trueにして効かせないものをオフにする。（ホワイトリスト方式）
biome.json
	"linter": {
		"enabled": true,
		"rules": {
			"all": true,
			"nursery": {
				"noNodejsModules": "off"
			}
		}
	},
  • 特定のコード行に対するlintを無視したい場合もある。これは、
    linterが指摘している行の上に抑制コメントを追加することで実現できる。
    抑制コメントは、以下の形式で記述する。
// biome-ignore lint: <explanation>
// biome-ignore lint/suspicious/noDebugger: <explanation>
  • levelは診断の重大度を示し、有効な値は"off" "warn" "error"。
biome.json
{
  "linter": {
    "enabled": true,
    "rules": {
      "correctness": {
        "noCommentText": {
          "level": "warn",
          "options": {}
        }
      }
    }
  }
}
nakamotonakamoto

https://biomejs.dev/ja/recipes/continuous-integration/
https://biomejs.dev/ja/recipes/git-hooks/

  • GitHub ActionsによってBiomeのリンターとかフォーマッターを回すことができる。

https://biomejs.dev/ja/internals/language-support/

  • html css markdownはまだBiome対応しておらず、
    以下のようにPrettier適用するのがよさそうとのこと。
settings.json
{
        "[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[markdown]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
}

https://biomejs.dev/ja/reference/configuration/#filesignore

biome.json
{
	"files": {
		"ignore": ["public"]
	},
}
nakamotonakamoto

https://biomejs.dev/ja/reference/configuration/#overrides

  • page.tsxとかlayout.tsxとかってexport defaultが必要だから、
    その辺のファイルはnoDefaultExportをoffにする。
biome.json
{
	"overrides": [
		{
			"include": [
				"next.config.mjs",
				"error.tsx",
				"layout.tsx",
				"loading.tsx",
				"not-found.tsx",
				"page.tsx",
				"template.tsx",
				".storybook",
				"*.stories.*",
				"*.stories-skip.*"
			],
			"linter": {
				"rules": {
					"style": {
						"noDefaultExport": "off"
					}
				}
			}
		},
		{
			"include": ["*.stories-skip.*"],
			"linter": {
				"rules": {
					"nursery": {
						"useFilenamingConvention": "off"
					}
				}
			}
		}
	]
}
このスクラップは2024/01/28にクローズされました