Zenn
Open9

CDK プロジェクトに biome を導入する

AWS CDK
Biome
t3yamotot3yamoto
# インストール
$ npm install --save-dev --save-exact @biomejs/biome

# 初期化（biome.json）が作成される
$ npx @biomejs/biome init

Files created ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  - biome.json: Your project configuration. Documentation: 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: https://biomejs.dev/guides/getting-started#editor-setup

  2. Try a command
     biome ci checks for lint errors and verifies formatting. Run biome --help for a full list of commands and options.

  3. Read the documentation
     Our website serves as a comprehensive source of guides and documentation: https://biomejs.dev

  4. Get involved in the community
     Ask questions, get support, or contribute by participating on GitHub (https://github.com/biomejs/biome),
     or join our community Discord (https://discord.gg/BypW39g6Yc)
t3yamotot3yamoto

VS Code 拡張をインストール
https://biomejs.dev/ja/guides/integrate-in-editor/#vs-code

$ code --install-extension biomejs.biome

ひとまずこの設定で保存時にフォーマット。以下ページによると、対応ファイルは JavaScript, TypeScript, JSX, JSON, JSONC
https://biomejs.dev/ja/internals/language-support/

.vscode/settings.json
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "biomejs.biome"
}

動いたけど、インデントがタブになる...？

t3yamotot3yamoto

Formatter

https://biomejs.dev/ja/formatter/

デフォルトではインデントがタブらしい。何か思想があるんだろうか。疑問に思いつつスペースに変更することに

biome.json
{
	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"formatter": {
		"indentStyle": "space",
		"lineWidth": 120,
		"ignore": ["cdk.out/", "cdk.json", "package.json", "package-lock.json", "*.snap"]
	}
}
t3yamotot3yamoto

npm scripts を追加。
biome check --apply [path] で Formatter, Linter, Sort imports が動いて修正可能な部分は修正される。
biome ci [path] は CI実行用なのでチェックするだけで修正はなし。

package.json
{
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk",
    "check": "biome check --apply .",
    "check:ci": "biome ci ."
  },
}

https://biomejs.dev/reference/cli/#biome-check
https://biomejs.dev/reference/cli/#biome-ci

t3yamotot3yamoto

ひとまずそれっぽい動きはしてそう。これで様子見

t3yamotot3yamoto

Formatter, Linter の include, ignore ルールの挙動が安定しなくてつらい...
VSCodeでは対象になるけど CLI ではならない、みたいな謎状況になってる
あと 1.5.3 だと不具合あるっぽい？1.5.1 にしてみている

https://github.com/biomejs/biome/issues/1654

t3yamotot3yamoto

なんかルールが反映されんな？という時はコマンドパレットから Biome: Restart LSP Server すると良いかも。
あと、[OUTPUT] > [biome] をみるとLSP Server のログが参照可能

t3yamotot3yamoto

イマイチだけど一旦以下としてみた。.ts ファイルだけ効けばいいやという感じ。
include で *.ts が効かないので辛い...

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}
biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    },
    "ignore": ["*.js", "*.json"]
  },
  "formatter": {
    "indentStyle": "space",
    "lineWidth": 120,
    "ignore": ["*.js", "*.json"]
  }
}
package.json(一部抜粋)
  "scripts": {
    "check": "biome check --apply .",
    "check:ci": "biome ci ."
  },
  "devDependencies": {
    "@biomejs/biome": "1.5.1",