🎉

Vscode拡張機能を開発してみた

2022/07/13に公開

VS Code

tech

前置き

VScode の拡張機能をつくってみたので、その過程を備忘録的に書いていきます。

拡張機能に必要なツールのインストール方法
どのファイルに処理を書いていくのか
デバッグして確認
作ったあとにどうやって VScode にインストールするのか

主にこの 4 つを簡単に書いていきます。
拡張機能を作りたいと思っている方の参考程度になれば幸いです。

作った拡張機能

選択範囲の文字をすべて大文字に変換
選択範囲の文字をすべて小文字に変換
選択範囲の文字の先頭のみを大文字に変換

今回つくったのはこれらの機能をもった拡張機能です。

準備・インストール

事前準備

Node.js が動かせる環境

まず、拡張機能を作るためのツールをインストールします。
以下のコマンドを実行します。

npm install -g yo generator-code

次に開発する雛形フォルダを作成します。
任意の場所で以下のコマンドを実行してください

yo code

実行すると質問がでてきます。

What type of extension do you want to create?
--New Extension (TypeScript)を選択

What's the name of your extension?
--拡張機能の名前を入力

What's the identifier of your extension?
--ここは入力せずにエンター

What's the description of your extension?
--ここもエンターでオッケー

Initialize a git repository?
--yes

Bundle the source code with webpack?
--yes

Which package manager to use?
-- npm yarn どっち使うのって聞かれてるのでお好みで

最後に

Do you want to open the new folder with Visual Studio Code?
-- Open with `code` を選択

と聞かれるので Open with codeを選択します。
これで自動的にフォルダを VScode で開いてくれます。

開いたらファイル構成はこんな感じになっていると思います。

この中で使うファイルは主にsrc\extension.tsとpackage.jsonです。

処理を書く

処理はextension.tsに書いていきます。
↓ こちらが書いたものになります。

extension.ts

let disposable = vscode.commands.registerCommand(
  'vscode.contextmenu.upperCase',
  () => {
    const editor = vscode.window.activeTextEditor;
    const document = editor.document;
    const selection = editor.selection;
    const upperCase = text.toUpperCase();
    editor.edit((edit) => {
      edit.replace(selection, upperCase);
    });
  }
);
context.subscriptions.push(disposable);

機能としては選択した文字列を大文字に変換するものです。

vscode.commands.registerCommand()の第一引数にコマンドの名前、第二引数に処理を書く
context.subscriptions.push()の引数にコマンドの処理

処理が書けたら次にpackage.jsonを記述します。

{
  "activitionEvents": {
    "onCommand:vscode.upperCase" // コマンドの名前
  }
  /* 省略 */
  "contributes": {
    "commands": [
      {
        "command": "vscode.contextmenu.upperCase", // コマンドの名前
        "title": "すべて大文字に変換" // コンテキストメニューに表示される文字
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorHasSelection", // エディタで文字が選択されているときのみ
          "command": "vscode-context.upperCase", // コマンドの名前
          "group": "myGroup@1" // メニューのどこに表示するか
        }
      ]
    }
  }
}

今回の選択した文字をコンテキストメニューから大文字に変換する機能だと上記のようになります。
"when":"editorHasSelection"は選択されているときに使えるようにする記述です。
"group":"myGroup@1"はコンテキストメニュー UI のどこに拡張機能の UI を表示するかの記述です。group について

デバッグして確認

さあいよいよ動かしてみましょう。
まずはコンパイルします。TypeScript なのでね

npm run compile

完了したら、デバッグします。
F5を押してデバッグ開始

すると拡張機能開発ホストと書かれた VScode のウィンドウが立ち上がります

👆 テキストを入力して選択して右クリックすると...

👆 メニューに表示されていますね。すべて大文字をクリックします。

👆 大文字になりました！成功です！

VScode にインストール

デバッグまで終わったので実際に拡張機能としてインストールします。
まずはREADME.mdを編集しましょう。

この部分に反映されます。
ここは説明を書くだけなので割愛します。

次に.vsixファイルを生成します。
以下のコマンドをプロジェクトのルートディレクトリで実行

npx vsce package

質問が出てきますが全て Yes で良いようです
すると拡張機能名-バージョン.vsixというファイルがルートディレクトリにできあがります

ここまでできたら VScode のサイドバーから拡張機能の一覧を開きます
VSIX からのインストールをクリックして先程の.vsixを選択してインストール

以上で終了です。
配布するときは.visxを共有すればみんな使えるようになります
marketplace で公開する方法も簡単そうなのでやってみてください

まとめ

思っていたよりも簡単でした
拡張機能が作れるようになればどんどん自分好みの VScode を作れますね
もうすこしドキュメントを読み込んで理解していきたいです