Visual Studio Code(vscode)：将命令面板更改为 Atom 的？答案

【问题标题】：Visual Studio Code(vscode): Change command palette to look like Atom's one?Visual Studio Code(vscode)：将命令面板更改为 Atom 的？
【发布时间】：2016-11-11 16:41:08
【问题描述】：

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

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

我们可以在扩展中应用自定义 CSS 表或做一些事情来实现吗？！

非常感谢！

【问题讨论】：

标签： css visual-studio-code atom-editor vscode-extensions

【解决方案1】：

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

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

【讨论】：

【解决方案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 的溢出限制。因此，当您向下箭头时，您必须保持向下箭头 PAST 可见 div 的末尾，以使列表移动。我可以忍受这个。其他更擅长破解 VS Code 的人或许能够弄清楚这一点。
当您调用命令面板时，Atom 会使屏幕的其余部分变暗。我现在没有办法做到这一点。使用 Money Patch 添加一些自定义 javascript（添加类或伪元素）可能会允许这种情况发生，但我不会尝试。

可能还有其他问题，但现在 - 这似乎工作得很好！

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

【讨论】：