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も今年中に対応できるかもしれません。
そうなれば、設定がさらに簡単になり、開発効率が大幅に向上することが期待できるので楽しみで仕方がない！
Discussion