🐸

[Biome v2対応] Biome+lefthookで始める高速commit/push時自動チェック

2024/04/29に公開

Biomeとは

Biomeは、コードのフォーマットと静的解析を一つのプラットフォームで提供するツールです。
PrettierやESLintがそれぞれフォーマットとリントの機能に特化しているのに対し、Biomeはこれらの機能を統合しています。
PrettierやESLintでそれぞれ面倒な設定をすることなく、かつ高速にチェックすることができます。また、デフォルトのフォーマットやルールが豊富であり、追加で設定をする量が少ないのも良い点の一つです。

https://biomejs.dev/ja/

Lefthookとは

Lefthookは、Gitのフックを管理し、プロジェクトの開発プロセスを自動化するための高速で使いやすいツールです。Gitフックを使うことで、コミットやプッシュの前に特定のスクリプトを実行し、コードの品質を保持したり、一貫性を確保するためのチェックを行えます。
js環境ではHusky+lint-stagedを用いて同様の動作を行えますが、Lefthookはその上位互換と考えることができます。

Biomeの環境構築

パッケージマネージャを使用してインストールします。
他にもyarn, pnpm, bunを使ってインストール可能です。

npm i -D -E @biomejs/biome

続いて、設定ファイルであるbiome.jsonを作成します。

npx @biomejs/biome init

このコマンドを実行すると、初期設定が詰まったbiome.jsonが生成されます。
この時点でだいぶルールが充実してるので、その後複雑な設定変更をせずにそのまま使うことが可能です。

biome.json

{
	"$schema": "https://biomejs.dev/schemas/2.0.4/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}

linterの設定について

Biomeをinstall時点でrecommendedがtrueになっており、豊富なルールが適用されています。

https://biomejs.dev/linter/

ルールの一覧については以下のページで確認できます。
アクセシビリティやセキュリティ、パフォーマンスなど多くのルールがあることがわかります。

同じく、公式から最新の対応状況を確認したい場合は以下のページで確認できます。
ESLintやそのプラグイン、typescript-eslintなどの互換がなされていることがわかります。

ルールの追加方法

試しに、使用していない変数がある場合に感知されるルールであるnoUnusedVariablesの設定をerrorにしてみます。ちなみにこのルールはrecommendedルールではありますが、デフォルトはwarningとなっています。

ページの上記にDiagnostic Category: lint/correctness/noUnusedVariablesとあると思います。大抵このカテゴリ通りにオブジェクトを表記すれば反映されます。

biome.json

{
  // ...
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error"
      }
    }
  }
  // ...
}

formatterの設定

デフォルトで以下のformatが設定されています。

https://biomejs.dev/formatter/

biome.json

{
  // ...
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "attributePosition": "auto",
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "arrowParentheses":"always",
      "bracketSameLine": false,
      "bracketSpacing": true,
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  },
  "json": {
    "formatter": {
      "trailingCommas": "none"
    }
  }
  // ...
}

これを変更したい場合は、変更したい内容のみをbiome.jsonに追記すれば良いです。
設定の仕様については公式のconfigurationが参考になります。

CLIから実行できるようにする

要はnpm run hogeでlinterやらformatterやらが走るようにします。
package.jsonを以下のように編集します。
checkをやるとlintもformatterも走るのでこいつだけでも構いません。

package.json

"lint": "biome lint",
"format": "biome format",
"check": "biome check",
"lint:fix": "biome lint --write",
"format:fix": "biome format --write",
"check:fix": "biome check --write"

checkで安全ではない修正（正しい日本語訳ってなんなんだろう）を行う場合は--unsafeをつければ良いです。

VSCodeとの連携

VSCodeの拡張機能が存在します。これで保存時に自動フォーマットができます。

vscodeのsetting.jsonに以下を追記します。
（そのプロジェクト限定にしたい場合は、.vscode/settings.jsonに新規/追記してください）

vscode.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

デフォルトformatterは変えたくない場合

言語で指定することが可能です。

settings.json

{
  "editor.defaultFormatter": "<other formatter>",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Lefthookの環境構築

パッケージマネージャからインストールします。

npm install lefthook --save-dev

lefthook.ymlに以下を記述します。
pre-commitの場合は、commit時にlintやformatを自動でやって一緒にcommitしてもらう様にします

lefthook.yml

pre-commit:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
      stage_fixed: true

pre-push:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}

プロジェクトにgit hookに反映させます。

lefthook install

あとはcommit / pushするだけ

これでもうcommitやpushをするたびに、自動的にチェックが走るようになります。やったぜ。

終わりに

これまでprettier + ESLint + Husky + lint-stagedみたいな構成を長年続けてきたのですが、設定がアホ面倒だったり実行時間がそこそこ長くなったりしていたのですが、今回の構成に変えて爆速自動チェックができて非常に満足です。
皆さんもぜひ試してみてください。

Biomeとは

Lefthookとは

Biomeの環境構築

linterの設定について

ルールの追加方法

formatterの設定

CLIから実行できるようにする

VSCodeとの連携

デフォルトformatterは変えたくない場合

Lefthookの環境構築

あとはcommit / pushするだけ

終わりに

Discussion