根据此页面，网络视图可以“在侧边栏或面板区域中呈现”。这些示例展示了如何渲染为编辑器面板...
vscode.window.createWebviewPanel(
'catCoding', // Identifies the type of the webview. Used internally
'Cat Coding', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{} // Webview options..
);
我正在尝试将网络视图渲染为资源管理器下侧边栏中的附加面板。
我假设对第三个参数进行某种更改
vscode.ViewColumn.One@Gamma11，感谢您的回答。 绝对有助于解决“定义迷宫”
稍微详细说明一下（也许可以使用更严格的 JS（而不是 TS）版本来简化/澄清 webview-view-sample）：
1 - 在 package.json 中，您有以下条目将视图定义为位于侧边栏资源管理器中的 Web 视图：
"views": {
"explorer": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Trillion Files"
}
]
}
2 - 同样在 package.json 中发送到 JS 的激活
"activationEvents": [
"onView:calicoColors.colorsView"
]
3 - 在 JS 中，事件由 vscode.commands.registerCommand 拾取
function activate(context){
var thisProvider={
resolveWebviewView:function(thisWebview, thisWebviewContext, thisToken){
thisWebviewView.webview.options={enableScripts:true}
thisWebviewView.webview.html="<!doctype><html>[etc etc]";
}
};
context.subscriptions.push(
vscode.commands.registerWebviewViewProvider("calicoColors.colorView", thisProvider);
);
}
function deactivate() { }
module.exports = {
activate,
deactivate
}
还有很多属性可以进入此Provider，但是这个最少的代码可以在侧边栏中启动并运行面板。
createWebviewPanel()registerWebviewViewProvider()webview-view-samplevscode.window.registerWebviewViewProvider('calicoColors.colorsView', provider));
然后通过
package.json{
"contributes": {
"views": {
"explorer": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
}
}
}
package.json
"viewsContainers": { "activitybar": [ { "id": "ollamaContainer", "title": "Ollama", "icon": "media/icon.png" } ] }, "views": { "ollamaContainer": [ { "type": "webview", "id": "ollamaView", "name": "Ask ai chat" } ] }activityBar 是您的容器所在的位置。 视图容器： id：是你告诉视图在哪里渲染的方式。 title：将鼠标悬停在扩展程序图标上时显示的名称。 icon: 侧边栏显示的图片。
浏览次数： 在我的示例中为“ollamaContainer”。这必须与您的视图容器的 ID 匹配。 type：（默认设置为树节点。）必须设置为webview，否则会出现以下错误：“没有注册可以提供视图数据的数据提供者。” id：必须从激活函数内部的扩展调用的 id。 名称：出现在侧栏顶部。
扩展.ts
` 导出异步函数 activate(context: vscode.ExtensionContext) { 上下文.订阅.推送( vscode.window.registerWebviewViewProvider( “奥拉马视图”， 新的 MyWebviewViewProvider（上下文） ） ）； }
导出类 MyWebviewViewProvider 实现 vscode.WebviewViewProvider { 构造函数（私有上下文：vscode.ExtensionContext）{}
resolveWebviewView(
webviewView: vscode.WebviewView,
context: vscode.WebviewViewResolveContext,
_token: vscode.CancellationToken
) {
webviewView.webview.options = {
enableScripts: true,
};
webviewView.webview.html = this.getWebviewContent();
webviewView.webview.onDidReceiveMessage(async (message) => {
switch (message.command) {
case "showMessage":
vscode.window.showInformationMessage(message.text);
break;
}
});
}
getWebviewContent() {
return `
<!DOCTYPE html>
<html>
<body>
<h1>Hello from Side Panel!</h1>
<button onclick="sendMessage()">Send Message</button>
<script>
const vscode = acquireVsCodeApi();
function sendMessage() {
vscode.postMessage({
command: 'showMessage',
text: 'Hello from Webview!'
});
}
</script>
</body>
</html>
`;
}
}
`
这应该是您在项目中启动基本 Web 视图所需的全部内容。
使用 vscode.ViewColumn.Beside 在侧边栏上显示
这就是 viewColumn 的使用方式
export enum ViewColumn {
/**
* A *symbolic* editor column representing the currently active column. This value
* can be used when opening editors, but the *resolved* {@link TextEditor.viewColumn viewColumn}-value
* of editors will always be `One`, `Two`, `Three`,... or `undefined` but never `Active`.
*/
Active = -1,
/**
* A *symbolic* editor column representing the column to the side of the active one. This value
* can be used when opening editors, but the *resolved* {@link TextEditor.viewColumn viewColumn}-value
* of editors will always be `One`, `Two`, `Three`,... or `undefined` but never `Beside`.
*/
Beside = -2,
/**
* The first editor column.
*/
One = 1,
/**
* The second editor column.
*/
Two = 2,
/**
* The third editor column.
*/
Three = 3,
/**
* The fourth editor column.
*/
Four = 4,
/**
* The fifth editor column.
*/
Five = 5,
/**
* The sixth editor column.
*/
Six = 6,
/**
* The seventh editor column.
*/
Seven = 7,
/**
* The eighth editor column.
*/
Eight = 8,
/**
* The ninth editor column.
*/
Nine = 9
}