vscode扩展开发(二): 接受输入, 快速选择, WebView, 快捷键绑定

An595
1,849 阅读2分钟

接受输入内容

使用vscode.window.showInputBox可以打开一个输入框, 让用户输入内容, 如下:

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
    // 注册一个命令 learn-vscode-extends.input
    const disposable = vscode.commands.registerCommand("learn-vscode-extends.input", () => {
        // 打开一个 input
        vscode.window.showInputBox({
            ignoreFocusOut: true, // 当焦点移动到编辑器的另一部分或另一个窗口时, 保持输入框打开
            password: false, // 为 true 就表示是密码类型
            prompt: "请输入文本", // 文本输入提示
            value: "hello world", // 默认值, 默认全部选中
            valueSelection: [6, -1],  // 指定选中的范围
        }).then(value => {
            if (!value || !value?.trim()) {
                vscode.window.showErrorMessage("你输入的文本无效");
                return;
            };

            vscode.window.showInformationMessage(`你输入的文本是: ${value.trim()}`);
        })
    });

    context.subscriptions.push(disposable);
}

export function deactivate() { }

别忘了注册对应的命令, 效果如下:

image.png

image.png

快速选择

使用vscode.window.showQuickPick可以打开一个快速选择列表, 如下:

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
    // 注册一个命令 learn-vscode-extends.quickPick
    const disposable = vscode.commands.registerCommand("learn-vscode-extends.quickPick", () => {
        // 打开一个快速选择列表
        vscode.window.showQuickPick(
            // ["选项一", "选项二", "选项三"], // 简单的显示多个选项
            [
                { // 对象的形式可以配置更多东西
                    label: "选项一",
                    description: "选项一描述$(bug)", // 可以指定官方提供的图标id https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
                    detail: "选项一详细信息",
                    mate: { // 这里也可以放一些自定义的对象
                        script: "learn-vscode-extends.helloWrold" 
                    },
                },
                {
                    label: "选项二",
                    description: "选项二描述",
                    detail: "选项二详细信息$(gear)",
                }
            ],
            {
                title: "请选择一个选项", // 标题
                placeHolder: "用户类型", // 占位符文本
                canPickMany: false, // 是否可以多选
            }
        ).then((res: vscode.QuickPickItem | undefined) => {
            if (!res) return;
            console.log(res); // 这里就是上面数组中对应的对象信息
        })
    });

    context.subscriptions.push(disposable);
}

export function deactivate() { }

注册对应的命令, 效果如下:

image.png

image.png

WebView

使用vscode.window.createWebviewPanel创建一些简单的页面内容, 效果类似于欢迎页, vscdoe的版本发行说明, 如下:

import * as vscode from "vscode";
import * as path from "path";
import * as fs from "fs";

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand("learn-vscode-extends.welcome", () => {

        // 创建一个 weilcome
        const panel = vscode.window.createWebviewPanel(
            "weilcome", // webview面板的类型, 内部使用
            "自定义欢迎页面标题", // table 标题
            vscode.ViewColumn.One, // 显示在第一个编辑器
            {
                enableScripts: true, // 控制脚本是否在webview内容中启用, 默认为false(脚本禁用)
                retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置
            }
        );

        // html文件路径
        const hemlPath = path.resolve(
            context.extensionPath, // 项目根路径
            "./src/render/welcome.html"
        );

        // 读取html文本
        const html = fs.readFileSync(hemlPath, "utf-8");

        // 赋值html文本
        panel.webview.html = html;
    });

    context.subscriptions.push(disposable);
}

export function deactivate() { }

对应目录(/src/render)还需要创建一个welcome.html文件, 如下;

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1>欢迎页标题</h1>
  <span>Hello WebviewView</span>
</body>
</html>

注册命令, 运行效果如下:

image.png

webview还有更多设置和操作可以见官方webview

快捷键绑定

快捷键绑定需要在package.json文件中的contributes.keybindings配置, 如下:

// package.json

"activationEvents": [
  "onCommand:learn-vscode-extends.keyboardTest"
],
"contributes": {
  "commands": [
    {
      "command": "learn-vscode-extends.keyboardTest",
      "title": "keyboardTest"
    }
  ],
  "keybindings": [
    {
      "command": "learn-vscode-extends.keyboardTest", // 快捷键触发的事件id
      "key": "ctrl+f1", // windown 下的快捷键
      "mac": "ctrl+f1", // mac 下的快捷键
      "args": { // 通过快捷键触发时, 这个参数会被传递给对应命令注册的回调中
        "text": "Hello World" 
      },
      "when": "editorTextFocus" // 当编辑器聚焦时才会触发
      // 了解 when 子句的更多请前往 https://code.visualstudio.com/api/references/when-clause-contexts
    }
  ]
},

对应回调代码:

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand("learn-vscode-extends.keyboardTest", (arg) => {
       if (arg && typeof arg.text === "string") {
            vscode.window.showInformationMessage("快捷键触发" + arg.text);
        } else {
            vscode.window.showInformationMessage("命令触发");
        }
    });
    context.subscriptions.push(disposable);
}

export function deactivate() { }

运行, 按ctrl+F1(编辑器必须获取焦点), 因为绑定了效果如下:

image.png

avatar
文章
阅读
粉丝