eslint & prettier → biome に移行する

2023-11-18

JavaScript

概要

eslint & prettier 両方入れないといけないのが常々面倒だったが、biome だと実行時間も早いらしいので移行してみる。

移行結果

PR: eslint & prettier → biome #9
node_modules 配下の容量： 978M → 917M と大幅に減らせた
lint の実行速度：1.02s → 0.22s と大幅に減らせた
個人的にはintelijを使っているので、依存が減ってindexingにかかる時間が減るのが嬉しい

移行メモ

初期設定

Getting Started

に従ってコマンド打っていく

$ yarn add --dev --exact @biomejs/biome
$ yarn run biome init

初期設定はこれで終わったのでエディタの設定入れていく

Biome - IntelliJ IDEs Plugin | Marketplace Intellij にもプラグインがリリースされてて驚いた
プラグインが保存時に自動でフォーマットしてくれないことだけ微妙...？
- と思ったが解決法があった
- eslint プラグインと違って、Actions on Save の設定で Reformat code を on にしておけば実行されるみたい
- (eslint プラグインは Run eslint --fix を on にする必要があった)

Formatter

Configuration を見ながら、prettier でフォーマットしたファイルと差異が内容に調整した。最終的にはこんな感じ

{  
    "formatter": {  
       "ignore": ["dist", "node_modules", "build"]  
    },  
    "javascript": {  
       "formatter": {  
          "indentStyle": "space",  
          "semicolons": "asNeeded",  
          "quoteStyle": "single",  
          "trailingComma": "none",  
          "arrowParentheses": "asNeeded"  
       }  
    }  
}

Linter

Biome と ESLint の lint ルールの互換性とかみるに完全に互換性があるわけではなさそう & 元々そんなに真剣にlintのルールを設定していないので、biome の recommended だけ入れて指摘される部分は修正した
追加で指摘されるようになった部分は、納得できるルールだったので特にルールはいじらず終了
一部修正がめんどくさかった部分はコメント入れてignoreした
- Biome - IntelliJ IDEs Plugin | Marketplace が ⌥⏎ コマンドでちゃんと空気読んでignoreのコメント自動生成してくれるので助かる

雑な比較

正確な比較なら何回かやって中央値を取るが、そこまでやる気もないので雑に一回づつやって比較してみる。

eslint & prettierのまま

# node_modules の容量
$ du -sh node_modules/
978M    node_modules/

# yarn.lock の行数
$ wc -l yarn.lock
   11912 yarn.lock

# lint の実行時間
$ time yarn lint
~~中略~~
yarn lint  1.02s user 0.15s system 91% cpu 1.286 total

biome移行後

# node_modules の容量
$ du -sh node_modules/
917M    node_modules/

# yarn.lock の行数
$ wc -l yarn.lock
   10902 yarn.lock

# lint の実行時間
$ time yarn lint
~~中略~~
yarn lint  0.21s user 0.05s system 47% cpu 0.549 total

eslint & prettier → biome に移行する

2023-11-18

JavaScript