Biomeを導入する
js で Linter, Formatter といえば ESLint, Prettier がデファクトスタンダードでしたが、最近は Biome という Rust 製のツールが注目を集めています。
Biome のサイトトップには以下の文言が並びます。
Web 開発のためのたった 1 つのツールチェーン
Biome は JavaScript、TypeScript、JSX そして JSON のための高速な formatter であり、Prettier と 97%の互換性を持ち、CI と開発者の時間を節約します。
Biome は JavaScript、TypeScript そして JSX のための高性能な linter であり、ESLint、typescript-eslint、その他のソースに由来する 200 以上のルール を備えています。
ESLint と Prettier の両方を入れて設定と思うと腰が重いですが、Biome はひとつで二役を担ってくれるようです。
設定も簡単との触れ込みで、期待が高まります。
動かすまでが早い
公式の手順に沿って操作します。
まずはインストール
yarn add --dev --exact @biomejs/biome
package.jsonに次の記述を追加します。
...,
"scripts": {
...,
"lint": "biome check --apply"
},
あとはコマンド実行で Biome のおすすめ設定でコードを綺麗にしてくれます。簡単ですね。
yarn lint src/
設定ファイルをカスタマイズする
設定ファイルはなくても Biome のデフォルト設定で動きます。
少しだけ調整したいところがあったので、設定ファイルを作ります。
yarn biome init
initコマンドの実行で、以下のファイルが生成されます。
{
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
この状態ではデフォルト設定のままなので、編集しましょう。
私は次の設定で一旦落ち着きました。
{
"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
"organizeImports": {
"enabled": true
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"ignore": [],
"indentStyle": "space",
"indentWidth": 2
},
"javascript": {
"formatter": {
"arrowParentheses": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"semicolons": "asNeeded",
"trailingComma": "all"
}
},
"json": {
"formatter": {
"trailingCommas": "none"
}
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": {
"noUnusedImports": "error"
}
}
}
}
設定の詳細
デフォルトと変えているところはそんなに多くありません。
設定値があることを思い出すためにあえてファイルに記載している設定が大半です。
変えたのは
formatter.indentStyle：tab→spacejavascript.formatter.semicolons：always→asNeededlinter.rules.correctness.noUnusedImports：未設定 →error
の３箇所です。noUnusedImportsは使っていない import を消してくれるので好きです。
リンタールールはwarn, error, offで利用をカスタマイズできます。
ルール一覧は公式ドキュメントに載っています：Rules
あえて Biome のルールを無視する場合
特定のケースでリンターの警告を無視する場合は、無視したい箇所の上にコメントを追加します。
例えば、今回のブログプロジェクトでは markdown を HTML に変換したものを表示するためにdangerouslySetInnerHTMLを使いますが、これはリンターのルールで禁止されています。
export function PostBody({ content }: Props) {
return (
<div className="mx-auto mt-16 znc">
<div
className={markdownStyles.markdown}
// biome-ignore lint/security/noDangerouslySetInnerHtml: ここだけ許可
dangerouslySetInnerHTML={{ __html: content }}
/>
</div>
);
}
こんな感じでコメントを書けば、警告がなくなります。
細かいですがコロンの後にルールを無効にする理由を書くのが必須の形式になっており、いいなと感じました。
惰性で無視したくなる人の気持ちを粉々に砕いてくれます。
VSCode と統合する
エディタで保存時などに自動フォーマットしてくれるように設定します。
拡張機能をインストールしましょう。
ブログなので誰と一緒に開発するわけでもないですが、一応 extensions.json にも記載します。
ここに入れておくと、VSCode の拡張機能タブで Recommended として表示されるようになります。
{
"recommendations": [
"biomejs.biome"
]
}
次に settings.json を編集します。
{
// formatter
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}
source.organizeImports.biomeは import の順番を一定のルールに沿ってソートしてくれる機能です。
余談ですが、settings.jsonはプロジェクト内の.vscode/settings.jsonが一番優先されます。
チーム開発の場合は上記設定をプロジェクト内に入れるのが良さそうです。
まとめ
デフォルト設定では少し気に入らなかったりで結局設定は必要になってしまいましたが、今まで ESLint, Prettier の二つ気にしないといけなかったところを Biome ひとつで完結できるのは嬉しいです。
リンタールールを見ているとnoRestrictedImportsなど細かな制御ルールもしっかりサポートされている印象でした。
開発も活発な Biome、今後も使っていきたいと思います。