Visual Studio Code(vscode)：将命令面板更改为看起来像 Atom 的面板？

Question

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

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

我们可以在扩展中应用自定义 CSS 表或采取一些措施来实现这一目标吗？

Answer 1

我也曾有过这样的疑问。

\n

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

\n

因此，我花了一些时间研究这个问题，最终找到了一种方法来破解 VS Code 命令面板，使其看起来更像 Atom。

\n

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

\n

这些是我采取的步骤：

\n

\n
1. 安装猴子补丁
\n
2. 安装自定义用户界面
\n
3. 将以下声明添加到您的settings.json（根据您的需要进行自定义）：
\n

\n

\r\n

\r\n

    "customizeUI.stylesheet": {\n        ".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;",\n        ".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",\n        ".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",\n        ".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",\n        ".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",\n        ".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",\n        ".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",\n        ".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",\n        // ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",\n        ".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"\n    },

\r\n

\r\n

\r\n

\n

它与 Atom 不完全匹配：

\n

\n

• 这种方法的主要问题是键盘滚动不稳定。命令选项板列表的“末尾”最终超出了包含的 div 的溢出限制。因此，当您向下箭头时，您必须保持向下箭头超过可见 div 的末尾才能移动列表。我可以忍受这个。其他更擅长破解 VS Code 的人也许能够解决这个问题。

  \n
\n

• 当您调用命令选项板时，Atom 会使屏幕的其余部分变暗。我现在看不出有什么办法可以做到这一点。可能可以使用 Money Patch 添加一些自定义 JavaScript（添加类或伪元素），这将允许这种情况发生，但我不会尝试。

  \n
\n

\n

可能还有其他问题，但目前 \xe2\x80\x94 这似乎工作得足够好！

\n

编辑：为了清晰起见，文字。

\n