Svelte に Biome を導入してみる
はじめに
Svelte Advent Calendar 2024 の10日目の記事です！
なので Svelte については知っている前提で説明を割と端折っています。
Svelte について知りたい方はコチラをどうぞ！
参考記事
Biome とは？
format、lintなどが一瞬で完了します！
Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速なformatter であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。
Biome は高速な formatter 兼 linter ツールです。
よく ESLint と Prettier を１つにした感じなどと説明されることが多いです。概ねその通りだなと思う一方で実際は２つのツールを使っていたときよりも爆速かつ管理もシンプルになり、すこぶる開発体験が良いです。
筆者は React の開発の際に初めて Biome を試したのですが、高速な動作もさることながらシンプルに format や lint を管理できる点が魅力に感じ、それ以来は formatter/linter は Biome を積極的に採用しています。
そんな Biome がいつの間にか Svelte にも一部対応していたので導入してみようと思います！
Biome を Svelte で使う上での注意点（2024年12月現在）
Svelte はまだ部分的にサポートされいる状態です。具体的には <script> タグの部分しかサポートされていません。また .svelte ファイルを format する際はコードのインデントが最初から始まります。
<script>
- import Sample from "./Sample.svelte";
+import Sample from "./Sample.svelte";
</script>
Biome の導入
Svelte プロジェクトの作成
お好みの方法で Svelte プロジェクトを作成してください。
npm create svelte@latest my-app
Biome のインストール
npm i -D --save-exact @biomejs/biome
公式のページでは npm の他にも yarn/pnpm/bun/deno のコマンドについても書かれています。
設定ファイルの作成
npx @biomejs/biome init
上記のコマンドを実行するとデフォルトの biome.json が新規に作成される。
作成されるファイル
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false,
"ignore": []
},
"formatter": {
"enabled": true,
"indentStyle": "tab"
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
}
}
.svelte を lint する際はコンパイラエラーを防ぐためにいくつかのルールをオフにすることが推奨されているため、overrides オプションを追加する。
{
@@ 省略 @@
"overrides": [
{
"include": ["*.svelte"],
"linter": {
"rules": {
"style": {
"useConst": "off",
"useImportType": "off"
}
}
}
}
]
}
Biome の設定
bimome.json だが biome.jsonc の形式もサポートしている。linter や formatter の設定は「なぜ無効にしているのか」を明文化しておきたいので biome.jsonc で管理するのが気に入っている。
linter
基本的には "recommend": true で問題ないように思うが、対応しないものは "off" にしていくのが良さそう。ここに推奨ルールを全て書くと長いことになるので参考となるドキュメントを貼っておく。
formatter
インデントはデフォルトがタブなのでスペースに変えたい場合は下記の通り。
{
@@ 省略 @@
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
},
@@ 省略 @@
}
それ以外の設定は linter 同様参考となるドキュメントを貼っておきます。
実際に動かしてみる
"scripts" に登録する
"scripts" にコマンドを登録する。これで CI などの際にも呼び出しやすくなる。
{
@@ 省略 @@
"scripts": {
@@ 省略 @@
+ "lint": "biome lint ./src"
},
@@ 省略 @@
}
lint を実行
npm run lint
しっかりエラーが出ていて良い感じ。さほど大きなプロジェクトではないですが動作も爆速です！
またコード修正のコマンドもあるため活用すると捗ります。
format を試す
VSCode 拡張機能が公式から提供されているため、インストールした上で設定すると自動で format してくれます。また拡張機能は quick fix を出してくれたりもするので便利です。
設定のサンプル
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "biomejs.biome",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
"quickfix.biome": "always",
"source.organizeImports.biome": "always"
}
}
コマンドで使いたい場合
先に注意した通り <script> 内はインデントのない状態から始まるため、ここは好みが別れそう。
<script lang="ts">
- import Header from "./components/Header.svelte";
- import ModeController from "./components/ModeController.svelte";
- import MainBoard from "./components/MainBoard.svelte";
- import NumController from "./components/NumController.svelte";
- import Footer from "./components/Footer.svelte";
+import Footer from "./components/Footer.svelte";
+import Header from "./components/Header.svelte";
+import MainBoard from "./components/MainBoard.svelte";
+import ModeController from "./components/ModeController.svelte";
+import NumController from "./components/NumController.svelte";
</script>
まとめ
Biome は Svelte プロジェクトにも導入でき、特にその高速性とシンプルさが魅力的です。
また日本語のドキュメントも充実しており、初めて触れる方でも比較的スムーズに設定・利用が進められると思います。ただ一方で <script> 内のインデント仕様など、現時点では一部好みが別れる点もありますが、個人的にはそれを踏まえても十分に試す価値があると考えています！
Discussion