VSCode + Biome で JSON with Comments をフォーマットする方法

biomeの拡張機能いれたあと、VSCodeのsettings.jsonもフォーマットとしたかったが、 ドキュメントのフォーマットでエラーが出てうまくいかなかった
settings.jsonは.jsoncではないため、通常のincludeフィールドでは指定できない。そのため、overridesフィールドで別途指定することで解決

べつに関係なさそう。別PCでやったらそんな設定必要なかったので、読み込みがうまくできてなかったとか

gptで記事っぽくまとめる

1. Biome のインストール

まず、Biome をプロジェクトにインストールします。以下のコマンドを実行してください。

pnpm add -D biome

2. Biome 設定ファイルの作成

プロジェクトのルートに biome.json を作成し、以下のように設定します。

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "files": {
    "include": [
      "**/*.json",
      "**/*.jsonc"
    ]
  },
  "overrides": [
    {
      "include": [".vscode/settings.json"],
      "json": {
        "parser": {
          "allowComments": true
        }
      }
    }
  ],
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2
  }
}

• files.include: JSON と JSONC ファイルを含めるように設定します。
• overrides: 特定のファイル（例: settings.json）に対して JSONC を許可する設定を追加します。
• formatter: インデントスタイルや幅を設定します。

3. VSCode の設定

VSCode の設定ファイル（settings.json）を以下のように編集します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

• editor.formatOnSave: 保存時に自動フォーマットを有効化します。
• [jsonc]: JSONC ファイルに対して Biome をデフォルトフォーマッタとして設定します。

4. JSONC ファイルのフォーマット

これで、VSCode 上で JSONC ファイル（例: settings.json）を保存すると、Biome によって自動的にフォーマットされるようになります。

注意点

• Biome の設定で allowComments を有効にすることで、JSONC ファイル内のコメントが許容されます。
• 必要に応じて、overrides セクションで特定のファイルやディレクトリに対する設定をカスタマイズできます。

これで、VSCode と Biome を使った JSONC ファイルのフォーマットが簡単に行えるようになります！