Visual Studio Code の拡張機能を作ってみる(1)

まずはチュートリアルに従って進めてみよう。

Visual Studio Code（以下VSC）いいですよね。会社の先輩たちもVSCにガンガン乗り換えてて、「あの拡張機能が良い感じ」とかの話題で盛り上がってます。でもまだ「拡張機能を作ってみたよ」という人は居なさそう。

前の記事で「HTMLの山括弧のエスケープめんどくさいね～」という話があったんですけど、練習題材にちょうどいいなと思ったので、これをVSCの拡張機能で作ってみようと思います。「一括置換でいいやん」とか言わない。

参考にしたサイト

公式のチュートリアルです。よく出来ています。



環境準備

Windows10で開発します。npm/Node.jsが必要なので公式サイトからインストールします。インストール後にコマンドプロンプトでnpmとか使えたらOK。



導入

チュートリアルによれば、すぐに動作できる拡張機能のテンプレート（"Hello world" が出てくる）まで生成してくれるみたい。とても良い。チュートリアルに従って以下を実行します。

npm install -g yo generator-code
yo code

yoすると拡張機能の名前とか色々聞かれるので適当に答えます。左側は誰なんだろう。

C:\work>yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? espace-html-bracket
? What's the identifier of your extension? espace-html-bracket
? What's the description of your extension? Espace HTML bracket
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishin
g-extensions)? mahirun
? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
? Setup linting using 'tslint'? Yes
? Initialize a git repository? Yes

yoしたディレクトリ配下でワークスペースが作られるので、適当なディレクトリに移動してからyoするのがベターです。


動かしてみる

何はともあれ、テンプレを実行してみましょう。ワークスペース作成後の指示に従ってVSCを起動します。F5キーを押すと、拡張機能がインストールされた状態のVSCが別窓で起動するので、これを使って動作確認・デバッグを進めます。

Ctrl + Shift + P を押してコマンドパレットを開き、"Hello world" と入力するとテンプレが実行できます。画面右下に通知が出ました。なるほどね。

拡張機能の動作ログ（console.logとか）は、ワークスペースを開いているVSCのデバッグコンソールに表示される。

ソースコードを読む

ソースコードは src/extension.ts というもので、こんな具合のコードが生成されます。実物はコメントがたくさん入ってて優しい感じになってるけど、スペースの関係で消しました。

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "espace-html-bracket" is now active!');

    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {
}

activate関数がコマンドパレットから呼び出されたときに1度だけ呼ばれる関数。この中で登録されている 'extesion.sayHello' が通知を出していた部分。ちなみのこの関数名は package.json というファイルでも定義されていて、ここの名前が一致する必要がありそう？

deactivate関数はいつ呼ばれるのかまだ分からない。あとでログ仕込んで確認してみましょう。


長くなったので、今日はここまで。