Zenn
🛠️

VSCodeの拡張機能を作ってみる

2024/12/08に公開
VS Code
tech

VSCodeの拡張機能を作る方法を一通りやってみました。 基本的にLLMに聞いた通りにやったらできたという内容ですが、 自分の備忘録として必要十分な内容を記述していきたいと思います。

作成するのは、 現在のカーソル箇所に「hoge」を追記する機能です。

最初だけの準備

最初に必要なライブラリをグローバルインストールします。

$ npm install -g yo generator-code vsce

作成

拡張機能を作成するディレクトリを適当に作成し以下のコマンドを実行します。

$ yo code

実行すると何を作成するのかの選択肢が出てきます。

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

? What type of extension do you want to create?
❯ New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)

今回は素直にNew Extension (TypeScript)を選びます。 名前を聞かれるので、SampleExtensionとします。 他はEnterを連打で進めました。

Gitリポジトリの中に書くファイルが作られ、VSCodeが開きます。

実装

src/extension.tsの中身を以下のように書きます。

src/extensions.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('appendHoge.appendHoge', () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const position = editor.selection.active;
            editor.edit(editBuilder => {
                editBuilder.insert(position, 'hoge');
            });
        }
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

次にpackage.jsonのcontributes部分を

package.json
"contributes": {
    "commands": [
        {
            "command": "appendHoge.appendHoge",
            "title": "Append Hoge"
        }
    ]
}

で置き換えます。

これで拡張機能としては完成です。

テスト

VSCodeのターミナルで以下を実行します。

$ npm install
$ npm run compile

このあとF5を押すと、この拡張機能が有効になった状態のVSCodeウィンドウが立ち上がります。 ⌘nで新しいファイルを開いてコマンドパレットでAppend Hogeを選択すると、 カーソルの場所にhogeが挿入されます。

パッケージ化

ターミナル（↑で新しく開いた方ではなく、拡張機能開発の方のウィンドウ）で

$ vsce package

を実行します。

READMEがないと怒られるので、README.mdの最初の部分を適当に書き換えます。

# sampleextension README

This is my test.

こちらを参考にしました。
https://zenn.dev/daifukuninja/articles/13a35a8bb3a4a1

READMEを書き換えて再度コマンドを実行します。

 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N]
 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found
Do you want to continue? [y/N]

というWARNINGが出ますが、どちらもyで先に進みます。

これで./sampleextension-0.0.1.vsixというファイルが出力されました。 このファイルは単独で拡張機能として利用できるファイルのようです。

インストール

コマンドパレットで「Install from VSIX」を選択します。 上記で作成したvsixファイルを選択したらインストール完了です。

コマンドパレットから「Append Hoge」が使えるようになりました！

まとめ

VSCodeの拡張機能を作成する流れを一通り実施しました。 正直かなり簡単に作成できてびっくりです。 TypeScriptのコードをいじる事でかなり何でもできそうですので 色々遊ぶと楽しそうです。

GitHubで編集を提案

Discussion