Appearance
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 が自動的に起動します。