VSCode自定义视图持续加载，无法显示欢迎内容求助

问题场景 #

开发VSCode扩展时，配置了package.json的contributes节点，并编写了extension.js激活逻辑，预期当notesView.notesLen为0时显示欢迎内容，但自定义视图始终处于加载状态，无法正常渲染内容。

相关代码 #

package.json 配置片段

"contributes": {
    "viewsWelcome": [
      {
        "view": "notesView",
        "contents": "No node dependencies found. Learn more about npm.\n[Add Dependency](command:notesView.addNote)",
        "when": "notesView.notesLen == 0"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "side-notes",
          "title": "Side Notes",
          "icon": "media/notesIcon.svg"
        }
      ]
    },
    "views": {
      "side-notes": [
        {
          "id": "notesView",
          "name": "Notes",
          "type": "webview"
        }
      ]
    },
    "menus": {
      "view/title": [
        {
          "command": "notesView.addNote",
          "group": "navigation",
          "when": "view == notesView && notesView.notesLen == 0"
        }
      ]
    },
    "commands": [
      {
        "command": "notesView.addNote",
        "title": "Add Side Note",
        "icon": "$(add)"
      }
    ]
}

注：原配置中包含外部链接，已移除以符合无外链要求

extension.js 激活代码

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    vscode.commands.executeCommand('setContext', 'notesView.notesLen', 0);

    context.subscriptions.push(
        vscode.commands.registerCommand('notesView.addNote', async () => {
            vscode.window.showInformationMessage('Hello World!');
        }));

}

问题根因 #

将视图类型设置为webview后，未为该视图注册Webview视图提供者。VSCode会持续等待提供者返回Webview内容，导致视图一直处于加载状态，即使viewsWelcome的显示条件满足也无法触发渲染。

修复方案 #

1. 注册Webview视图提供者 #

在activate函数中添加Webview视图的注册逻辑，让VSCode知道如何处理该视图的渲染：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 初始化上下文变量
    vscode.commands.executeCommand('setContext', 'notesView.notesLen', 0);

    // 实现Webview视图提供者
    class NotesWebviewProvider implements vscode.WebviewViewProvider {
        resolveWebviewView(
            webviewView: vscode.WebviewView,
            context: vscode.WebviewViewResolveContext,
            token: vscode.CancellationToken
        ): void {
            // 若需要在有笔记时显示Webview内容，可在此处编写渲染逻辑
            // 当前场景下，仅需让视图完成初始化，即可触发欢迎内容显示
        }
    }

    // 注册提供者，关联视图ID
    context.subscriptions.push(
        vscode.window.registerWebviewViewProvider('notesView', new NotesWebviewProvider())
    );

    // 注册添加笔记命令
    context.subscriptions.push(
        vscode.commands.registerCommand('notesView.addNote', async () => {
            vscode.window.showInformationMessage('Hello World!');
            // 可选：添加笔记后更新上下文变量，隐藏欢迎内容
            vscode.commands.executeCommand('setContext', 'notesView.notesLen', 1);
        })
    );
}

2. 验证上下文变量时机 #

确保setContext命令在视图初始化前执行，或者在resolveWebviewView方法中再次确认上下文状态，避免视图加载时上下文未同步。

3. 检查欢迎内容格式 #

确保viewsWelcome的contents字段格式正确，换行使用\n转义，命令链接格式为[显示文本](command:命令ID)。

原理说明 #

VSCode的Webview类型视图依赖对应的提供者来完成初始化，只有注册提供者后，VSCode才会结束视图加载流程，此时才会检查viewsWelcome的显示条件，渲染对应的欢迎内容。

内容的提问来源于stack exchange，提问作者Shubhdeep Chhabra