Biome の設定をカスタマイズしてみた
はじめに
前回の記事 で Biome を試してみました。
今回は実際のプロジェクトに導入するにあたって、設定を色々と試してみました。
今回の設定
まだ色々演る予定ですが、現状はこうなりました。
{
"$schema": "https://biomejs.dev/schemas/2.3.15/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"includes": [
"public/js/**/*.js",
"resources/js/**/*.js",
"resources/js/**/*.ts",
"resources/js/**/*.vue",
"vite.config.js"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"useBlockStatements": "error"
},
"nursery": {
"noExcessiveLinesPerFile": {
"level": "warn",
"options": {
"maxLines": 500
}
}
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
},
"overrides": [
{
"includes": ["resources/js/**/*.vue"],
"linter": {
"rules": {
"correctness": {
"noUnusedVariables": "off",
"noUnusedImports": "off"
}
}
}
}
]
}
それぞれ見ていきます。
vcs - Git 連携
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
}
useIgnoreFile: true にすると、.gitignore に書かれているファイルを Biome も無視してくれます。
node_modules とか vendor とか、いちいち Biome 用に除外設定を書かなくて済むので楽。
files.includes - 対象ファイルを絞る
"files": {
"ignoreUnknown": false,
"includes": [
"public/js/**/*.js",
"resources/js/**/*.js",
"resources/js/**/*.ts",
"resources/js/**/*.vue",
"vite.config.js"
]
}
今回は Laravel + Vue のプロジェクトなので、フロントエンドのファイルだけを対象にしました。
includes を指定すると、ここに書いたパターンにマッチするファイルだけが対象になります。
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
}
デフォルトはタブなので、スペース派の人はここで変えます。
カスタムルールを追加
recommended だけだと物足りなかったので、いくつかルールを追加しました。
useBlockStatements
"style": {
"useBlockStatements": "error"
}
これは if 文とかで波括弧を強制するルール。
if (foo) return;
if (foo) {
return;
}
noExcessiveLinesPerFile
"nursery": {
"noExcessiveLinesPerFile": {
"level": "warn",
"options": {
"maxLines": 500
}
}
}
1 ファイルの行数が 500 行を超えると警告を出すルール。
nursery は実験的なルールが入っているカテゴリで、まだ安定版じゃないルールを試せます。
overrides - ファイルごとにルールを変える
"overrides": [
{
"includes": ["resources/js/**/*.vue"],
"linter": {
"rules": {
"correctness": {
"noUnusedVariables": "off",
"noUnusedImports": "off"
}
}
}
}
]
Vue ファイルだけ noUnusedVariables と noUnusedImports を off にしてます。
Vue の <script setup> で定義した変数は <template> で使うことが多いんですが、Biome がそれを検知できずに「使ってないよ」って怒ってくることがあったので。
experimental な Vue 対応がもう少し進んだら、このあたりも改善されるかもしれません。
assist - import の自動整理
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
前回の記事で organizeImports を有効にしていたのですが、v2 系から設定の書き方が変わってました。
assist というセクションで、エディタ連携時のアクションを設定します。
まとめ
色々と試してるんですが、個人的には何も考えずBiomeだけになってほしい。
ではでは。
