Visual Studio 代码（vscode）：将命令面板更改为看起来像 Atom 的面板？

Question

我想知道 vscode 的扩展 API 中是否有一些东西可以使命令面板看起来像 Atom 的面板？

我喜欢 Atom 在屏幕中间打开它的方式和它的风格。

我们可以在扩展中应用自定义 CSS sheet 或做些什么来实现吗？！

非常感谢！

Answer 1

这目前既不可能也没有计划，无论是来自扩展还是来自配置设置。

我建议在命令面板上打开问题 VS Code 必须在需要时改进它 (https://github.com/Microsoft/vscode/)。

Answer 2

我也遇到过这个问题

我已经多次尝试 VS Code，但我真的不喜欢命令面板的外观。这一切都被压扁了，没有填充物……呃！

所以，我花了一些时间研究这个，我终于找到了一种破解 VS Code 命令面板的方法，使它看起来更像 Atom。

这是我的命令面板现在的样子：

这些是我采取的步骤：

安装Monkey Patch
安装Customize UI
将以下声明添加到您的 settings.json（根据您的需要进行自定义）：

    "customizeUI.stylesheet": {
        ".quick-input-widget": "width: 650px; margin-left: -325px;important;top:50px !important; padding:15px !important;background-color:rgb(41 46 53)!important;border-radius:10px!important;",
        ".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",
        ".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",
        ".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",
        ".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",
        ".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",
        ".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",
        ".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",
        // ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",
        ".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"
    },

它与 Atom 不完全匹配：

此方法的主要问题是键盘滚动不稳定。命令调色板列表的“结尾”超出了包含 div 的溢出限制。因此，当您向下箭头时，您必须保持向下箭头超过可见 div 的末尾才能使列表移动。我可以忍受这个。其他更擅长破解 VS Code 的人也许能够解决这个问题。
当您调用命令面板时，Atom 会使屏幕的其余部分变暗。我现在看不到这样做的方法。使用 Money Patch 添加一些自定义 javascript（添加 class 或伪元素）可能会允许这种情况发生，但我不会尝试。

可能还有其他问题，但就目前而言 — 这似乎工作得很好！

编辑：为清楚起见，文本。

Visual Studio 代码（vscode）：将命令面板更改为看起来像 Atom 的面板？

Visual Studio Code(vscode): Change command palette to look like Atom's one?

css

atom-editor

visual-studio-code

vscode-extensions