1月 9, 2019 / 最終更新日 : 1月 9, 2019 りゅーたプログラミング

Visual Studio Code の拡張機能を開発してみよう

みなさん、Visual Studio Code使ってますか？

Visual Studio Code(以下VSCode)は、Microsoft が作ってるテキストエディタです。ここ数年で名前を聞くことがとても多くなったので、使ってる方は結構増えてきているのではないかと思います。
名前に Visual Studio と入っているので誤解されがちですが、WindowsだけでなくMacでも Linux でも動作します。

VSCode は拡張機能によって機能追加することができますが、この拡張機能はTypeScriptやJavaScriptで個人で開発してマーケットプレイスに追加することができます。

わたしも「multi-command」という複数の VSCode のコマンドを 1アクションで実行できるようにする拡張機能を公開しています。

今回、multi-command での機能追加にあわせて、新調した PC に VSCode の拡張機能の開発環境をセットアップし直したので、拡張機能の開発環境構築〜マーケットプレイス公開までの手順として備忘録を残しておきます。

環境

macOS Mojave 10.14.2
Visual Studio Code 1.25.1
yo 2.0.5
generator-code 1.1.44
vsce 1.54.0

手順

流れとしては下記になります。

ツール群をインストールする
yo で拡張機能のプロジェクトを作成する
拡張機能のコードを書く
マーケットプレイスで公開する

詳細見ていきます。

1. ツール群をインストールする

まずは開発に必要なツール群をインストールしますが、すべてのツールは npm で管理されています。

先に npm のインストールが必要になりますのであらかじめインストールしておいてください。(たぶん yarn など他のパッケージマネージャでも可)

VSCode の拡張機能の開発で使うツールは、yo generator-code です。また、マーケットプレイスに拡張機能を公開する際に必要になる vsce も合わせてインストールしておきます。

$ npm install -g yo generator-code vsce

1 2	$ npm install -g yo generator-code vsce

yo
Yeomanというツール. テンプレート（generator）からプロジェクトを作成するためのツール
genetor-code
VSCode 拡張機能を開発するための yo の generator
vsce
Visual Studio Code Extension Manager. VSCode 拡張機能管理ツール

2. yo で拡張機能のプロジェクトを作成する

yo を使って拡張機能の雛形を作成します。

下記を実行します。

$ yo code

$ yo code

実行すると、プロジェクトの設定を聞かれるので答えていきます。

? What type of extension do you want to create? New Extension (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? extension development test
? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
? Setup linting using 'tslint'? Yes
? Initialize a git repository? Yes
? Which package manager to use? npm

? What type of extension do you want to create? New Extension (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? extension development test

? Enable stricter TypeScript checking in 'tsconfig.json'? Yes

? Setup linting using 'tslint'? Yes

? Initialize a git repository? Yes

? Which package manager to use? npm

問題なく実行できれば、ここで指定した名前のディレクトリができているはずです。

拡張機能の Hello World 的なものがすでにセットアップされた状態になっているはずなので、試しにこの拡張機能を動作させてみます。

VSCode でこの拡張機能のプロジェクトを開き、F5 でデバッグ実行できます。

$ code my-first-extension

1 2	$ code my-first-extension

F5 で「拡張機能開発ホスト」と書いた新しいウィンドウが開きます。
開発中の拡張機能が読み込まれた状態になっています。

この状態でコマンドパレットを開くと( mac の場合は cmd + shift + p) 、「Hello World」というコマンドが追加されていて、実行すると右下に Hello World というポップアップが表示されるようになっています。

もし Hello World コマンドがコマンドパレットから実行できなかった場合、拡張機能が正しく読み込まれていない場合があります。F5 で拡張機能開発ホストを立ち上げた時に右下にエラーメッセージが表示されていると思いますので、対処しておきましょう。

わたしが遭遇したエラーは下記の 2つでした。

「publisher プロパティは必須で、string 型でなければなりません。」
後の章で公開する際に、マーケットプレイスに表示される公開した人の名前です。yo でテンプレート作成した時に設定されていなかったので、手動で設定する必要がありました。現段階では適当な文字列で良いので設定しておきましょう。
プロジェクトのディレクトリにある package.json に設定を追加します。

{
    "name": "my-first-extension",
    "displayName": "my-first-extension",
    "description": "extension development test",
    "version": "0.0.1",
    "publisher": "ttech" &lt;- 追加
    ...
}

{

"name": "my-first-extension",

"displayName": "my-first-extension",

"description": "extension development test",

"version": "0.0.1",

"publisher": "ttech" <- 追加

...

}

「拡張機能が Code 1.25.1 と互換性がありません。拡張機能に必要なバージョン: ^1.30.0。」
yo で作成したプロジェクトで記載されている VSCode の動作バージョンが、mac でインストールしていたバージョンよりも新しいバージョンになっていました。こちらも package.json の動作バージョンを修正して対処しました。VSCodeを更新してバージョンを合わせても良いかと思います。

{
    ...
    "engines": {
        "vscode": "^1.25.1" &lt;- 1.30.0 から修正して動作バージョンをあわせた
    },
    ...
}

{

...

"engines": {

"vscode": "^1.25.1" <- 1.30.0 から修正して動作バージョンをあわせた

...

}

動作確認ができない状態で開発はできないので、この段階で Hello World 実行できるようにエラーをつぶしておきましょう。

3. 拡張機能のコードを書く

拡張機能のコードを書いていきます。コードは src/extension.ts にあります。初期状態では短いコードなので貼り付けますね。

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
        console.log('Congratulations, your extension "extension-sample" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () =&gt; {
        // The code you place here will be executed every time your command is executed

        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}

// The module 'vscode' contains the VS Code extensibility API

// Import the module and reference it with the alias vscode in your code below

import * as vscode from 'vscode';

// this method is called when your extension is activated

// your extension is activated the very first time the command is executed

export function activate(context: vscode.ExtensionContext) {

// Use the console to output diagnostic information (console.log) and errors (console.error)

// This line of code will only be executed once when your extension is activated

console.log('Congratulations, your extension "extension-sample" is now active!');

// The command has been defined in the package.json file

// Now provide the implementation of the command with registerCommand

// The commandId parameter must match the command field in package.json

let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {

// The code you place here will be executed every time your command is executed

// Display a message box to the user

vscode.window.showInformationMessage('Hello World!');

});

context.subscriptions.push(disposable);

}

// this method is called when your extension is deactivated

export function deactivate() {}

拡張機能が読み込まれた時に activate が呼び出されるので、その中で自分が欲しい機能を実装していく流れになります。

雛形で行っているのは registerCommand でコマンドを追加し、コマンド実行時に showInformationMessage でポップアップを表示する感じです。

結構簡単に開発できそうな感じがしませんか？

拡張機能の作り方に関しての Tips を後の章で書いてますので、開発の際は参考にしてみてください。

4. マーケットプレイスで公開する

欲しい機能が実装できたらマーケットプレイスに公開して、他の人が使えるようにしてみましょう。

少し手順があるので順を追って説明していきます。

4-1. Azure DevOps に登録する

まずは Azure DevOps (以前の Visual Studio Team Services) に登録する必要があります。

既に登録していれば、この手順はスキップしてください。

Azure DevOps に登録するためには Microsoft アカウントが必要になります。すでにアカウントがあればそれを使えますし、無ければ新規に作成します。

Azure DevOps のページにアクセスし、「無料ではじめる」をクリックすれば Azure DevOps に登録が完了し、自動的に Azure DevOps にサインインします。

4-2. アクセストークンを作成する

Azure DevOps のページから、拡張機能公開用のアクセストークンを作成し、取得します。

このあたりの説明は公式が画像つきで詳細に解説してくれているので、公式の方も参照ください。

Visual Studio Code 公式の解説

Azure DevOps へのサインインが完了したら、右上のアカウントのイニシャルが表示されているところをクリックし、Security を選択
Personal access token -> New Token
管理用の名前を設定(Name欄)
Organaization を All accessible organaizations に変更
有効期限を設定。最長で 1年まで設定できます。
Scopes を Custom defined に設定
Marketplace のスコープで、”Acuire” と “Manage” にチェック。
Marketplace のスコープは初期状態では表示されていないので、下部の show all scope をクリックして表示させる必要があります。
Create をクリックして作成

作成が完了したら画面にアクセストークンが表示されるので、それをコピーして保存しておきます。アクセストークンはこのタイミングでしか表示されません。

4-3. アクセストークンを使って publisher を作成する

あらかじめインストールしておいた vsce コマンドを使い、拡張機能の publisher を作成します。
この際、先程作成したアクセストークンを使って publisher と紐づけます。

vsce create-publisher publisher名 で publisher を作成できます。その際、Personal Access Token を聞かれますので、先程コピーしたアクセストークンを貼り付けます。

publisher はすでに他の人が登録していたら登録することはできませんので、その場合は別の名前にしましょう。

$ vsce create-publisher your-publisher-name
Publisher human-friendly name: 
E-mail:
Personal Access Token: ****************************************************

$ vsce create-publisher your-publisher-name

Publisher human-friendly name:

E-mail:

Personal Access Token: ****************************************************

4-4. package.json を編集する

公開前に package.json を編集しておきます。

最低限、”publisher” の項目は先程作成した publisher の名前に合わせて置く必要があります。

他にも、バージョン番号やアイコンなどが設定できます。

設定できる項目は公式の Extension Manifest に説明がありますので、そちらを参照ください。

4-5. vsce コマンドで公開する

準備ができたら、再び vsce コマンドで公開します。

プロジェクトのディレクトリにて、vsce package でパッケージ作成、vsce publish でマーケットプレイスに公開できます。

$ vsce package
$ vsce publish

$ vsce package

$ vsce publish

vsce publish が成功すると最後に拡張機能のページの URL が表示されます。アクセスすると無事公開できていることがわかるかと思います。（反映まで少し時間がかかるみたいです。わたしの場合は数分後にアクセスしたら見れました）

Successfully published your-publisher-name.your-extension-namen@0.0.1!
Your extension will live at https://marketplace.visualstudio.com/items?itemName=your-publisher-name.your-extension-name (might take a few seconds for it to show up).

Successfully published your-publisher-name.your-extension-namen@0.0.1!

Your extension will live at https://marketplace.visualstudio.com/items?itemName=your-publisher-name.your-extension-name (might take a few seconds for it to show up).

公開できましたか？お疲れ様でした！

開発のTips

“multi-command” で開発する際に調べた拡張機能の実装方法なども書いておきます。

コマンドの登録は vscode.commands.registerCommand

Hello World 時点で既に実行されていますが、コマンドの登録には vscode.commands.registerCommand('コマンド名', 実行する処理) を使います。

登録したコマンド、他のコマンドと同様にキーバインドを割り当てることができるので、例えば Hello World であれば VSCode のキーバインドの設定 keybindings.json で下記のように記述すればキーバインドを割り当てて実行することができます。

    {
        "key": "cmd+shift+m",
        "command": "extension.helloWorld"
    }

{

"key": "cmd+shift+m",

"command": "extension.helloWorld"

}

ただし、registerCommandだけではコマンドパレットから登録したコマンドを呼び出すことができません

コマンドパレットからコマンドを呼び出せるようにするには package.json の contribute を使う

registerCommand で登録したコマンドをコマンドパレットから呼び出したい場合は package.json で設定を追加する必要があります。Hello World だと下記の部分ですね。

    "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
    },

"contributes": {

"commands": [

{

"command": "extension.helloWorld",

"title": "Hello World"

}

]

ここで registerCommand で登録したコマンドと、表示名を設定してあげることで、コマンドパレットから呼び出すことができます。

拡張機能内で他のコマンドを実行する

拡張機能内で、vscode.commands.executeCommand('コマンド名') とすると、他のコマンドを実行することができます。

他の拡張機能が持っているコマンドについては、VSCode の拡張機能の「コントリビューション」の項目で確認できます。

このあたり、別の記事にも書いたのでそちらも参照ください。

田舎からGeekを目指す

Visual Studio Codeで言語ごとに別のキーバインドを割り当てる

https://ryuta46.com/406

現代の多くのテキストエディタ同様、VSCodeでもキーバインドのカスタマイズができます。今回は、VSCodeのキーバインドのちょっと進んだ設定方法として、編集中の言語ごとにキーバインドを切り替える方法を紹介したいと思います。動機わたしは AsciiDocのプレビューを...

おわりに

拡張機能の実装方法自体はそれほどややこしくなく、開発環境を作るのも容易なのがわかっていただけると嬉しいです。

ちょっと公開するところが面倒なんですが、Azure DevOps の登録などは一度してしまえば良いので、この記事を参考に一度チャレンジしてみてください。

便利な拡張機能作ったらぜひ教えてください！ -> りゅーたのTwitter

最後まで読んでいただきありがとうございます。このブログを「いいな」と感じていただけましたら、Twiter にてフォローいただけるとうれしいです。ブログ更新情報などもお届けします。

Follow @ryuta461

この記事をシェアする

カテゴリー: プログラミング

タグ: JavaScript TypeScript Visual Studio Code

環境

手順