VScodeの拡張機能を作ってみる！

こんにちは、なかにしです。

前々から興味があった、vscodeのプラグイン開発をやってみようと思います！
vscodeで開発～一般公開までやります。

手順
ひな形をつくる
JS or TSで挙動をコーディングする
デバッグ
公開する
さいごに

手順

①「generator-code」をインストールし、ひな形を作る
②JS or TSで挙動をコーディングする
③拡張機能として動かし、動作確認をする
④一般公開する

いってみよう！

ひな形をつくる

コマンドプロンプトで以下を入力します。

npm install -g yo generator-code

ひな形を作成したいディレクトリに移動し、以下コマンドを入力

yo code

変なの出てきます。ウケますね。
ここで初期設定をします。

個々の設定項目はクラスメソッドさんがこちらでまとめてくださっているのでご覧ください。

ひな形作成が出来たら、vscodeで開きます。

JS or TSで挙動をコーディングする

今回はTSでコーディングします。
拡張機能の挙動は src > extension.ts に記載します。

とりあえずひな形に沿って、
拡張機能を有効化したときに「Nice!!」と表示するように変えてみます。

import * as vscode from "vscode";

// プラグイン有効化時に発火する内容
export function activate(context: vscode.ExtensionContext) {
  console.log('"trash-plugin" is now active!');

  // コマンドを作成
  let disposable = vscode.commands.registerCommand(
    "trash-plugin.helloWorld",
    () => {
      vscode.window.showInformationMessage("Nice!!");
    }
  );

  // 作成したコマンドを登録
  context.subscriptions.push(disposable);
}

// プラグイン削除時?の挙動
export function deactivate() {}

基本的な流れとして、
①vscode.commands.registerCommandメソッドを使用してコマンドを作成
②context.subscriptions.pushを使用して作成したコマンドを登録
③コンパイルする(TypeScript版のみ)
④package.jsonを使用して登録したコマンドを呼び出す
のようです。

ちなみにvscode.commands.registerCommandの文法は以下です。

vscode.commands.registerCommand(コマンド名, () => {処理})

コードが書き終わったので、コンパイルします。

npm run compile

outディレクトリ配下に、コンパイルされたextension.jsが作成されました。

続いて、package.jsonに登録したコマンドを呼び出すコードを記載します。
▽L13あたりです。デフォルトで書かれています。

 "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "trash-plugin.helloWorld",
        "title": "Hello World"
      }
    ]
  },

activationEventsは起動時のコマンドを登録し、
contributesはコマンドに名前をつけています。
mainには起動時にout配下のextension.jsを指定するように記載しています。