0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIを使ってCursor(VSCode)の自己満足な拡張機能を作ってみる

Last updated at Posted at 2025-12-13

背景

僕は普段Cursorを使ってコーディングをしているが、たま〜にニッチな需要の機能が欲しくなることがあります。

2年前とか、まだVSCodeを使っていた時は
その機能を拡張機能として作る労力 > その機能がないことによる労力
という状態だったため、わざわざ拡張機能を書こうとは思えませんでいたが、

ふと、「そういえば今の時代はAIが全部なんとかしてくれるじゃん」ということを思い出したので、自己満足な拡張機能を作ってみることにしました。

方針

今回は、大きく次の 2 ステップで進めました。

  • Web版 ChatGPT で要件を文章として固める
  • 出来上がった要件を Cursor の Agent に渡して実装させる

以前は Yeoman などのスキャフォールディングツールを使うのが一般的でしたが、今回は

  • 公開する予定はない
  • 自分でコーディングする気はない
  • AI に任せれば雛形レベルは十分生成される

といった理由から、最初から AI ベースで全コードを生成してもらう方針にしました。

手順

1. 要件の整理

まず、実現したい機能のイメージをざっくりと ChatGPT に投げて、

  • VSCodeのAPI 的に可能か
  • ついでにやれることは何か
  • Cursor で実装するための仕様を Markdown 化してくれ

といった点を対話しながら固めていきました。
もちろん ChatGPT である必要はないので、Claude でも Gemini でも好きなツールで問題ありません。

2. 実装

要件が固まったら、Cursor で新しいワークスペースを作り、Agent モードに仕様書を渡して「この通りに実装して」と依頼します。

数十秒〜数分待っていると、以下のようなファイルが自動生成されます。

  • package.json
    • 拡張名・バージョン・コマンド定義などのメタ情報
  • extension.js(または .ts
    • 拡張機能のメインロジック

場合によっては複数の JS/TS ファイルが生成されることもあるので
もし意図のわからないファイルが出てきたら、そのまま AI に説明してもらえば十分です。

※言わずもがなですが、出力されたコードは実行する前に変なことやってないか確認することを推奨します

3. デバッグモードで動作確認する

コードが出揃ったら、Cursor の「Extension Debugger」で実際に拡張機能を動かします。

デバッグには .vscode/launch.json が必要ですが、
「拡張機能をデバッグしたいから launch.json を作って」
と Cursor に頼めば、いい感じに生成してくれます。

まぁ、大体の場合は次のような内容で十分です。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

launch.json ができたら F5 を押すことで、
「自作拡張がインストールされた状態の Cursor」 が立ち上がり、実際の挙動を確認できます。

必要に応じてコード修正指示 → デバッグモードの再起動を繰り返し、のようによくあるバイブコーディングで仕上げていきました。

4. VS Code 拡張をパッケージ化する

実装が安定したら、VSIX としてパッケージ化します。

  1. vsce をインストールする

    $ npm install -g @vscode/vsce
    
  2. プロジェクト直下でパッケージングを実行

    $ vsce package
    

    このとき、
    package.json にrepository が定義されていない
    ・ LICENSE が無い
    .vscodeignore が無い
    とか色々言われますが、まあ自分しか使わないので・・・と思って全部 yesにしました。(もし拡張機能を公開したい場合は用意するべきです)

  3. 成功すると 拡張名-バージョン.vsix が出力される

  4. 生成した VSIX を VS Code にインストールする
    コマンドパレットでExtensions: Install from VSIXを実行すし、生成した VSIX を選択すればインストールが完了する

image.png

さいごに

今や簡単なツールなら、調べたるより、AI にその場で生成させたほうが早い時代です。

VS Code / Cursor の拡張に関しても同じで、「あったら便利だな」程度の機能なら、数十分もあれば AI を使って自作したほうが早い時代なので、「こんな事できたらな〜」みたいな自己満足機能があったらサクッとAIに作らせてみてはいかがでしょうか。


ちなみに僕は今回、「開いているファイル・エディターの配置を保存していつでも呼び出せるようにする拡張」を作ってみました。

多分探せばマーケットプレイスとかにありそうな機能ですが、車輪の再発明を禁止する法律はないですし、僕は車輪の再発明大好きなタイプのエンジニアなので問題ないです。
タイトルなし.gif

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?