Biome v2.3よりVueやSvelteコンポーネントのlintとformatに完全対応しました

この記事の本文は人間が書き、AIにチェックしてもらいました。
例示用のコードはAIを使いました。

記事要約

• Biome v2.3より.vue, .svelte, .astroファイルのHTMLについてもlintやfromatを実行できる機能が追加されました
• まだ試験的な機能のため対応していないケースもある
• biome.jsonに下記を追加するとlintとformatが有効になります

biome.json

 {
   "html": {
+    "formatter": {
+      "enabled": true
+    },
+    "experimentalFullSupportEnabled": true
+  }
 }

はじめに

TypeScriptやJavaScript、JSXやCSSなど、Web開発で使う様々な言語のlintやformatが行えるツールにBiomeというものがあります。

これがv2.3より、Vue、Svelte、Astroのコンポーネントファイルに対するフルサポートが始まりました。
まだ試験的な機能として実装ですが、Biomeだけでコンポーネントのlintやformatが行えるようになるのは大変うれしいですね。

従来は<script>や<style>部のみの対応でしたが、<template>部へのlintやformatが対応されました。

使ってみる

まずはBiomeをインストールしましょう。

npm install --save-dev --save-exact @biomejs/biome

インストールが完了したらBiomeの設定ファイルを作成します。

npx @biomejs/biome init

コンポーネントファイルへのサポートはまだ試験的な機能のため、lintとformatを有効にする設定を追加します。

biome.json

 {
+  "html": {
+    "formatter": {
+      "enabled": true
+    },
+    "experimentalFullSupportEnabled": true
+  }
 }

これにて設定は完了です。

lintの実行

筆者はフロントエンドがあまりわからないため、ChatGPTに以下のようなコンポーネントを作成してもらいました。

TestLinter.vue

<template>
  <div>
    <span :class=="foo">broken bind</span>
  </div>
</template>

こちらのコードに対してlintを行います。

npx @biomejs/biome lint src/components/TestLinter.vue

めちゃくちゃ怒られました。いいですね。

formatの実行

次はformatを実行してみましょう。先程のコードのエラーを修正し、インデントをめちゃくちゃにしたものを用意しました。

TestFormatter.vue

<template>
  <div>
              <span :class="foo">broken bind</span>
  </div>
</template>

こちらに対してformatを実行してみます。

npx @biomejs/biome format src/components/TestFormatter.vue

無事にコードフォーマットを修正してくれそうですね！

あとがき

Web開発で使用する言語のlintとformatが一つのツールで完結し、なおかつ設定ファイルを作り込まなくてもいいBiomeが、VueやSvelteのコンポーネントファイルに完全対応してくれたのはとても嬉しいですね。
VS CodeやJetBrains向けの拡張機能もあるようで、こちらを使うと開発体験がなおさら向上しそうです。

まだ試験的な機能なのでちょいちょいバグがあるようです。

それではよいlint, formatライフを