Visual Studio代码扩展助手

这个 @estruyf/vscode 软件包包含几个帮助者,使Visual Studio代码扩展开发更加容易.

安装

使用 npm

npm i @estruyf/vscode

帮助者

配置

配置帮助器, 以方便获取您的扩展名的设置 .

import { Configuration } from "@estruyf/vscode";

const config = Configuration.get("section");

const mdConfig = Configuration.getForLanguage<string>("markdown");

const setting = Configuration.getSetting<string>("section", "setting");

await Configuration.updateSetting<string>("section", "setting", value);

await Configuration.updateSettingForLanguage<string>(
  "markdown",
  "setting",
  value
);

编辑器

import { EditorHelper } from "@estruyf/vscode";

// Show a file in the editor
EditorHelper.showFile(filepath);

// Read a file's content
const content = await EditorHelper.readFile(uri);

// Write content to a file
await EditorHelper.writeFile(uri, "Hello World");

// Check if a file exists
const exists = await EditorHelper.fileExists(uri);

网页视图

信件处理器

这个 messageHandler 是一个帮助者,可以更容易地从您的扩展中发送和请求数据。 它基于 postMessage 财务报告和审定财务报表 onDidReceiveMessage,但允许您使用自动同步/等待发送和接收数据.

这个 messageHandler 可以向扩展发送两类消息:

1. messageHandler.send:这是一个单向消息,您会向扩展发送数据,但不要期望得到响应.
2. messageHandler.request:这是一个双向消息,您会向扩展发送数据,并期望得到响应.

使用它只需要做以下几点:

网页视图

import { messageHandler } from "@estruyf/vscode/dist/client";

// Sends a message with id: "GET_DATA"
messageHandler.request<any>("GET_DATA").then((data: any) => {
  // Do something with the returned data
  console.log(data);
});

// Sends a message with id: "POST_DATA" - no data is expected back
messageHandler.send("POST_DATA", { dummy: "Nothing to report..." });

延长

import { MessageHandlerData } from "@estruyf/vscode";

panel.webview.onDidReceiveMessage(
  (message) => {
    const { command, requestId, payload } = message;

    if (command === "GET_DATA") {
      // Do something with the payload

      // Send a response back to the webview
      panel.webview.postMessage({
        command,
        requestId, // The requestId is used to identify the response
        payload: `Hello from the extension!`,
      } as MessageHandlerData<string>);
    } else if (command === "POST_DATA") {
      // Do something with the payload
    }
  },
  undefined,
  context.subscriptions
);

错误

如果您想将错误发回网页视图, 您可以使用 error 属性代替 payload 属性和通过错误数据.

延长

panel.webview.postMessage({
  command,
  requestId, // The requestId is used to identify the response
  error: `Something went wrong!`,
} as MessageHandlerData<string>);

网页视图

messageHandler
  .request<string>("GET_DATA_ERROR")
  .then((msg) => {
    setMessage(msg);
  })
  .catch((err) => {
    setError(err);
  });

通讯员

信使可以用来向您的扩展发送消息,也可以收听您扩展发送的消息.

import { Messenger } from "@estruyf/vscode/dist/client";

// Get the VS Code API in your webview
Messenger.getVsCodeAPI();

// Listen to messages from your extension.
const listener = (message: MessageEvent<EventData<T>>) => {
  const event = message.data;
  console.log(event.command, event.payload);
};

Messenger.listen<T>(listener);

// Remove a listener
Messenger.unlisten(listener);

// Send a message to your extension
Messenger.send("command", payload);

网页视图帮助器

import { WebviewHelper } from "@estruyf/vscode";

// Generate a random string for your webview
WebviewHelper.getNonce();

公用事业

主题公用事业

import { getThemes, getTheme } from "@estruyf/vscode";

// Get all contributed themes
const themes = getThemes();

// Get the currently active theme or a specific theme by name
const theme = await getTheme();
const specificTheme = await getTheme("Dark+ (default dark)");

路径工具

import { parseWinPath } from "@estruyf/vscode";

// Convert Windows path to POSIX path
const posixPath = parseWinPath("C:\\Users\\Name\\file.txt"); // "C:/Users/Name/file.txt"

工作空间

import { bringToFront } from "@estruyf/vscode";
import { Uri } from "vscode";

// Bring a workspace folder to the front in VS Code
await bringToFront(Uri.file("/path/to/workspace"));

扩展元数据

扩展信息

这个 ExtensionInfo 类为您的扩展提供元数据和状态管理.

import { ExtensionInfo } from "@estruyf/vscode";

const extInfo = ExtensionInfo.getInstance(context);
const name = extInfo.name;
const version = extInfo.version;
const isUpdated = extInfo.isUpdated();
extInfo.updateVersion();

团队设置

团队安排

这个 TeamSettings 类帮助管理基于团队的配置文件和设置.

import { TeamSettings } from "@estruyf/vscode";

// Initialize team settings
TeamSettings.init("team-settings.json", "myExtension");

// Get a team setting
const value = TeamSettings.get<string>("settingKey");

// Update a team setting
await TeamSettings.update<string>("settingKey", "newValue");

// Listen for config changes
TeamSettings.onConfigChange((global) => {
  // Handle config change
});

许可证

MIT 许可证