Skip to content

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

Yeoman ジェネレータによるプロジェクト生成

VS Code 拡張機能のプロジェクトは、公式が提供する Yeoman ジェネレータ(yo)と拡張機能用テンプレート(generator-code)を使用することで簡単に初期作成できます。 これらは npm コマンドを使用して、コマンドプロンプトやターミナルから一時的に実行できます。

まず、以下のコマンドを実行してジェネレータを起動します。

bash
npx -y yo generator-code

実行すると、コマンドライン上で対話的な質問が始まります。以下の指示に従って選択または入力してください。

  • What type of extension do you want to create?

    New Extension (TypeScript) を選択します(型定義がある TypeScript が書きやすいため推奨されます)。

  • What's the name of your extension?

    拡張機能の表示名を入力します(例: My First Extension)。

  • What's the identifier of your extension?

    識別子を入力します。エンターキーを押すと、名前をベースに自動で決定されます(例: my-first-extension)。

  • What's the description of your extension?

    拡張機能の説明を簡単に書きます(空欄のままエンターキーを押しても構いません)。

  • Initialize a git repository?

    Git リポジトリを初期化するかどうかです。必要に応じて Yes または No を選択します。

  • Bundle the source code with webpack?

    ビルドに Webpack を使用するかどうかです。今回はシンプルな構成にするため No を選択します。

  • Which package manager to use?

    パッケージマネージャを選択します。ここでは npm を選択します。

質問にすべて答えると、必要なファイルが自動的に生成され、依存パッケージのインストールが始まります。

プロジェクトのフォルダ構成

作成されたフォルダを VS Code で開くと、以下のようなファイルとフォルダの構成になっています。主要なファイルの役割は以下の通りです。

  • package.json

    拡張機能の設定ファイルです。名前やバージョン、拡張機能が実行されるトリガー(activationEvents)、VS Code に追加するコマンド(contributes.commands)などを定義します。

  • src/extension.ts

    拡張機能のメインプログラムです。拡張機能が読み込まれたときに呼び出される activate 関数や、終了時に呼び出される deactivate 関数が記述されています。

  • vsc-extension-quickstart.md

    開発の始め方やデバッグ方法が書かれた公式のクイックスタートガイドです。

  • .vscode/launch.json

    拡張機能をデバッグ実行するための設定ファイルです。これがあることで、F5 キーを押すだけでデバッグ用の VS Code が自動的に起動します。