我的 VSCode 扩展有一个选项卡，它显示一个视图（在
package.jsonpackage.json这是我的代码示例
我将
[installed_package_version]"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "myview",
"title": "My view",
"icon": "icon.png"
}
]
},
"viewsWelcome": [
{
"view": "myview-page",
"contents": "My content. 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>
`;
}
这有帮助吗？