Biomejsのインストールと設定

Shibajukuのコーディングガイドラインに沿って設定していく。¹

インストール

開発環境依存でバージョン固定してインストールする。²

pnpm add -D -E @biomejs/biome

設定ファイルの作成

以下のコマンドを実行するとbiome.jsonファイルが作成される。³

pnpm exec biome init

biome.jsonの設定

コメントを書くために拡張子をjsonからjsoncに変更した。デフォルトの設定をカスタマイズする。⁴

useSortedPropertiesはガイドラインとプロパティの並び順が異なっていたため無効にした。⁵

{
	// このファイル内の入力補完や型・構文チェックを効かせる
	"$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
	// バージョン管理システムとの連携（ver2の時点はGitのみ）
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	// 処理するファイルのパターンリスト
	"files": {
		"ignoreUnknown": false
	},
	// コードの整形設定（Prettierみたいな）
	"formatter": {
		"enabled": true,
		"indentStyle": "space",
		// 一行に記述できる文字数
		"lineWidth": 120
	},
	// 開発体験向上
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				// import/export文の整理
				"organizeImports": "on",
				// jsx要素の属性の並び替え
				"useSortedAttributes": "on",
				// ガイドラインと並び順が異なるのでOFF
				"useSortedProperties": "off"
			}
		}
	},
	// リンター設定
	"linter": {
		"enabled": true,
		"rules": {
			// biomeが推奨するルールを自動的に有効化
			"recommended": true,
			"correctness": {
				// カスタムメディアクエリを使いたいのでoff
				"noUnknownMediaFeatureName": "off",
				// 独自のfluid関数を使いたいのでoff
				"noUnknownFunction": "off"
			},
			"complexity": {
				// forEachを使いたいのでoff
				"noForEach": "off",
				// スクリーンリーダー用テキストに使うのでoff
				"noImportantStyles": "off",
				// 変数を明示的にundefinedで初期化した場合（ex.let a = undefined）冗長なため警告
				"noUselessUndefinedInitialization": "warn"
			},
			"style": {
				// 詳細度の低いセレクターが、詳細度の高いセレクターの後に来ることを禁止
				"noDescendingSpecificity": "error"
			},
			"suspicious": {
				// 不明な空白文字の使用を禁止
				"noIrregularWhitespace": "error"
			}
		}
	},
	"css": {
		"formatter": {
			// 文字列リテラルの引用符の種類を設定
			"quoteStyle": "double"
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		},
		// Biomeが無視するグローバル変数名
		"globals": [
			"Astro"
		]
	}
}

settings.jsonの設定

プロジェクト直下の.vscodeフォルダ内にsettings.jsonを作成する。

{
	// ファイル保存時に自動で整形
	"editor.formatOnSave": true,
	// デフォルトフォーマッターをBiomeにする（biomejs.biomeはVSCodeの拡張機能）
	"editor.defaultFormatter": "biomejs.biome",
	"editor.codeActionsOnSave": {
		// ファイル保存時にbiome.jsoncに設定した内容に沿って自動修正
		"source.fixAll.biome": "explicit",
		// ファイル保存時にimport/export文の整理
		"source.organizeImports.biome": "explicit",
		// ファイル保存時にjsx要素の属性の並び替え
		"source.action.useSortedAttributes.biome": "explicit"
	}
}

Biomejsのインストールと設定

インストール

設定ファイルの作成

biome.jsonの設定

settings.jsonの設定

Footnotes