如何通过VSCode URL传递数据？VSCode扩展接收Web应用参数咨询

核心思路 #

VSCode允许扩展注册自定义URI处理能力，你可以替换原有直接调用vscode://file的方案，自定义带参数的URI协议，同时实现打开文件+传递参数的需求。

具体实现步骤 #

• 第一步：在扩展的package.json中声明URI激活事件
  配置示例：

  {
    "activationEvents": ["onUri"],
    "publisher": "你的发布者ID",
    "name": "你的扩展ID",
    // 其他扩展配置项
  }
  

• 第二步：在扩展入口代码中注册URI处理器
  代码示例（TypeScript）：

  import * as vscode from 'vscode';
  import * as querystring from 'querystring';
  
  export function activate(context: vscode.ExtensionContext) {
    // 注册URI处理实例
    const uriHandler = vscode.window.registerUriHandler({
      handleUri(uri: vscode.Uri) {
        // 解析URI携带的查询参数
        const query = querystring.parse(uri.query);
        // 提取自定义参数
        const targetFilePath = query.filePath as string;
        const customData = query.data as string;
        
        // 实现原有打开文件的逻辑，替代默认的vscode://file能力
        if (targetFilePath) {
          vscode.workspace.openTextDocument(targetFilePath).then(doc => {
            vscode.window.showTextDocument(doc);
          });
        }
  
        // 处理接收的自定义数据，执行扩展后续逻辑
        console.log('Web端传递的数据：', customData);
      }
    });
  
    context.subscriptions.push(uriHandler);
  }
  

• 第三步：Web端构造自定义URI触发调用
  代码示例：

  // 构造参数，特殊字符、中文必须做URL编码
  const params = new URLSearchParams();
  params.append('filePath', '/Users/xxx/project/test.js'); // 要打开的目标文件路径
  const sendData = JSON.stringify({ name: 'test', id: 123 });
  params.append('data', encodeURIComponent(sendData)); // 要传递的自定义数据
  
  // 拼接URI，格式固定为 vscode://<发布者ID>.<扩展ID>/<自定义路径>?参数
  const vscodeUri = `vscode://你的发布者ID.你的扩展ID/open?${params.toString()}`;
  
  // 调用打开VSCode
  window.open(vscodeUri);
  

注意事项 #

• URI存在长度限制，若单条传递数据超过2KB，不要直接拼接在查询参数中。可以先将数据存入后端临时存储（设置短过期时间），仅在URI中传递数据ID，扩展拿到ID后再请求后端拉取完整数据
• 所有非ASCII字符的参数必须做URL编码，避免解析异常
• 若需要校验数据来源合法性，可以在参数中加签名校验，扩展侧验证签名通过后再处理数据，避免恶意请求

内容的提问来源于stack exchange，提问作者Han Wang