开发扩展时，如何让贡献式设置拥有多行textarea及重置按钮？

一、将文本框替换为多行textarea（默认设置界面） #

完全可以通过配置实现，在package.json的contributes.configuration中，给目标配置项添加editor属性并指定类型为textarea即可，示例代码：

"contributes": {
  "configuration": {
    "title": "你的扩展名称",
    "properties": {
      "yourExtension.firstParam": {
        "type": "string",
        "default": "默认值1",
        "description": "第一个参数的描述",
        "editor": {
          "type": "textarea",
          "rows": 5 // 可选，设置默认显示行数
        }
      },
      "yourExtension.secondParam": {
        "type": "string",
        "default": "默认值2",
        "description": "第二个参数的描述",
        "editor": {
          "type": "textarea",
          "rows": 5
        }
      }
    }
  }
}

配置完成后，VS Code默认设置界面会自动将这两个字段渲染为多行文本框。

二、添加自定义重置默认值按钮 #

默认设置界面的每个字段右侧「...」菜单中自带「重置为默认值」选项，但如果需要在字段旁单独添加按钮，就得创建自定义Webview设置页面，步骤如下：

1. 注册设置命令与Webview #

在扩展主文件（如extension.ts/extension.js）中添加以下代码：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const openSettingsCmd = vscode.commands.registerCommand('yourExtension.openSettings', () => {
    const panel = vscode.window.createWebviewPanel(
      'extensionSettings',
      '扩展设置',
      vscode.ViewColumn.One,
      { enableScripts: true }
    );

    // 获取当前配置值
    const config = vscode.workspace.getConfiguration('yourExtension');
    const firstParam = config.get('firstParam') as string;
    const secondParam = config.get('secondParam') as string;

    // 渲染Webview页面
    panel.webview.html = getWebviewContent(firstParam, secondParam);

    // 接收Webview消息，处理重置与更新逻辑
    panel.webview.onDidReceiveMessage(async (msg) => {
      switch (msg.command) {
        case 'resetFirst':
          await config.update('firstParam', undefined, vscode.ConfigurationTarget.Global);
          panel.webview.html = getWebviewContent(
            config.get('firstParam') as string,
            secondParam
          );
          break;
        case 'resetSecond':
          await config.update('secondParam', undefined, vscode.ConfigurationTarget.Global);
          panel.webview.html = getWebviewContent(
            firstParam,
            config.get('secondParam') as string
          );
          break;
        case 'updateFirst':
          await config.update('firstParam', msg.value, vscode.ConfigurationTarget.Global);
          break;
        case 'updateSecond':
          await config.update('secondParam', msg.value, vscode.ConfigurationTarget.Global);
          break;
      }
    }, undefined, context.subscriptions);
  });

  context.subscriptions.push(openSettingsCmd);
}

// Webview页面模板
function getWebviewContent(firstVal: string, secondVal: string) {
  return `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .setting-item { margin: 20px 0; }
    textarea { width: 100%; min-height: 120px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    button { margin-left: 12px; padding: 6px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="setting-item">
    <label>第一个参数：</label>
    <textarea id="first">${escapeHtml(firstVal)}</textarea>
    <button onclick="resetFirst()">重置默认值</button>
  </div>
  <div class="setting-item">
    <label>第二个参数：</label>
    <textarea id="second">${escapeHtml(secondVal)}</textarea>
    <button onclick="resetSecond()">重置默认值</button>
  </div>

  <script>
    const vscode = acquireVsCodeApi();
    // 监听文本框输入，实时更新配置
    document.getElementById('first').addEventListener('input', e => {
      vscode.postMessage({ command: 'updateFirst', value: e.target.value });
    });
    document.getElementById('second').addEventListener('input', e => {
      vscode.postMessage({ command: 'updateSecond', value: e.target.value });
    });
    // 重置按钮逻辑
    function resetFirst() { vscode.postMessage({ command: 'resetFirst' }); }
    function resetSecond() { vscode.postMessage({ command: 'resetSecond' }); }
  </script>
</body>
</html>
  `;
}

// 转义HTML字符，避免XSS风险
function escapeHtml(text: string): string {
  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

2. 在package.json中注册命令入口 #

在package.json中添加命令声明与激活事件：

"activationEvents": [
  "onCommand:yourExtension.openSettings"
],
"contributes": {
  "commands": [
    {
      "command": "yourExtension.openSettings",
      "title": "打开扩展自定义设置"
    }
  ],
  // 保留原configuration配置，兼容默认设置界面
  "configuration": { ... }
}

用户可通过命令面板调用「打开扩展自定义设置」命令，进入带独立重置按钮的设置页面。

内容的提问来源于stack exchange，提问作者D.S.