Biome+lefthookで始める高速commit/push時自動チェック
Biomeとは
Biomeは、コードのフォーマットと静的解析を一つのプラットフォームで提供するツールです。
PrettierやESLintがそれぞれフォーマットとリントの機能に特化しているのに対し、Biomeはこれらの機能を統合しています。
PrettierやESLintでそれぞれ面倒な設定をすることなく、かつ高速にチェックすることができます。また、デフォルトのフォーマットやルールが豊富であり、追加で設定をする量が少ないのも良い点の一つです。
Lefthookとは
Lefthookは、Gitのフックを管理し、プロジェクトの開発プロセスを自動化するための高速で使いやすいツールです。Gitフックを使うことで、コミットやプッシュの前に特定のスクリプトを実行し、コードの品質を保持したり、一貫性を確保するためのチェックを行えます。
js環境ではHusky+lint-stagedを用いて同様の動作を行えますが、Lefthookはその上位互換と考えることができます。
Biomeの環境構築
パッケージマネージャを使用してインストールします。
他にもyarn, pnpm, bunを使ってインストール可能です。
npm install --save-dev --save-exact @biomejs/biome
続いて、設定ファイルであるbiome.jsonを作成します。
npx @biomejs/biome init
このコマンドを実行すると、以下のようなファイルが生成されます。
{
"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
linterの設定について
linterはこの時点でrecommendedがtrueになっており、豊富なルールが適用されています。
含まれているルールの対応について以下の記事がわかりやすいです。
公式から最新のrecommendを確認したい場合は以下のページで確認できます。
ルールの一覧については以下のページで確認できます。
アクセシビリティやセキュリティ、パフォーマンスなど多くのルールがあることがわかります。
同じく、公式から最新の対応状況を確認したい場合は以下のページで確認できます。
ESLintやそのプラグイン、typescript-eslintなどの互換がなされていることがわかります。
ルールの追加方法
試しに、使用していない変数がある場合に感知されるルールであるnoUnusedVariablesの設定をerrorにしてみます。ちなみにこのルールはrecommendedルールではありません（どうして）。
ページの上記にDiagnostic Category: lint/correctness/noUnusedVariablesとあると思います。大抵このカテゴリ通りにオブジェクトを表記すれば反映されます。
{
"$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": {
"noUnusedVariables": "error"
}
}
}
}
formatterの設定
デフォルトで以下のformatが設定されています。
{
"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",
"trailingComma": "all"
}
},
"json": {
"formatter": {
"trailingCommas": "none"
}
}
}
これを変更したい場合は、変更したい内容のみをbiome.jsonに追記すれば良いです。
設定の仕様については公式のconfigurationが参考になります。
CLIから実行できるようにする
要はnpm run lintやらでlinterやらformatterやらが走るようにします。
package.jsonを以下のように編集します（checkだけでも十分かも）。
<files>は./srcなど対応させたいディレクトリにしてください。
"lint": "biome lint <files>",
"format": "biome format <files>",
"check": "biome check <files>",
"lint:fix": "biome lint --apply <files>",
"format:fix": "biome format <files> --write",
"check:fix": "biome check --apply <files>"
VSCodeとの連携
VSCodeの拡張機能が存在します。これで保存時に自動フォーマットができます。
vscodeのsetting.jsonに以下を追記します。
（そのプロジェクト限定にしたい場合は、.vscode/settings.jsonに新規/追記してください）
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "biomejs.biome",
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}
デフォルトformatterは変えたくない場合
言語で指定することが可能です。
{
"editor.defaultFormatter": "<other formatter>",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
}
}
Lefthookの環境構築
色々記事やドキュメントを見ると、以下の順番が前後したりしますが、一応自分が試したやり方を記述します。
macの場合はhomebrewからCLIをインストールできます。
brew install lefthook
他の環境の場合は以下を参考にしてください。
パッケージマネージャからインストールします。
(pnpmやyarn, bunでもインストール可能です）
npm install lefthook --save-dev
lefthook.ymlに以下を記述します。
<files>の部分は./srcなど対応させたいディレクトリを指定してください。
pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx biome check --apply --no-errors-on-unmatched --files-ignore-unknown=true <files> && git update-index --again
pre-push:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx biome check --no-errors-on-unmatched --files-ignore-unknown=true <files>
プロジェクトにgit hookに反映させます。
lefthook install
あとはcommit / pushするだけ
これでもうcommitやpushをするたびに、自動的にチェックが走るようになります。やったぜ。
終わりに
これまでprettier + ESLint + Husky + lint-stagedみたいな構成を長年続けてきたのですが、設定がアホ面倒だったり実行時間がそこそこ長くなったりしていたのですが、今回の構成に変えて爆速自動チェックができて非常に満足です。
皆さんもぜひ試してみてください。
Discussion