t28.dev

biome を使ってみる

2024/9/21
Scrap

その前にサポート状況をチェック。

https://biomejs.dev/ja/internals/language-support/

.vue および .svelte ファイルでは、

template, script tag に対してせめて format だけでも動作してくれないと導入は厳しいな…。

pnpm add --save-dev --save-exact @biomejs/biome

( '8')   < $ pnpm biome init

Welcome to Biome! Let's get you started...

Files created

  - biome.json
    Your project configuration. See https://biomejs.dev/reference/configuration

Next Steps

  1. Setup an editor extension
     Get live errors as you type and format when you save.
     Learn more at https://biomejs.dev/guides/integrate-in-editor/

  2. Try a command
     biome check  checks formatting, import sorting, and lint rules.
     biome --help displays the available commands.

  3. Migrate from ESLint and Prettier
     biome migrate eslint   migrates your ESLint configuration to Biome.
     biome migrate prettier migrates your Prettier configuration to Biome.

  4. Read the documentation
     Find guides and documentation at https://biomejs.dev/guides/getting-started/

  5. Get involved with the community
     Ask questions and contribute on GitHub: https://github.com/biomejs/biome
     Seek for help on Discord: https://discord.gg/BypW39g6Yc

出力された設定ファイルが 👇️。ドキュメントと違うな〜環境毎にふるまいが違うのかな〜と思っていたら、 ここに書いてあるデフォルトの設定 の通りだった。

( '8')   < $ cat biome.json
{
	"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false,
		"ignore": []
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	}
}

とりあえず実行してみる

$ biome check

(...)

Skipped 59 suggested fixes.
If you wish to apply the suggested (unsafe) fixes, use the command biome check --fix --unsafe

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 23590.
Checked 165 files in 965ms. No fixes applied.
Found 399 errors.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

めっちゃでた。

とりあえず全部 disabled にしてみる。

{
  "formatter": {
    "enabled": false
  },
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": false
  }
}

( '8')   < $ biome check
Checked 0 files in 3ms. No fixes applied.
internalError/io ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ No files were processed in the specified paths.

format を "enabled": true, にしてみる。

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 130.
Checked 165 files in 238ms. No fixes applied.
Found 144 errors.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

めっちゃ出た。tab の差分指摘が出ているので、"indentStyle": "space" にしてみる。

$ biome check

(...)

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 21.
Checked 165 files in 240ms. No fixes applied.
Found 35 errors.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

エラーは減ったけど、まだ多い。 余計なファイルを見るようになってしまった。

/xxx/app.t28.dev/dist/lovelive/aprilfool-2024/assets/index-DoNMsJFD.js format ━━━━━━━━━━

  ✖ Size of /xxx/app.t28.dev/dist/lovelive/aprilfool-2024/assets/index-DoNMsJFD.js is 1.1 MiB which exceeds configured maximum of 1.0 MiB for this project.
    The file size limit exists to prevent us inadvertently slowing down and loading large files that we shouldn't.
    Use the `files.maxSize` configuration to change the maximum size of files processed.

"ignore" を設定してみる。

Checked 135 files in 14ms. No fixes applied.
Found 5 errors.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

現実的な数になった。

// prettier-ignore していたコードには // biome-ignore format: が必要。

https://biomejs.dev/ja/formatter/#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AEformat%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B

// 👇️ こっちが biome の format
// prettier-ignore
export const hoge = (
  params: {
    [key in string]?: { [key in string]?: string };
  },
) => {};

// 👇️ こっちが prettier の format
// biome-ignore format:
export const hoge = (params: {
  [key in string]?: { [key in string]?: string };
}) => {};

biome のコードの方が好みだな…。

これらを解決して…

$ biome check --write
Checked 135 files in 17ms. No fixes applied.

いぇーい ✌️

linter も enable にしてみる。

$ biome check --max-diagnostics none

Checked 135 files in 29ms. No fixes applied.
Found 151 errors.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

さすがに結構出るな〜。エラーしているルールを取り出してみる。 エラーになったルールを全部標準エラー出力に出力して欲しいから、--max-diagnostics を使う。

( '8')   < $ biome check --max-diagnostics none 2>&1 | grep "lint/" | awk '{print $2}' | sort | uniq
lint/a11y/useValidAnchor
lint/complexity/noBannedTypes
lint/complexity/noForEach
lint/complexity/useLiteralKeys
lint/correctness/useExhaustiveDependencies
lint/style/noNonNullAssertion
lint/style/noUnusedTemplateLiteral
lint/style/useConst
lint/style/useImportType
lint/style/useNumberNamespace
lint/style/useSelfClosingElements
lint/style/useShorthandFunctionType
lint/style/useTemplate
lint/suspicious/noArrayIndexKey
lint/suspicious/noAssignInExpressions
lint/suspicious/noEmptyInterface
lint/suspicious/noExplicitAny
lint/suspicious/noImplicitAnyLet

$ biome lint --only lint/complexity/noBannedTypes

って感じでエラーさせたいルールを指定できるのは便利だな〜（この記事を書く場合は)

まだ biome を導入するわけではないから、 lint の修正はやめとこ

実行速度はさすがに関心するな〜。移行したくなる気持ちも分かる