## 要件 ### IF - [[Neovim]]や[[VSCode]]などのエディタでファイル保存時に自動でフォーマットできる - vueファイル、tsファイル - CLIでフォーマットチェックできる - フォーマットがされていなかったらexit 1 ### 機能 - [[prettier-plugin-tailwindcss]]の主要機能が使える - [[cva]]、[[cn]]関数内のソートにも対応できる - importの自動ソートと不要importの削除ができる - [[Prettier Plugin Organize Imports]]の機能相当 ### 安定性 - [[Neovim]]や[[VSCode]]で導入がある程度容易 - プラグインなどがある - バージョンアップで動かなくなることが少ない - メジャーバージョン(v1以上)である ## 2026/02/17 時点 [[Prettier]]を使う。そこまでちゃんと調査していないが、現時点では費用対効果が悪そう。 - [[prettierd]]を使っていれば[[Prettier]]の速度がネックになるケースはあまりない - ローカルチェックなら `--experimental-cli` をつけると `check` は高速 - ただCIでは使えないので旨味は少ないかも... `pre:push` くらい - [[Biome]]と[[Oxfmt]]が[[Vue]]のサポートにおいてはまだ不安定 それぞれの備考。 - [[Biome]] - [[Vue]]のサポートが部分的であり不安定 - 本格的なサポートはv2.3から開始されたため (現在v2.4) - unused系のLint rulesなどに対応できていない - [[tsc]] + [[vue-tsc]]で十分ならこれは不要かもしれない - [[Lint]]の優先度はそこまで高くない - [[Tailwind CSS]]のサポート状況が十分でない - 必要としている機能は実装されている可能性もあるので、再調査の余地はある - [[Oxfmt]] - v1に達していない - 他は未調査 ### 参考 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📜2026-02-16 Biome 2.4をVueプロジェクトで試してみる </div> <div class="link-card-v2-content">Biome 2.4.0をNuxt 4とVue 3環境で導入し、Prettierとprettierdを削除したうえでbiome initとHTML設定を行った。conform.nvim経由のts整形は2.4.1で解消し、Vueはhtml.formatter有効化で対応したが、Tailwind CSSのuseSortedClassesは未成熟でprettier-plugin-tailwindcssより要件を満たさない状況である。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" /> <a data-href="📜2026-02-16 Biome 2.4をVueプロジェクトで試してみる" class="internal-link"></a> </div> %%[[📜2026-02-16 Biome 2.4をVueプロジェクトで試してみる]]%% <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📜2026-02-15 Oxfmtを試してみる </div> <div class="link-card-v2-content">TypeScriptとVueのフォーマッター統一を目的にOxfmtを試し、PrettierやBiomeと速度比較した結果、複数TSファイルでは高速だがalpha版のため採用を見送った</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" /> <a data-href="📜2026-02-15 Oxfmtを試してみる" class="internal-link"></a> </div> %%[[📜2026-02-15 Oxfmtを試してみる]]%%