今さらBiomeを使ってみる

Biomeを使ってみる

Biomeとは

これ

https://biomejs.dev/ja/

サイトが日本語対応している！

簡単に言うと,ESLintとPrettierの代わりとなるやつ

Rustでできていてくそはやい

ちな,開発終了したRomeを作った人が,あらたに作っているらしい.

というわけで最低限のハンズオンをやる.

はじめるよ

インストール

yarn add --dev --exact @biomejs/biome

初期設定とか

yarn biome init

biome.jsonが作られる.ようは.eslintrcと.prettierrc

{
	"$schema": "https://biomejs.dev/schemas/1.6.2/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

organizeImportsはimportの順番をいい感じにしてくれるやつ.これがデフォルトであるのは良い.

動かすよ

format(prettier)

yarn biome format <files> --write

lint(eslint)

yarn biome lint <files>

同時に動かすやつ

yarn biome check --apply <files>

eslint --fix './packages/web/src//*.{js,jsx,ts,tsx}' && prettier --write --ignore-path .gitignore './packages/web/src//*.{js,jsx,ts,tsx}'みたいなことしなくていいからこれ待ってたんだわ感

この--applyをつけると正しいコードに書き換えてくれる.

しかし,厳密には,「アプリをぶっ壊さない程度に安全に書き換えてくれる」って感じで,いいからエラーは全部書き換えてくれやってのは,--apply-unsafeってオプションをつければ良い.

ignoreコメントアウト

こんな感じ

// biome-ignore format: <comment>
// biome-ignore lint: <comment>
// biome-ignore lint/suspicious/noDebugger: <comment> // ルール指定

拡張機能も入れてVSCodeの設定をする

VSCodeの拡張機能がある.

https://biomejs.dev/ja/reference/vscode/

これを入れて,保存したときに整形されるようにしよう.

設定は,

settings.json

{
  "editor.defaultFormatter": "biomejs.biome", // ここはご自由に
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

これで良さそう.

ただ,

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

みたいのがあるとこっちが優先されるので注意.

prettierやeslintの設定と競合しないように設定を見直すと良き.

感想

設定ファイル極小,動作爆速.言う事無し.