我的 VS Code 扩展有一个选项卡，它显示一个视图（在
package.jsonpackage.json具体来说，我的目标是使用
viewsWelcome这是我的代码示例
我将
[installed_package_version]"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "myview",
"title": "My view",
"icon": "icon.png"
}
]
},
"viewsWelcome": [
{
"view": "myview-page",
"contents": "My content. [My Button](command:my-command) Current version: [installed_package_version]",
"when": "true"
}
],
"views": {
"myview": [
{
"id": "myview-page",
"name": "My view",
"type": "tree"
}
]
}
}
以下是如何在 Web 视图中显示 vscode 扩展版本的简单示例：
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// Get the extension's version
const extensionVersion = vscode.extensions.getExtension('<your_extension_id>').packageJSON.version;
// Create and show a webview
const panel = vscode.window.createWebviewPanel(
'extensionVersion', // Identifies the type of the webview. Used internally
'Extension Version', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in
{}
);
// Set the HTML content of the webview
panel.webview.html = getWebViewContent(extensionVersion);
}
function getWebViewContent(version: string): string {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extension Version</title>
</head>
<body>
<h1>Extension Version</h1>
<p>The installed version of the extension is: ${version}</p>
</body>
</html>
`;
}
这有帮助吗？
如果您想在不使用 WebView 的情况下显示版本号并在视图中包含按钮，则可以通过创建一个带有文本框的自定义视图来实现此目的，以显示版本号和用于用户交互的按钮。但是，VSCode API 不直接支持视图中的渲染按钮。相反，您可以使用命令链接或上下文菜单操作来模拟按钮行为。
以下是如何修改视图以显示版本号并包含按钮：
// package.json
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "myview",
"title": "My view",
"icon": "icon.png"
}
]
},
"viewsWelcome": [
{
"view": "myview-page",
"contents": "My content.",
"when": "true"
}
],
"views": {
"myview": [
{
"id": "myview-page",
"name": "My view",
"type": "webview" // Change to "webview" to create a custom view with WebView
}
]
},
"commands": [
{
"command": "myextension.showVersion",
"title": "Show Version"
},
{
"command": "myextension.performAction",
"title": "Perform Action"
}
]
}
在此设置中：
myextension.showVersionmyextension.performAction"webview"然后，在您的扩展代码中：
// extension.js
const vscode = require('vscode');
function activate(context) {
let disposable = vscode.commands.registerCommand('myextension.showVersion', () => {
const extension = vscode.extensions.getExtension('your.extension.identifier');
const version = extension ? extension.packageJSON.version : 'Unknown';
vscode.window.showInformationMessage(`Extension Version: ${version}`);
});
context.subscriptions.push(disposable);
disposable = vscode.commands.registerCommand('myextension.performAction', () => {
vscode.window.showInformationMessage('Performing Action...');
});
context.subscriptions.push(disposable);
}
exports.activate = activate;
这将设置用于显示版本号和执行操作的命令处理程序。当用户单击自定义视图中的按钮（实现为命令链接或上下文菜单操作）时，将执行相应的命令，您可以显示版本号或执行任何所需的操作。