特集：Visual Studio Code早分かりガイド：Visual Studio Codeのエクステンションを作成する (1/2)

コードジェネレーターが生成したひな型コードを例に、Visual Studio Codeのエクステンションがどのような構造になっているのかを見ていこう。

連載目次

　前回はVisual Studio Code 0.10（以下、VS Code）に追加されたエクステンションを使ってみた。今回はエクステンションを自分で作成しながら、その基本を見ていこう。今回もWindowsとMacで動作を確認している。

エクステンション作成に必要なもの

　VS Codeのエクステンション作成には以下を使用するのがよい。

• yo、generator-code： Node.js上で動作するスキャフォールディングツール（yo）と、VS Codeエクステンション用のジェネレーター

　yoとgenerator-codeをインストールするには、Node.jsとnpmが必要なので、これらもPCにインストールされていて、パスが通っている必要があるので、エクステンションを作成してみたいという方は準備しておこう。

　Node.js/npmがインストールされていれば、yoとgenerator-codeは以下のコマンドラインでインストールできる。

　インストールできたら「yo code」コマンドを実行し、いくつかの事項を入力するだけで、エクステンションのひな型を作成できる。以下では、generator-codeが作成してくれるひな型を見ながら、エクステンション作成の基本を見ていく。

generator-codeによるコード生成

　「yo code」コマンドの実行画面を以下に示す。

　この画面を見ると分かる通り、generator-codeではエクステンション（使用する言語はTypeScript／JavaScriptを選べる）、カラーテーマ、言語サポート、スニペットを作成できる（厳密にはテーマとスニペットについてはエクステンションには分類されない）。言語サポートを新規に作成すると、特定の言語のコードをその構文に従ってハイライト表示できるようになるが、ここでは言語サポートについては触れずに、シンプルなエクステンション（TypeScript）を作成してみよう。これには「yo code」コマンドが表示したプロンプトの一番上にある「New Extension (TypeScript)」を選択する。

　すると、以下の事項の入力を要求されるので、適宜入力していこう。

• エクステンションの名前
• エクステンションの識別子
• エクステンションの説明
• 発行者
• Gitリポジトリを初期化するかどうか

　筆者が試したところでは、エクステンションの識別子については入力を要求される環境（Windows）とされない環境（OS X）があった*1。また、発行者の名前として利用できる文字にも環境によって差があるようだ（発行者に「Insider.NET」を入力した場合、OS Xでは受け入れられたが、Windowsではダメだった）。

　ここではそれぞれ以下を指定してエクステンションのひな型を作成した。

• エクステンションの名前： HelloVSCExt
• エクステンションの識別子（Windowsのみ）： hellovscext
• エクステンションの説明： sample
• 発行者： Insider.NET（OS X）／InsiderNET（Windows）
• Gitリポジトリを初期化するかどうか： n

　これにより、カレントディレクトリの下の「HelloVSCExt」ディレクトリまたは「hellovscext」ディレクトリにひな型が生成されるとともに、「npm install」による初期構成が自動的に行われる。

　次に作成したフォルダーをVS Codeで開いて、デバッグ実行するだけで、取りあえずエクステンションの動作を確認できる。まだ何もしていないが、取りあえず実行してみよう。

エクステンションのデバッグ実行

　エクステンションをデバッグ実行するには、ウィンドウ左端にあるビューバーで［Debug］アイコンをクリックし、［DEBUG］サイドバーを表示したら、［Start］ボタンをクリックする（今回はVS Codeのカラーテーマを「Light」に変更している。見やすい）。

デバッグ実行の開始

　これにより、エクステンション開発モードで新規にVS Codeが起動される。エクステンションが実行されるのは、新規に起動されたVS Codeの方だ。環境によっては「cannot connect to runtime process (timeout after 3000ms)」などとメッセージが表示され、VS Codeの新規起動がうまくいかない場合もあるが、その場合は［Start］ボタンを再度クリックしてみよう。

　新規に起動したVS Codeでコマンドパレットを表示して（Windows／Linuxでは［Ctrl］＋［Shift］＋［P］キー、OS Xでは［Command］＋［Shift］＋［P］キー）、「hello」などと入力する。コマンドパレットで「Hello World」が選択されたところで［Enter］キーを押せば、先ほど作成したエクステンションで定義されているコマンドが実行され、メッセージがウィンドウ上部に表示される。

コマンドパレットに「hello」を入力して［Enter］キーを押す

▼

メッセージが表示される

新規エクステンションが提供する「Hello World」コマンドを呼び出す

　これは非常にシンプルなサンプルだが、generator-codeを使うことでエクステンションを極めて簡単に作成できることが分かる。新規に起動したVS Codeのウィンドウを閉じてデバッグ実行を終了しておこう。

　次に、このエクステンションのコードや構成について見てみる。VS Codeのエクステンションのキモとなる部分はこのひな型に含まれている。まずはエクステンションプロジェクト全体の構成を見ておこう。