BiomeをVueプロジェクトで使ってみよう

2024年3月のアップデートでBiomeがAstro、Svelte,Vueファイルに部分的に対応したのでVueプロジェクトで使ってみた。

前提条件

• Node.js (v18以上)
• npmまたはyarn

Vueプロジェクトへの導入

Vueプロジェクトの作成

まず、Viteを使って新しいVueプロジェクトを作成します。

npm create vite@latest biome-test -- --template vue

または

yarn create vite biome-test --template vue

次に、biome-testディレクトリに移動し、必要なライブラリをインストールします。

cd biome-test
npm install

または

cd biome-test
yarn install

Biomeのインストールと設定

インストール手順

以下のコマンドを使用して、Biomeをプロジェクトにインストールします。

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

または

yarn add --dev --exact @biomejs/biome

設定ファイルの作成

次に、Biomeの初期設定を行います。

npx @biomejs/biome init

または

yarn biome init

このコマンドを実行すると、プロジェクトのルートディレクトリにbiome.jsonファイルが作成されます。2024年8月現在の内容は以下の通りです。

{
	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Biomejsの設定をVueプロジェクトに適用する方法

プロジェクトのルートディレクトリのpackage.jsonに以下のスクリプトを追加します。

"scripts": {
  "lint": "biome lint ./src", // Lintのチェック
  "lint-fix": "biome lint --fix ./src", // Lintのチェックと自動修正
  "format": "biome format ./src", // Formatのチェック
  "format-fix": "biome format --fix ./src" // Formatのチェックと自動修正
}

Biomeの機能を試す

lint機能の使用方法

以下のコマンドを実行して、コードのlintチェックを行います。

npm run lint

または

yarn lint

lint機能のエラーを出してみる

srcディレクトリのmain.jsに下記コードを追加してみる。

const z = function() {
  return 0;
}

もう一度lintチェックを行うと、以下のようなエラーが表示されます。

./src/main.js:7:11 lint/complexity/useArrowFunction  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This function expression can be turned into an arrow function.
  
     5 │ createApp(App).mount('#app')
     6 │ 
   > 7 │ const z = function() {
       │           ^^^^^^^^^^^^
   > 8 │   return 0;
   > 9 │ }
       │ ^
    10 │ 
  
  ℹ Function expressions that don't use this can be turned into arrow functions.
  
  ℹ Safe fix: Use an arrow function instead.
  
     5 5 │   createApp(App).mount('#app')
     6 6 │   
     7   │ - const·z·=·function()·{
     8   │ - ··return·0;
     9   │ - }
       7 │ + const·z·=·()·=>·0
    10 8 │   
  

Checked 3 files in 11ms. No fixes applied.
Found 1 error.
lint ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

lint機能で自動修正機能を試す

次に、lint機能の自動修正オプションを使用してみます。

npm run lint-fix

または

yarn lint-fix

追加したコードが以下のように書き換わります。

const z = () => 0

format機能の使用方法

以下のコマンドを実行して、コードのフォーマットを確認します。

npm run format

または

yarn format

Viteで作成したVueプロジェクトの場合、以下のエラーが表示されます。

./src/App.vue format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Formatter would have printed the following content:
  
     1  1 │   <script setup>
     2    │ - import·HelloWorld·from·'./components/HelloWorld.vue'
        2 │ + import·HelloWorld·from·"./components/HelloWorld.vue";
     3  3 │   </script>
     4  4 │   
  

./src/main.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Formatter would have printed the following content:
  
    1   │ - import·{·createApp·}·from·'vue'
    2   │ - import·'./style.css'
    3   │ - import·App·from·'./App.vue'
      1 │ + import·{·createApp·}·from·"vue";
      2 │ + import·"./style.css";
      3 │ + import·App·from·"./App.vue";
    4 4 │   
    5   │ - createApp(App).mount('#app')
      5 │ + createApp(App).mount("#app");
    6 6 │   
    7   │ - const·z·=·()·=>·0
      7 │ + const·z·=·()·=>·0;
    8 8 │   
  

./src/components/HelloWorld.vue format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Formatter would have printed the following content:
  
     1  1 │   <script setup>
     2    │ - import·{·ref·}·from·'vue'
        2 │ + import·{·ref·}·from·"vue";
     3  3 │   
     4  4 │   defineProps({
     5    │ - ··msg:·String,
     6    │ - })
        5 │ + → msg:·String,
        6 │ + });
     7  7 │   
     8    │ - const·count·=·ref(0)
        8 │ + const·count·=·ref(0);
     9  9 │   </script>
    10 10 │   
  

Checked 3 files in 12ms. No fixes applied.
Found 3 errors.
format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

format機能で自動修正機能を試す

format機能の自動修正オプションを使用してみます。

npm run format-fix

または

yarn format-fix

まとめ

現状では部分的な適用にとどまっていますが、2024年のロードマップにはHTMLやMarkdownなどの対応言語を増やしていく予定が示されています。
これにより、Vueファイルのtemplateタグ内のlintやformatも今年中に対応できるかもしれません。

そうなれば、設定がさらに簡単になり、開発効率が大幅に向上することが期待できるので楽しみで仕方がない！