## 経緯 [[Biome]]がちょっと気になってきたので、軽く触ってみる。ちょっと[[TypeScript]]書きたいときは[[Bun]]に軍配上がるだろうけど、[[Node.js]]環境で動かさなければいけないときは便利そうなので。 ## インストールと設定 ```console mkdir biome-sandbox cd biome-sandbox npm i -D typescript @tsconfig/recommended @biomejs/biome cat > tsconfig.json << EOF { "extends": "@tsconfig/recommended/tsconfig.json" } EOF ``` `index.ts`を作成。 ```ts function sum(x: number, y: number): number { return x + y; } function main() { var total = sum(1, 100); console.log(`total: ${total}`); } ``` ## 実行 [[フォーマッター]]と[[リンター]]それぞれに対して修正点が表示される。 ```console $ npx biome check . ./index.ts:6:3 lint/style/noVar FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Use let or const instead of var. 5 │ function main() { > 6 │ var total = sum(1, 100); │ ^^^^^^^^^^^^^^^^^^^^^^^ 7 │ console.log(`total: ${total}`); 8 │ } ℹ A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outsi de the block where it is declared. ℹ See MDN web docs for more details. ℹ Unsafe fix: Use 'const' instead. 4 4 │ 5 5 │ function main() { 6 │ - ··var·total·=·sum(1,·100); 6 │ + ··const·total·=·sum(1,·100); 7 7 │ console.log(`total: ${total}`); 8 8 │ } ./index.ts lint ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ The file contains diagnostics that needs to be addressed. ./index.ts format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ Formatter would have printed the following content: 1 1 │ function sum(x: number, y: number): number { 2 │ - ··return·x·+·y; 2 │ + → return·x·+·y; 3 3 │ } 4 4 │ 5 5 │ function main() { 6 │ - ··var·total·=·sum(1,·100); 7 │ - ··console.log(`total:·${total}`); 6 │ + → var·total·=·sum(1,·100); 7 │ + → console.log(`total:·${total}`); 8 8 │ } 9 9 │ ./index.ts check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ The file contains diagnostics that needs to be addressed. Checked 1 file(s) in 1263µs Found 4 error(s) check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Some errors were emitted while running checks. ``` ## Neovimで動かす [[coc-biome]]というものがあるのでそれを使う。 <div class="link-card"> <div class="link-card-header"> <img src="https://biomejs.dev/img/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">Biome</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Integrate Biome in your editor</p> <p class="link-card-description">Learn how you can integrate Biome with editors and IDEs</p> </div> <img src="https://biomejs.dev/img/og.png?v=1" class="link-card-image" /> </div> <a href="https://biomejs.dev/guides/integrate-in-editor/#third-party-plugins"></a> </div> インストールしたものの動かない... どうやら `biome.json` が必要らしい。 ```console npx biome init ``` `biome.json`ができた。 ```json { "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } } } ``` [[Neovim]]で確認すると、エディタ上にエラーが表示される。 ## フォーマッターが有効にならない このままだと[[フォーマッター]]が有効になっていないので、`formatter`も追加する。 ```json { "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } }, "formatter": { "enabled": true } } ``` しかし、これだけでは[[Prettier]]の方が優先されてしまう。[[coc-settings.json]]で`prettier.enable: false`とすれば[[Biome]]が優先されるが、都度変更するのは流石に面倒。 [[coc.nvimで現在のプロジェクト配下のみ有効な(上書き)設定]]をすることにより 、明示的に[[coc-prettier]]を無効化する。 `.vim/coc-settings.json` ```json { "prettier.enable": false } ``` ## インデントをスペースにする デフォルトだと[[Biome]]のインデントはタブなので、スペースにしてみる。 ```json "formatter": { "enabled": true, "indentStyle": "space" } ``` いい感じになった。 ## Bunでも使ってみる 先ほどまでは[[Node.js]]だったが、今度は[[Bun]]でも使ってみる。 ```console mkdir bun-biome-sandbox cd $_ bun init . -y bun add -d @biomejs/biome cat > .vim/coc-settings.json << 'EOF' { "prettier.enable": false } EOF cat > biome.json << 'EOF' { "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } }, "formatter": { "enabled": true, "indentStyle": "space" } } EOF ```