如何在 VSCode 中创建自定义对话框？

Posted 2023-02-15

【中文标题】如何在 VSCode 中创建自定义对话框？

【英文标题】：How to create a custom dialog in VSCode?

【发布时间】：2017-01-21 17:24:36

【问题描述】：

我正在为 VSCode 开发一个扩展，我想显示一个自定义对话框来帮助用户配置一个 ini 文件。

是否可以创建带有标签和输入的自定义对话框？

【参考方案1】：

您无法创建新的 UI 元素，但如果您想从用户那里获取输入，您可以使用如下代码：

let options: InputBoxOptions = 
    prompt: "Label: ",
    placeHolder: "(placeholder)"


window.showInputBox(options).then(value => 
    if (!value) return;
    answer1 = value;
    // show the next dialog, etc.
);

这将使用与命令面板相同的 UI（当您按 Ctrl+P 或任何其他打开顶部输入框的命令时） .

【讨论】：

2017 年还是这样吗？另外我想知道是否有提到 vscode 或 smth 的“UI 政策”，他们讨论了为什么这还不是 api 的一部分，或者他们是否计划在未来实施它？

是的，这仍然是正确的。您可以在此处阅读此决定背后的原则：code.visualstudio.com/docs/extensionAPI/patterns-and-principles

"我们不向扩展编写者提供对底层 UI DOM 的直接访问。通过 VS Code，我们不断尝试优化底层 Web 技术的使用......我们将继续调整随着这些技术和产品的发展，我们对 DOM 的使用......我们在它们自己的宿主进程中运行扩展，并防止直接访问 DOM。VS Code 还包括一组内置的 UI 组件，用于常见场景，例如 IntelliSense，以便这些体验在编程语言和扩展之间保持一致，并且扩展开发人员不需要构建自己的。”

color picker扩展完美拉出对话框

看起来很整洁，感谢 Jeff 的提醒。但是，他们不使用标准 api 来执行此操作，而是在自己的进程中生成一个单独的电子应用程序，并使用 ipc 在它和主颜色选择器扩展进程之间进行通信。