ESLintとPrettierの代わりにbiomeの導入を検討してみましょう

[KATO-Hiro]

WHY

• 高速に動作するらしい
• ツールを一つにまとめて管理できる

See

https://biomejs.dev/blog/biome-v2-3/

https://biomejs.dev/blog/annoucing-biome

https://github.com/biomejs/biome

[KATO-Hiro]

https://zenn.dev/imaimai17468/articles/33e3881405a944

[KATO-Hiro]

• [x] ツールの移行方法を調べる
• [x] 導入
• [x] ローカル環境で動作確認
• [ ] 使用ツールに関するドキュメントを更新
• [ ] actionsを必要に応じて修正 + CIで動作確認

[KATO-Hiro]

基本的なコマンドを使った感想

• good: 10〜30秒掛かっていたところが、数〜数十ms程度とかなり高速にチェックできるメリットはとても大きい。毎回の待ち時間が大幅に短縮されるメリットは捨てがたい。
• room to improve: ESLintやPrettierのルールを引き継いでいるはずなのに、LintエラーやFormatエラーが多発 + 互換性がない設定で発生しているエラーなので納得しづらい
  • ESLintからの設定の移行で、循環参照が発生
    • eslint-plugin-svelteを設定ファイルに記述していないので、どこで発生しているのが分かっていない
    • 一旦pendingにはしているが、問題はなさそう
    • "semicolons": "always", になっているか確認
  • scriptタグの内部のコードのインデントを勝手に消して来るが、対応するオプションがない
    • ドキュメントを確認すると、仕様らしい。が、Svelteの基本的な書き方に反しているので、個人的には許容しがたい
    • https://biomejs.dev/internals/language-support/ (2024年8月現在、Svelteには部分的な対応)
    • 本家のissues/1719で言及されているが、技術的な課題がある? + 他の優先度が高いと思われる
  • 変数を使用しているのに誤検出、安全ではない対応策として_をつけるように指示してくる
    • ローカル変数として識別するためであるなら、やむをえないかも
  • prettier-plugin-tailwindcssに相当するプラグインがなく、結局はPrettierを使うか自作のスクリプトで対処する必要がある
    • ESLintやPrettierからBiomeへの完全乗り換えを期待していた
    • 現実的な利用方法として、FormatやLintはBiome、prettier-plugin-tailwindcssはプラグインが用意されるまでPrettierを使う

[KATO-Hiro]

 ✖ Formatter would have printed the following content:
  
     1  1 │   <script lang="ts">
     2    │ - ··import·{·Toast·}·from·'flowbite-svelte';
     3    │ - ··import·CloseCircleSolid·from·'flowbite-svelte-icons/CloseCircleSolid.svelte';
        2 │ + import·{·Toast·}·from·'flowbite-svelte';
        3 │ + import·CloseCircleSolid·from·'flowbite-svelte-icons/CloseCircleSolid.svelte';
     4  4 │   
     5    │ - ··export·let·errorMessage:·string·|·null·=·null;
        5 │ + export·let·errorMessage:·string·|·null·=·null;
     6  6 │   </script>
     7  7 │   

[KATO-Hiro]

2024年8月時点では、一旦見送り。

上記の修正に対してインデントのオプションが用意されたら、すぐにでも導入したい。

[KATO-Hiro]

SvelteKitとbiomeの導入事例．インデントはされていない．

https://github.com/claudiorivera/expense-tracker-svelte-kit https://github.com/Barbacoa08/barbajoe