CDKでBiomeを使う
Webバックエンドエンジニアをしている山梨といいます。
最近CDK(TypeScript)のプロジェクトにBiomeを導入したところ、かなり開発体験が良かったので紹介します。
Biomeとは？
Biomeは、Web開発で利用する技術（JS,TS,JSON,CSSなど）を対象としたツールチェーンで、Linter, Formatterなどを提供しています。
また、Zero Config で動作するため、設定なしですぐに利用できるのが特徴です。
なぜCDKにBiomeを使うのか？
CDK(TypeScript)でBiomeを使用する理由は、シンプルかつ高性能なツールである点です。
BiomeはLinterとFormatterが統合されており、さらにZero Configでも十分に動く(導入後すぐに動かすことができる)ため、よりCDKの実装に集中することができます。
また、公式ページでも紹介されている通り、Biomeは非常に高速です。
これにより、CDKでの開発がよりスムーズになり、開発体験の向上が見込めます。
Biomeは、CDKユーザーにこそおすすめ（？）
設定に時間をかけることなく、コードのformat, lintが行えるため、「CDKを使うためにTypeScriptを始めたけれど、FormatterやLinterの設定は難しい…」と感じている方には、Biomeが非常に便利だと感じました。
Biomeの導入手順
1. Biomeのインストール
以下のコマンドで、Biomeをプロジェクトにインストールできます。
# npm
npm install --save-dev --save-exact @biomejs/biome
# yarn
yarn add --dev --exact @biomejs/biome
# pnpm
pnpm add --save-dev --save-exact @biomejs/biome
# bun
bun add --dev --exact @biomejs/biome
# deno
deno add --dev npm:@biomejs/biome
2. Biomeの使用方法
2.1. コマンドでの使用
以下のコマンドを実行して、Biomeでlint, fomratを実行できます。
# lint
npx @biomejs/biome lint ./ --write
# format
npx @biomejs/biome format ./ --write
# lint & format
npx @biomejs/biome check ./ --write
2.2. エディタ(VSCode)での使用
公式の拡張機能をインストールし、.vscode/settings.jsonに以下の内容を追記することで、エディタにbiomeを導入できます。
(formatOnSave, codeActionsOnSaveはお好みで・・・)
+ "editor.defaultFormatter": "biomejs.biome",
+ "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+ "quickfix.biome": "explicit",
+ "source.organizeImports.biome": "explicit"
+ }
js,tsにだけ適用したい場合
javascript,typescriptにだけBiomeを適用したい場合は、.vscode/settings.jsonに以下の内容を追記します
+ "[typescript]": {
+ "editor.defaultFormatter": "biomejs.biome",
+ "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+ "quickfix.biome": "explicit",
+ "source.organizeImports.biome": "explicit"
+ }
+ },
+ "[javascript]": {
+ "editor.defaultFormatter": "biomejs.biome",
+ "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+ "quickfix.biome": "explicit",
+ "source.organizeImports.biome": "explicit"
+ }
+ },
3. biome.jsonの設定
Biomeはデフォルト設定が充実しているため、設定ファイルなしで利用可能です(以下の引用文を参照)。
もしデフォルトの設定を変更したい場合は、以下の手順で biome.json または biome.jsonc を生成し、設定を行えます。
Biome はデフォルトで十分な機能を提供するので、設定ファイルの使用はオプショナルです。 デフォルトの挙動を変更したい時に設定ファイルを使用してください。[1]
3.1. biome.jsonの生成
# generate biome.json
npx @biomejs/biome init
# generate biome.jsonc
npx @biomejs/biome init --jsonc
eslint, prettier から移行する場合
eslint, prettier から移行する場合は、以下のコマンドを実行できます
biome migrate eslint --write
biome migrate prettier --write
3.2. biome.jsonの更新
私が設定したbiome.jsonの内容は以下の通りです。
linterのrulesは、とりあえず"recommended": trueにしておいて、気になった(error, warnになって欲しい/欲しくない)ルールを手動で設定しています。
また、ルールの内容は以下のドキュメントを参照しました。
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": {
"noUndeclaredVariables": "error",
"noUnusedVariables": "error",
"useImportExtensions": "off"
},
"style": {
"useNamingConvention": "warn",
"noNonNullAssertion": "warn",
"useImportType": "off",
"noNamespaceImport": "off"
},
"complexity": {
"noUselessConstructor": "off"
}
},
"ignore": ["node_modules", "*.js", "!jest.config.js", "*.d.ts"]
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"ignore": ["node_modules", "*.js", "!jest.config.js", "*.d.ts"]
},
"javascript": {
"formatter": {
"enabled": true,
"indentStyle": "space",
"quoteStyle": "single"
}
}
}
参考資料
Discussion