VSCode拡張開発

vscodeの拡張機能を自作したい。何からはじめればいいか

Visual Studio Code（VSCode）の拡張機能を自作したい場合、以下の手順に沿って進めるのが基本です。

✅ ステップ 1: 必要な環境を整える

インストールするもの：

Yeoman & VS Code Extension Generator

npm install -g yo generator-code

✅ ステップ 2: 拡張機能のテンプレートを作る

このコマンドを実行すると、対話形式で拡張機能のテンプレートを生成できます。

yo code

主な選択肢：

New Extension (TypeScript)：VSCode公式おすすめ。型安全。

New Extension (JavaScript)：TypeScript不要の簡易版。

Extension Pack：複数拡張のまとめ。

Language Support：構文ハイライト等を作りたいとき。

質問に答えていくと、必要なファイル群が生成されます。

✅ ステップ 3: 実装する

テンプレートには以下のようなファイルが含まれています：

src/extension.ts：拡張機能のメイン処理を書く場所

package.json：拡張機能の定義（コマンドやアイコンなど）

例：Hello Worldを表示するコマンドのコード（TypeScript）

code:js

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {

vscode.window.showInformationMessage('Hello World from MyExtension!');

});

context.subscriptions.push(disposable);

}

✅ ステップ 4: 動作確認

VSCode でプロジェクトを開き、F5 を押すと「開発ホスト」が起動してデバッグできます。

🧠 補足：何が作れる？

独自のコマンド

UI（サイドバー、WebViewなど）

エディタ上の補完・シンタックスハイライト

言語サーバー（LSP）

ファイル構造に応じたアクションボタンなど

🔗 公式ドキュメント

特定のキー操作で指定した処理を行うには

特定のキー操作（ショートカット）で任意の処理を実行したい場合、以下のように実装します。

① コマンドを定義する（package.json）

まず、package.json にコマンドとキー割り当てを記述します。

code:json

{

"contributes": {

"commands": [

{

"command": "myExtension.doSomething",

"title": "Do Something"

}

],

"keybindings": [

{

"command": "myExtension.doSomething",

"key": "ctrl+alt+s",

"when": "editorTextFocus"

}

]

}

}

command: 識別子（あとでコードでも使う）

key: 実行するショートカット（Win/Linux では Ctrl、macOS では Cmd に置き換え可能）

when: 条件（この例ではエディタがフォーカスされているとき）

② コマンドを登録・処理を書く（extension.ts）

code:js

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const disposable = vscode.commands.registerCommand('myExtension.doSomething', () => {

vscode.window.showInformationMessage('ショートカットで実行されました！');

// 任意の処理をここに書く

});

context.subscriptions.push(disposable);

}

export function deactivate() {}

③ 実行してテスト

F5 を押して拡張機能を起動し、新しく開かれた「Extension Development Host」内で Ctrl + Alt + S を押すと、メッセージが表示されます。

✅ よくある補足

複数のキーを組み合わせる

"key": "ctrl+alt+shift+p" のように記述

Mac用とWindows用でキーを分けたい

"mac": { "key": "cmd+alt+s" }, "win": { "key": "ctrl+alt+s" } のように指定可能

キーが反応しない場合

すでに他の拡張がそのキーを使っている可能性あり（Keyboard Shortcuts で確認）

✅ 参考：キーコードの記法

ctrl / cmd

shift

alt

通常の文字や f1, escape, enter など

→ 詳細は 公式キーバインディングガイド を参照。

カーソルのある行の内容を加工するには

🎯 目標

カーソル位置の行のテキストを取得

加工（例：大文字化）して元の行に上書き

✅ サンプルコード（TypeScript）

code:typescript

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const disposable = vscode.commands.registerCommand('myExtension.processCurrentLine', () => {

const editor = vscode.window.activeTextEditor;

if (!editor) {

vscode.window.showErrorMessage('エディタが開かれていません');

return;

}

const document = editor.document;

const position = editor.selection.active; // カーソルの現在位置

const line = document.lineAt(position.line); // 行の情報を取得

const originalText = line.text;

// 加工：大文字に変換（ここを自由に書き換え）

const processedText = originalText.toUpperCase();

editor.edit(editBuilder => {

editBuilder.replace(line.range, processedText);

});

});

context.subscriptions.push(disposable);

}

export function deactivate() {}

🧩 package.json の対応

このコマンドを使うには package.json に以下を追加：

code:json

{

"contributes": {

"commands": [

{

"command": "myExtension.processCurrentLine",

"title": "Process Current Line"

}

],

"keybindings": [

{

"command": "myExtension.processCurrentLine",

"key": "ctrl+alt+l",

"when": "editorTextFocus"

}

]

}

}

🛠 加工処理のカスタマイズ例

テキストをハイライト表示するには

TextEditorDecorationType を使って、任意の範囲に装飾（背景色や下線など）を加えることができます。

✅ 基本ステップ

vscode.window.createTextEditorDecorationType() で装飾スタイルを作成

editor.setDecorations() でハイライト範囲に適用

🧪 シンプルなサンプル（選択範囲を黄色でハイライト）

code:js

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const disposable = vscode.commands.registerCommand('myExtension.highlightSelection', () => {

const editor = vscode.window.activeTextEditor;

if (!editor) {

return;

}

const selection = editor.selection;

if (selection.isEmpty) {

vscode.window.showInformationMessage('テキストを選択してください');

return;

}

const highlightDecoration = vscode.window.createTextEditorDecorationType({

backgroundColor: 'rgba(255,255,0,0.5)', // 半透明の黄色

});

// 必要に応じて、数秒後にハイライトを消す（任意）

setTimeout(() => {

editor.setDecorations(highlightDecoration, []);

}, 3000);

});

context.subscriptions.push(disposable);

}

export function deactivate() {}

🧩 装飾オプションの例（背景以外にも）

backgroundColor: rgba(255,255,0,0.5)

border: 1px solid red

textDecoration: underline wavy blue

テキストを範囲選択するには

テキストを範囲選択（プログラムから選択状態にする） には、vscode.Selection を使ってエディタの選択状態を変更します。

✅ 基本コード：特定の範囲を選択する

code:js

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const disposable = vscode.commands.registerCommand('myExtension.selectRange', () => {

const editor = vscode.window.activeTextEditor;

if (!editor) {

return;

}

// 例：3行目（index 2）の5文字目から10文字目を選択

const start = new vscode.Position(2, 5); // 行と列（ゼロ始まり）

const end = new vscode.Position(2, 10);

const selection = new vscode.Selection(start, end);

editor.selection = selection;

// エディタにフォーカスを当てて選択が見えるようにする

editor.revealRange(new vscode.Range(start, end));

});

context.subscriptions.push(disposable);

}

export function deactivate() {}

📌 補足ポイント

特定の単語を選択 正規表現などで単語の位置を見つけて選択に変換

カーソル位置を移動するには

カーソル位置をプログラムで移動するには、vscode.Selection を使ってエディタの selection を更新します。

✅ 基本コード：カーソルを指定位置に移動

code:js

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const disposable = vscode.commands.registerCommand('myExtension.moveCursor', () => {

const editor = vscode.window.activeTextEditor;

if (!editor) {

return;

}

// 例：5行目（index 4）の3文字目に移動

const newPos = new vscode.Position(4, 3);

const newSelection = new vscode.Selection(newPos, newPos); // 開始と終了を同じにすると単純な移動になる

editor.selection = newSelection;

editor.revealRange(new vscode.Range(newPos, newPos)); // カーソル位置が画面に映るように

});

context.subscriptions.push(disposable);

}

export function deactivate() {}

📌 応用テクニック

🧠 例：カーソルを現在行の末尾に移動

code:js

const position = editor.selection.active;

const line = editor.document.lineAt(position.line);

const lineEnd = line.range.end;

editor.selection = new vscode.Selection(lineEnd, lineEnd);

拡張機能が完成したのでビルドしたい

拡張機能が完成したら、VSCode 拡張としてビルド・パッケージ化・公開するために、次の手順で進めます。

🛠 前提：VSCode 拡張開発環境が整っていること

以下のコマンドなどが使える状態を想定します：

node / npm

vsce（VSCode拡張のパッケージツール）

✅ ステップ1：ビルド（TypeScriptなら）

TypeScript で開発している場合、まずはビルドします：

npm run compile

tsconfig.json に基づいて src/ → out/ ディレクトリに変換されます。

問題がなければそのまま次へ。

✅ ステップ2：vsce で .vsix を生成

vsce をインストール（まだなら）

npm install -g @vscode/vsce

パッケージ化

vsce package

成功すると、カレントディレクトリに .vsix ファイル（例：my-extension-0.0.1.vsix）が生成されます。

✅ ステップ3：ローカルでインストール（テスト用）

生成した .vsix をローカルで VSCode にインストールして試せます：

code --install-extension my-extension-0.0.1.vsix

または、VSCode のコマンドパレットで「Extensions: Install from VSIX...」 → .vsix を選択。

✅ ステップ4：マーケットプレイスに公開（任意）

アカウント作成

Visual Studio Marketplace のアカウント（Azure DevOps）作成

Personal Access Token (PAT) 発行

拡張 ID、Publisher の登録

公開コマンド

vsce publish

最初の公開時には：

vsce publish --pat <your-token>

📦 補足：package.json によくある設定

code:json

{

"name": "my-extension",

"version": "0.0.1",

"publisher": "your-name",

"engines": {

"vscode": "^1.70.0"

},

"main": "./out/extension.js",

"scripts": {

"vscode:prepublish": "npm run compile",

"compile": "tsc -p ./",

"watch": "tsc -watch -p ./"

}

}

READMEはデフォルトのままだとエラーが発生してビルドできない。なんか書いておくこと。

authorやversionなどの情報の更新も忘れないこと。