拡張機能の制作｜俺用に改良したAntigravityをプリティに仕上げるお作法（前編）— 環境構築からF5デバッグまで

1. Antigravityってどんな仕組み？

Antigravityは、オープンソースのVisual Studio Code（VS Code）の基盤をフォークしたエディタで、GoogleのAIエージェント機能が組み込まれています（Google 公式 Codelabでは「VS Code の基盤をフォーク」と説明）。
中身はElectron（Chromium ＋ Node.js）で動くため、「ブラウザの描画エンジン」とNode.jsが一緒になったようなものです。

だから、普段Webで使っているHTML・CSS・JavaScriptの知識がそのまま活かせて、
時計やカレンダーみたいな自分用のパネルをサイドバーに追加できます。

2. 開発に必要な環境（やさしく言うと）

「Antigravityが入っているから、もう何もしなくていい？」というと、ちょっと違います。
Antigravity自体を動かすためのNode.jsは入っていますが、拡張機能を書いたり・ビルドしたり・配布用に固めたりするには、
お使いのパソコンに次のものを別途用意するのがおすすめです。

「いまのパソコンに、必要なものが入っているか分からない」というときは、ゴリゴリに、PowerShellで無理やり情報を集める……という感じで、次のスクリプトを実行してみてください。
Node.js / npm / TypeScript / vsce の有無と、入っていればそのバージョンが表示されます。
日本語を正しく表示したい場合は、先に chcp 65001 を実行してからどうぞ。

# 拡張機能開発に必要な環境の有無・バージョンを確認する（PowerShell）
$names = @(
  @{ N = 'Node.js'; C = 'node --version' },
  @{ N = 'npm';     C = 'npm --version' },
  @{ N = 'tsc';     C = 'npx tsc --version 2>$null' },
  @{ N = 'vsce';    C = 'vsce --version 2>$null' }
)
foreach ($t in $names) {
  $v = try { Invoke-Expression $t.C 2>$null } catch { $null }
  if ($v) { Write-Host ("$($t.N): $($v -replace "`r?`n", ' ')") -ForegroundColor Green }
  else   { Write-Host "$($t.N): 未検出" -ForegroundColor Yellow }
}

PowerShell で実行すると、入っているツールは緑でバージョン、入っていないものは黄で「未検出」と出ます。
未検出のものは、上記の表を参考にインストールしてください。

実行例（一例）:

Node.js: v22.19.0
npm: 10.9.3
tsc: This is not the tsc command you are looking for.
     To get access to the TypeScript compiler, tsc, from the command line either:
     - Use npm install typescript to first add TypeScript to your project before using npx
     - Use yarn to avoid accidentally running code from un-installed packages
vsce: 3.7.1

この例では Node.js / npm / vsce は検出され、tsc は「プロジェクトに TypeScript を入れてから」という案内が出ています。
拡張機能用フォルダで npm install を済ませていれば、そのフォルダ内では npx tsc --version でバージョンが表示されます。

3. バージョン指定の大切さ（package.json）

拡張機能を作るとき、「自分の環境では動くのに、他の人だと動かない」を防ぐために、package.json のバージョン指定はきちんとしておきましょう。

4. プロジェクトのフォルダ構成と、F5でテストするまで

F5キーでサクッと拡張機能を試すには、.vscode フォルダが欠かせません。
配布されたプロジェクト（ZIP を解凍したフォルダ）や、自分で作った拡張機能のフォルダを使うときは、Antigravity でそのフォルダを「開く」→ プロジェクトルートにしてください。
そうすると、F5 でテストできるようになります。

プロジェクトルートには、launch.json（F5を押したときにどう起動するか）と tasks.json（起動前に TypeScript を JavaScript にコンパイルする手順）を入れた .vscode フォルダを用意しておきます。

最終段階のフォルダ・ファイル構成（図）

antigravity-clock-ext/
├── .vscode/
│   ├── launch.json
│   └── tasks.json
├── node_modules/
├── out/
│   ├── extension.js
│   └── extension.js.map
├── src/
│   └── extension.ts
├── .vscodeignore
├── package.json
├── package-lock.json
├── tsconfig.json
├── README.md
├── LICENSE
├── antigravity_extension_guide_full.md.resolved
└── antigravity-clock-ext-0.0.1.vsix

各ファイル・フォルダの役割（なぜ必要なのか）

上記が一通りそろった状態が「最終段階」の構成です。
.vscode がないと F5 でテストできず、tasks.json が無いと .ts を直しても .js が更新されず「反映されない」と感じることがあります。

図：拡張機能プロジェクトのフォルダ構成例。.vscode（launch.json・tasks.json）、src、out、package.json など。
F5でテストする前に、ここがそろっているか確認すると安心です。（クリックで拡大）

ここまでそろえば、F5でExtension Development Hostが起動し、そこで拡張機能の動作を確認できます。
続きの「サイドバーに時計・カレンダーを出す方法」と「VSIXで配布する方法」は、後編でお伝えします。