Zenn
🦁

Cursor/VSCode拡張機能開発完全ガイド - 第1部：拡張機能開発の基礎と概要

に公開
VS Code
VS Code 拡張機能
VS Code Extension
Cursor
tech

1. はじめに

1.1 VSCodeとCursorの関係性

VSCodeは、Microsoftが開発したオープンソースのコードエディタで、現在最も人気のある開発環境の1つです。

Cursorは、VSCodeをベースに開発された、AI機能を強化したコードエディタです。

主な違い

VSCode                    | Cursor
--------------------------|---------------------------
標準的なコード補完        | AIによる高度なコード補完
基本的な開発支援機能      | AIを活用したコード理解・生成
プラグインベースの拡張性  | VSCode互換の拡張性+AI機能

1.2 なぜ拡張機能が重要なのか

  1. カスタマイズ性

    • 開発環境の個別ニーズへの対応
    • 特定の言語やフレームワーク向けの機能追加
    • ワークフローの効率化

  2. 生産性の向上

    • 繰り返し作業の自動化
    • コード品質の向上
    • 開発速度の向上

  3. エコシステムの発展

    • コミュニティによる機能拡張
    • ベストプラクティスの共有
    • 新しい開発手法の導入

1.3 拡張機能でできることの概要

拡張機能でできることをより分かりやすく、視覚的に整理し直します。

1.3.1. ワークスペースの拡張

1.3.1.1 ファイル操作
// ファイル操作の例
const workspaceEdit = new vscode.WorkspaceEdit();
// ファイルの作成
workspaceEdit.createFile(vscode.Uri.file('/path/to/new/file.txt'));
// ファイルの編集
workspaceEdit.insert(uri, new vscode.Position(0, 0), 'Hello, World!');
// ファイルの削除
workspaceEdit.delete(uri, new vscode.Range(0, 0, 1, 0));
1.3.1.2 カスタムエクスプローラービュー
// カスタムツリービューの登録
vscode.window.registerTreeDataProvider('customExplorer', new CustomTreeDataProvider());

1.3.2. エディタの機能拡張

1.3.2.1 テキスト装飾
  • シンタックスハイライト
  • インラインデコレーション
  • カラーテーマ
  • アイコンテーマ
// テキストデコレーションの例
const decorationType = vscode.window.createTextEditorDecorationType({
    backgroundColor: 'rgba(255,0,0,0.3)',
    border: '2px solid red'
});
1.3.2.2 コード補完と支援
// コード補完プロバイダーの登録
vscode.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems(document, position) {
        return [
            new vscode.CompletionItem('console.log', vscode.CompletionItemKind.Method),
            new vscode.CompletionItem('if-statement', vscode.CompletionItemKind.Snippet)
        ];
    }
});

1.3.3. UI要素の追加

1.3.3.1 コマンドパレット
┌─────────────────────────┐
│    コマンドパレット     │
├─────────────────────────┤
│ > Git: コミット        │
│ > ファイル検索         │
│ > カスタムコマンド     │
└─────────────────────────┘
1.3.3.2 ステータスバーアイテム
// ステータスバーアイテムの作成
const statusBarItem = vscode.window.createStatusBarItem(
    vscode.StatusBarAlignment.Right,
    100
);
statusBarItem.text = "$(sync) カスタムステータス";
statusBarItem.show();
1.3.3.3 カスタムビュー
┌─────────────────────┐
│   カスタムビュー    │
├─────────────────────┤
│ ▼ グループ1        │
│   └─ アイテム1     │
│   └─ アイテム2     │
│ ▼ グループ2        │
│   └─ アイテム3     │
└─────────────────────┘

1.3.4. 言語機能の拡張

1.3.4.1 言語サポート
1.3.4.2 インテリセンス機能
// ホバー情報の提供
vscode.languages.registerHoverProvider('javascript', {
    provideHover(document, position, token) {
        return new vscode.Hover('This is a hover message');
    }
});

// 定義ジャンプの提供
vscode.languages.registerDefinitionProvider('javascript', {
    provideDefinition(document, position, token) {
        // 定義位置を返す
    }
});

1.3.5. デバッグ機能の拡張

1.3.5.1 カスタムデバッガー
{
    "type": "customDebugger",
    "request": "launch",
    "name": "カスタムデバッグ",
    "program": "${file}"
}

1.3.5. 実際の活用例

1.3.5.1 ファイル変換ツール
// SVGからPNGへの変換例
vscode.commands.registerCommand('extension.convertSvgToPng', async () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
        // 変換処理
    }
});
1.3.5.2 Git拡張
// Gitコマンドの実行
const gitExtension = vscode.extensions.getExtension('vscode.git');
const git = gitExtension.exports.getAPI(1);
git.repositories[0].commit('コミットメッセージ');
1.3.5.3 データビジュアライゼーション
// カスタムWebviewの作成
const panel = vscode.window.createWebviewPanel(
    'dataVisualization',
    'データビジュアライゼーション',
    vscode.ViewColumn.One,
    {}
);
panel.webview.html = getWebviewContent(); // チャートやグラフを表示

1.3.6. 拡張機能のインタラクション図

この形式で表示することで、拡張機能の可能性がより具体的に理解できるかと思います。

各セクションには実際のコード例や視覚的な要素を含めてます。

これらの機能は組み合わせることで、より強力なツールを作ることができます。例えば：

  1. ファイル操作 + UI拡張 = カスタムファイルマネージャー
  2. 言語サポート + デバッグ機能 = 特定言語用の開発環境
  3. Git拡張 + データビジュアライゼーション = コード分析ツール

このように、VSCode/Cursor拡張機能の可能性は非常に広く、開発者のニーズに応じて柔軟に機能を組み合わせることができます。

2. 拡張機能の基本概念

2.1 拡張機能のアーキテクチャ

// 基本的な拡張機能の構造
export function activate(context: vscode.ExtensionContext) {
    // 拡張機能がアクティブ化されたときの処理
    console.log('拡張機能が有効化されました');

    // コマンドの登録
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {
    // 拡張機能が非アクティブ化されたときの処理
}

2.2 アクティベーションイベント

{
  "activationEvents": [
    "onCommand:extension.helloWorld",
    "onLanguage:javascript",
    "workspaceContains:.gitignore",
    "onView:nodeDependencies"
  ]
}

2.3 コマンドとコントリビューション

{
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "extension.helloWorld",
          "group": "navigation"
        }
      ]
    }
  }
}

3. 開発環境のセットアップ

3.1 必要なツールとバージョン

# Node.jsのインストール（v14以上推奨）
node -v  # バージョン確認

# Yeomanとジェネレーターのインストール
npm install -g yo generator-code

# VSCode拡張機能開発ツール
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

3.2 プロジェクトの初期化

# 新しい拡張機能プロジェクトの作成
yo code

# 依存関係のインストール
npm install

# 開発用サーバーの起動
npm run watch

3.3 デバッグ環境の構築

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extensionHost",
      "request": "launch",
      "name": "Launch Extension",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/out/**/*.js"],
      "preLaunchTask": "npm: watch"
    }
  ]
}

4. よくある質問（FAQ）

  1. Q: 拡張機能の開発に必要なスキルは？

    • A: JavaScript/TypeScriptの基本的な知識
    • A: VSCode/Cursor APIの理解
    • A: 非同期プログラミングの理解

  2. Q: デバッグ方法は？

    • A: F5キーで開発用ウィンドウを起動
    • A: コンソールログの確認
    • A: ブレークポイントの使用

  3. Q: パフォーマンスの最適化方法は？

    • A: アクティベーションイベントの適切な設定
    • A: リソースの効率的な解放
    • A: 非同期処理の活用

5. ベストプラクティス

5.1 コード品質

  • TypeScriptの使用
  • ESLintの導入
  • ユニットテストの作成

5.2 ユーザー体験

  • 適切なエラーハンドリング
  • プログレス表示
  • 設定のカスタマイズ性

5.3 パフォーマンス

  • 遅延ローディング
  • リソースの適切な解放
  • メモリリークの防止

6. 参考リソース

  1. 公式ドキュメント

  2. サンプルコード

  3. コミュニティリソース

    • Stack Overflow
    • VSCode GitHub Issues
    • Extension Developer Slack

7. トラブルシューティングフローチャート

この第1部では、拡張機能開発の基礎と概要を詳しく説明しました。次の第2部では、実際のSVG to PNG Converter拡張機能の実装について詳しく解説していきます。

Discussion