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

KATO-Hiro commented 11 months ago

WHY

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

See

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

https://github.com/biomejs/biome

KATO-Hiro commented 4 months ago

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

KATO-Hiro commented 3 weeks ago

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

KATO-Hiro commented 3 weeks ago

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

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 commented 3 weeks ago

 ✖ 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 commented 3 weeks ago

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

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

KATO-Hiro commented 1 week ago

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

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

AtCoder-NoviSteps / AtCoderNoviSteps

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

WHY

See