【JS】Rust製の高速なFormatter・LinterであるBiomeを使ってみる
今回はタイトル通り、Rust製の高速なFormatter・LinterであるBiomeというものを見つけたので触ってみます。
JSを使って開発するときに、大体使うであろうツールがESlintやPrettierです。
それぞれ、どういうものを正しいとするか、という設定が入っているんですが、毎回よくわからず使っていました。
その辺のブログ等で紹介されているものをそのまま使ったり、過去使った設定をそのまま流用したりしがちできちんと使いこなせていないのが現状でした。
RubyだとRubocopとかもそうですが、正直この辺の設定を詰めるよりも、それなりに統一した形でコードが書ければ何でもよいだろう、と思っています。
そんな中で、見つけたのがBiomeになります。
https://biomejs.dev/ja/Formatter・Linterですが、大量の設定項目から適宜設定をON・OFFするというよりも
設定なしのデフォルトですぐに使えるような設計になっています。
よくわからない項目をこねくり回す必要がないのが、個人的にとても好きなところです。
なお、もちろんですが、細かい調整については設定ファイルを作って制御もできます。
ということで、雑にインストールして動かしてみます。
Biomeをインストール
以下のドキュメントをもとに作業を進めていきます。
https://biomejs.dev/ja/guides/getting-started/ドキュメントが大体は日本語化されているので、困ることはないと思います。
ただし、バージョンによって変更点がある場合もあるので、英語版も見ておくと良いと思います。
手元ではyarnを使っているので、yarnでインストールしていきます。
yarn add --dev --exact @biomejs/biome特に困ることはないはずです。
Biomeを動かしてみる
サンプルとして、以下のようなコードに対してチェックしてみます。
いらない変数を宣言していたり、セミコロンが無かったりといろいろ雑なコードです。
function hoge(){
let a=1
let b=0
console.log(a)
}Linterでチェックしてみる
構文解析させてみます。
$ yarn biome lint src/hoge.js ?[create_task]
src/hoge.js:2:5 lint/style/useConst FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ This let declares a variable that is only assigned once.
1 │ function hoge(){
> 2 │ let a=1
│ ^^^
3 │ let b=0
4 │ console.log(a)
ℹ 'a' is never reassigned.
1 │ function hoge(){
> 2 │ let a=1
│ ^
3 │ let b=0
4 │ console.log(a)
ℹ Safe fix: Use const instead.
1 1 │ function hoge(){
2 │ - ····let·a=1
2 │ + ····const·a=1
3 3 │ let b=0
4 4 │ console.log(a)
src/hoge.js:3:5 lint/style/useConst FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ This let declares a variable that is only assigned once.
1 │ function hoge(){
2 │ let a=1
> 3 │ let b=0
│ ^^^
4 │ console.log(a)
5 │ }
ℹ 'b' is never reassigned.
1 │ function hoge(){
2 │ let a=1
> 3 │ let b=0
│ ^
4 │ console.log(a)
5 │ }
ℹ Safe fix: Use const instead.
1 1 │ function hoge(){
2 2 │ let a=1
3 │ - ····let·b=0
3 │ + ····const·b=0
4 4 │ console.log(a)
5 5 │ }
Checked 1 file in 16ms. No fixes applied.
Found 2 errors.
lint ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Some errors were emitted while running checks.特にLinterに対して設定していませんが、きちんと不要な宣言だったり、変数を書き換えていないのでconstに直してくれたりと指摘してくれています。
Formatterでチェックしてみる
次に、フォーマッタを実行して確認してみます。
$ yarn biome format src/hoge.js ?[create_task]
src/hoge.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Formatter would have printed the following content:
1 │ - function·hoge(){
2 │ - ····let·a=1
3 │ - ····let·b=0
4 │ - ····console.log(a)
1 │ + function·hoge()·{
2 │ + ··let·a·=·1;
3 │ + ··let·b·=·0;
4 │ + ··console.log(a);
5 5 │ }
6 6 │
Checked 1 file in 10ms. No fixes applied.
Found 1 error.
format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Some errors were emitted while running checks.手元の環境ではeditorconfigでJSファイルはインデントを2スペースで行うようにしているので、それに沿ってインデント幅の調整と、各行の末尾にセミコロンを追加してくれています。
こちらもデフォルト状態で、きちんと指摘してくれていることがわかりました。
修正を反映させる
Linterによる修正を反映してみる
では、それぞれの修正を反映させます。
LinterもFormatterも、修正を反映する場合は--write-を付けてあげればよい。
まずはLinterの方で修正してもらいます。
yarn biome lint src/hoge.js --write ?[create_task]
Checked 1 file in 19ms. Fixed 1 file.実行結果は以下。
function hoge(){
const a=1
const b=0
console.log(a)
}はい、letをconstに変更してくれています。
Formatterによる修正を反映してみる
続いて、Formatterで修正してもらいます。
yarn biome format src/hoge.js --write ?[create_task]
Formatted 1 file in 11ms. Fixed 1 file.実行結果は以下。
function hoge() {
const a = 1;
const b = 0;
console.log(a);
}きちんと=の前後にスペースを入れてくれたり、セミコロンを追加してくれています。
まとめ
今回は、Rust製の高速なFormatter・LinterであるBiomeというものを見つけたので触ってみました。
ESLintやPrettierをよくわからず使っている場合は、ほぼそのまま移行できるのでおススメです。
ESlLintやPrettierの設定ファイルを参照してBiomeの設定ファイルを生成するコマンドも用意されているので、移行も簡単かなと。
https://biomejs.dev/ja/reference/cli/#biome-migrate今回は、ここまで。
おわり