MENU
60歳から始めるブログ生活
  1. ホーム
  2. Web Tips
  3. VS Code: 行末・行頭トグル移動の拡張機能を自作してみた

VS Code: 行末・行頭トグル移動の拡張機能を自作してみた

Web Tips
当記事内にアフィリエイトリンクを含みます
  • URLをコピーしました！
目次

概要

先日、コードエディタ Visual Studio Code を導入し、設定を試行錯誤しているところです。

VS Codeは拡張機能によって機能を追加できます。エディタ左側の「拡張機能」ビューから検索してインストールする仕組みがあり、これをマーケットプレイスと呼びます。Pythonや日本語の拡張パックを入れて使っている人も多いはずです。

こうした拡張機能は .vsix という形式のパッケージで提供されており、拡張機能パネルや code --install-extension コマンドでインストールできます。また、.vsix は内部的には JavaScript（またはTypeScript）のコードと設定ファイル（package.json）をまとめたものです（拡張子を .zip に変更すると中身を確認できます）。

通常はVS Code上のマーケットプレイスから導入しますが、自作した .vsix をインストールすることもできます。最近ではAIの助けを借りれば、個人用の簡単な拡張機能を作ることも現実的です。

本記事では、「カーソルを行末・行頭へトグル移動させる」拡張機能を自作します。

Emacs系エディタでは、Ctrl+E が行末、Ctrl+A が行頭への移動に割り当てられていますが、ここでは Ctrl+E のみで行末と行頭を行き来するトグル動作を実現します。

  • 行頭または途中にある → 行末へ移動
  • 行末にある → 行頭へ移動

この動作はVS Codeの標準キーバインドでは実現できないため、拡張機能として実装しました。

TypeScript（JavaScriptを拡張した言語）で数十行程度のコードで実現できる内容です。本記事では、テンプレート作成から実装、.vsix化してインストールするまでをまとめます。

手順

1. 登場するツールと役割

この作業では、以下のツールを使います。

ツール役割製作元
Node.jsJavaScriptをPC上で実行する環境。yo・vsceなどのコマンドラインツールの実行環境OpenJS Foundation
npmNode.jsに付属するパッケージ管理ツール。他のツールのインストールに使うOpenJS Foundation
yo（Yeoman）拡張機能のひな形（テンプレート）を対話形式で生成するツールYeomanコミュニティ
generator-codeyoと組み合わせてVS Code拡張機能のひな形を生成するプラグインMicrosoft
vsce拡張機能をVSIXファイルにパッケージ化するツールMicrosoft
codeVS Codeに同梱されたコマンドラインツール。ターミナルからVS Codeの起動や拡張機能のインストールなどができるMicrosoft

それぞれの関係をまとめると次のようになります。

Node.js（実行環境）
  └── npm（パッケージ管理）
        ├── yo + generator-code → ひな形生成
        └── vsce               → パッケージ化（.vsix）

code（VS Code同梱）→ VS Codeの起動や拡張機能(.vsix)のインストール

2. 事前準備：全ツールをインストール

本記事では Windows 11 環境を前提に説明します。
コマンド入力には、Windows 11 に標準で搭載されている PowerShell（ターミナル） を使用します。

Node.jsのインストール

Node.js は、公式サイトから LTS版 をダウンロードしてインストールします。

LTS（Long Term Support）とは、長期サポート版のことです。また、以前まとめた記事もありますので、そちらも参照してください。

Node.js をインストールすると、npm も同時に導入されます。

インストール後、PowerShellで node -v と入力してバージョンが表示されればインストール成功です。

yo・generator-code・vsceのインストール

PowerShellで次のコマンドを実行します。

npm install -g yo
npm install -g generator-code
npm install -g @vscode/vsce

-g はグローバルインストールの指定で、どのフォルダからでもコマンドとして使えるようになります。

generator-code はnpm上でのパッケージ名です。yoから呼び出すときは generator- を省略して yo code と入力します。

@vscode/vsce の @vscode/ は、npm上でMicrosoftが公開しているパッケージであることを示します。インストール後は vsce コマンドとして使用します。

3. ひな形生成

作業フォルダはどこでも構いません。次のステップで実行する yo code コマンドを実行した場所に、プロジェクトフォルダが自動生成されます。

今回の例では C:\Users\(ユーザー名)\ で yo code を実行したため、その直下に maruq-line-end-start-toggle フォルダが作成されました。このフォルダをプロジェクトフォルダと呼びます。

PowerShellで次のコマンドを実行します。

yo code

すると、対話形式でいくつか質問されます。
※「list prompt is deprecated」という警告が表示されるかもしれませんが拡張作成には影響ありません。

主な選択内容は次の通りです。

  • type of extension（拡張機能の形式）→ TypeScript
  • name（拡張機能の名前）→ 任意（例: maruq-line-end-start-toggle）
  • identifier → nameと同じでよい
  • description（機能説明）→ 英語で簡単な説明（例: Toggle cursor between line end and line start.）
  • git repository → No　　gitとは、コードの変更履歴を記録・管理するツール。今回の用途は不要
  • Which bundler → unbundled　　バンドラーとは複数のファイルを1つにまとめるツールですが、今回のような小規模な拡張機能では不要です。
  • package manager（パッケージ管理）→ npm

4. src/extension.ts を編集

yo code の最後に「Open with code」を選んだ場合、VS Codeでプロジェクトが開いた状態になっています。サイドバーのエクスプローラーから src フォルダ → extension.ts をクリックして開きます（ファイルの場所は C:\Users\(ユーザー名)\maruq-line-end-start-toggle\src\extension.ts）。内容を全て削除して以下に置き換えます。

import * as vscode from 'vscode';

// 拡張機能が有効になったときに呼ばれる関数
export function activate(context: vscode.ExtensionContext) {

    // コマンド 'maruq.toggleLineEndStart' を登録する
    // このコマンドIDをkeybindings.jsonに設定することでキーに割り当てられる
    const cmd = vscode.commands.registerCommand('maruq.toggleLineEndStart', () => {

        // 現在アクティブなエディタを取得
        const editor = vscode.window.activeTextEditor;
        // エディタが開いていなければ何もしない
        if (!editor) return;

        // 現在のカーソル位置を取得
        const cursor = editor.selection.active;
        // 現在行の行末位置を取得
        const lineEnd = editor.document.lineAt(cursor.line).range.end;

        // カーソルが行末にいれば行頭へ、それ以外は行末へ
        if (cursor.isEqual(lineEnd)) {
            vscode.commands.executeCommand('cursorLineStart');
        } else {
            vscode.commands.executeCommand('cursorEnd');
        }
    });

    // コマンドをVS Codeに登録する（拡張機能が無効化されたとき自動的に解除される）
    context.subscriptions.push(cmd);
}

// 拡張機能が無効になったときに呼ばれる関数（今回は何もしない）
export function deactivate() {}

5. package.json の編集

package.json はプロジェクトの設定ファイルです。この中に、作成したコマンドをVS Codeに登録するための記述が必要です。

VS Codeサイドバーのエクスプローラーから package.json を開きます。

この中に publisher(≒作者) の項目が含まれていない場合、name の下あたりに、publisherとして、任意の名前(例: maruq)を追加しておきます。
※追加しなくてもよいですが、その場合、次節でパッケージ化する際、作者名が、undefined_publisherとして、登録されます。

{
  "name": "maruq-line-end-start-toggle",
  "displayName": "maruq-line-end-start-toggle",
  "publisher": "maruq",
  ...
}

package.json を開くと、contributes セクションに以下のような記述があります。

"contributes": {
    "commands": [
        {
            "command": "maruq-line-end-start-toggle.helloWorld",
            "title": "Hello World"
        }
    ]
},

これはひな形が自動生成したサンプルです。この部分を以下に書き換えて保存します。

"contributes": {
    "commands": [
        {
            "command": "maruq.toggleLineEndStart",
            "title": "Maruq: Toggle Line End/Start"
        }
    ]
},

command の値は extension.ts の中で登録した識別子と一致している必要があります。

※VS Codeのコマンド名は (プレフィックス).(機能名) という形式で登録する慣習があります。今回は maruq.toggleLineEndStart の maruq がプレフィックスにあたります。作者名や拡張機能名をプレフィックスにすることで、他の拡張機能のコマンドと名前が衝突しなくなります。

6. パッケージ化(vsix化)

プロジェクトフォルダ（C:\Users\(ユーザー名)\maruq-line-end-start-toggle）に移動して以下を実行します。

vsce package --allow-missing-repository

--allow-missing-repository は、package.json にリポジトリの情報がない場合でも警告を出さずにパッケージ化するオプションです。

実行中にLICENSEファイルがないという警告が表示されますが、個人使用の拡張機能なので y で続行して問題ありません。完了すると、プロジェクトフォルダに maruq-line-end-start-toggle-0.0.1.vsix が生成されます。ファイル名のバージョン番号（0.0.1）は package.json の version の値から自動的に付けられます。

7. インストール

生成された .vsix ファイルをVS Codeにインストールします。

方法1: コマンドラインから

PowerShellターミナルでプロジェクトフォルダ（C:\Users\(ユーザー名)\maruq-line-end-start-toggle）に移動して、以下を実行します。

code --install-extension maruq-line-end-start-toggle-0.0.1.vsix

以下のメッセージが表示されればインストール成功です。

Extension 'maruq-line-end-start-toggle-0.0.1.vsix' was successfully installed.

方法2: VS Code画面から

VS Codeの拡張機能パネル（Ctrl+Shift+X）を開きます。拡張機能パネル右上の … メニューから「VSIXからのインストール」を選択して、.vsix ファイルを指定します（※画像はインストール済みの状態）。

8. keybindings.json に追加

最後に、インストールした拡張機能を任意のキー（今回は Ctrl+E）に割り当てます。
Ctrl+Shift+P でコマンドパレットを開き、以下を選択実行します。

Open Keyboard Shortcuts (JSON)

keybindings.json が開いたら、次の設定を追加します。

{
    "key": "ctrl+e",
    "command": "maruq.toggleLineEndStart",
    "when": "editorFocus"
}

editorFocus は、エディタ画面にフォーカスがある場合にのみこのキーを有効にするという条件です。これにより、他の画面操作中に誤って発動することを防いでいます。

9. 別PCへの移行

今回作成した拡張機能を別のPCで使うには、Node.jsや yo などの開発ツールは不要です。以下の3つを用意するだけで移行できます。

  • VS Code本体
  • maruq-line-end-start-toggle-0.0.1.vsix
  • keybindings.json の設定内容

手順

  1. 別PCにVS Codeをインストールします。
  2. .vsix ファイルをコピーして、7節「インストール」と同じ手順でインストールします。
  3. 8節「keybindings.jsonに追加」と同じ手順で keybindings.json を設定します。

.vsixファイルはプロジェクトフォルダ内にありますが、フォルダ全体をコピーする必要はなく、.vsixファイル単体で構いません。

留意点

アンインストール

拡張機能をアンインストールするには、ターミナルで以下を実行します。

code --uninstall-extension maruq.maruq-line-end-start-toggle

maruq.maruq-line-end-start-toggle はpublisher.nameの形式になっています。インストール済みの拡張機能IDは code --list-extensions で確認できます。

プロジェクトフォルダ

今回インストールした拡張機能(.vsix)は、VS Codeの拡張機能フォルダにコピーして保存されるため、プロジェクトフォルダを削除しても動作します。

ただし、コードを修正したり、再パッケージが必要になる場合に備えて、プロジェクトフォルダは残しておくことをおすすめします。フォルダの場所は自由に移動して構いません。

Web Tips
vscode
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次