VSCodeプラグイン開発方法

VSCOdeのプラグインを作成する手順について教えて。また、作成するプラグインは、エディタの中でhttps://xxxxというサイトを表示するプラグインにして。

VSCodeのプラグインを作成するには、以下の手順を順を追って説明します。今回作成するプラグインは、エディタの中で https://xxxx というサイトを表示するシンプルなものです。

1. 必要なツールのインストール

まずは必要なツールをインストールします。

Node.js（v14以降）
npm（Node.jsに同梱）
YeomanとVSCode拡張ジェネレータ

以下のコマンドを順に実行して、YeomanとVSCode拡張ジェネレータをインストールします。

npm install -g yo generator-code

2. 新しい拡張機能の作成

yo code コマンドを使って、拡張機能のテンプレートを作成します。

yo code

プロンプトに従って以下の情報を入力します。

What type of extension do you want to create?: New Extension (TypeScript) もしくは New Extension (JavaScript)（どちらでも構いません）
What’s the name of your extension?: 例：my-webview-extension
What’s the identifier of your extension?: 例：myWebviewExtension
What’s the description of your extension?: 例：Displays a webpage
Initialize a git repository?: Yes/No（お好みで）
Which package manager to use?: npm

3. 拡張機能のコードを書く

生成されたフォルダに移動して、エディタで開きましょう。

cd my-webview-extension
code .

src/extension.ts ファイルを編集して、Webビューを表示するコードを追加します。以下は例です：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    let disposable = vscode.commands.registerCommand('myWebviewExtension.showWebview', () => {
        const panel = vscode.window.createWebviewPanel(
            'myWebview', // Identifies the type of the webview. Used internally
            'My Webview', // Title of the panel displayed to the user
            vscode.ViewColumn.One, // Editor column to show the new webview panel in.
            {} // Webview options. More on these later.
        );

        panel.webview.html = getWebviewContent();
    });

    context.subscriptions.push(disposable);
}

function getWebviewContent() {
    const url = 'https://xxxx';
    return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Webview</title>
        </head>
        <body>
            <iframe src="${url}" width="100%" height="100%" frameborder="0"></iframe>
        </body>
        </html>`;
}

export function deactivate() {}

4. package.json の編集

コマンドを登録するために、package.json ファイルを編集します。

{
    "name": "my-webview-extension",
    "displayName": "My Webview Extension",
    "description": "Displays a webpage",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.56.0"
    },
    "activationEvents": [
        "onCommand:myWebviewExtension.showWebview"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "myWebviewExtension.showWebview",
                "title": "Show Webview"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.56.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.2.2",
        "@types/node": "^14.14.37",
        "eslint": "^7.26.0",
        "glob": "^7.1.6",
        "mocha": "^8.3.2",
        "typescript": "^4.2.4",
        "vscode-test": "^1.4.0"
    }
}

5. 拡張機能の実行とデバッグ

この時点で、拡張機能の基本的な部分が完成しました。それでは、拡張機能を実行してみましょう。

F5 キーを押してデバッグモードで拡張機能を実行します。別のVSCodeウィンドウが立ち上がりますので、「Show Webview」というコマンドを実行します。コマンドはコマンドパレット（Ctrl+Shift+P もしくは Cmd+Shift+P）から実行できます。

6. 拡張機能のパッケージングと公開

拡張機能が完成したら、パッケージングして公開することができます。以下は簡単な手順です。

vsce ツールのインストール: npm install -g vsce
パッケージング: vsce package
Marketplace にアップロード: 拡張機能をVSCode Marketplaceに公開するための手順については、VSCodeの公式ドキュメントを参照してください。

まとめ

この手順でVSCodeのプラグインを作成し、エディタ内で特定のサイトを表示する拡張機能を作成できました。さらに詳細なカスタマイズや機能追加については、VSCodeの公式ドキュメントやAPIリファレンスを活用すると良いでしょう。