保存 VSCode 时更漂亮 - JavaScript

您是否曾经厌烦了默认的 VSCode 保存提示框？或者您是否曾经寻找过一种更好的方式来保存您的 JavaScript 代码？那么，今天我就为您分享一种让您的 VSCode 保存更漂亮的方法！

步骤 1：安装 VSCode 插件

第一步，您需要安装一个叫做“Customize UI”（自定义 UI）的 VSCode 插件。您可以通过在 VSCode 中搜索插件并安装。

步骤 2：选择并编辑主题

一旦您已经安装了“Customize UI”插件，您可以通过点击 VSCode 底部工具栏的“齿轮”图标打开插件设置。在“颜色主题”标签下，您可以选择您喜欢的主题，例如“Monokai”或“Solarized Dark”。

步骤 3：编辑保存提示窗口

现在，您已经选择了您的主题，接下来您需要为您的保存提示窗口创建一个更漂亮的外观。在“Custom CSS”标签下，您将看到一些自定义 CSS 代码。

在这个文本框中，您可以输入以下代码并保存。

/*JS Save Dialog */
.monaco-workbench .dialog-message-contents code {
    color: #ff8080;
    font-weight: bold;
}

.monaco-workbench .dialog-message-contents em {
    color: #5AC8FA;
    font-style: italic;
}

.monaco-workbench #workbench.customizeUI-titlebar .titlebar-normal {
    background-color: #282c34;
    color: whitesmoke;
}

.monaco-workbench #workbench.customizeUI-titlebar .titlebar-normal .window-controls-container .titlebar-button,
.monaco-workbench #workbench.customizeUI-titlebar .titlebar-maximized .window-controls-container
.titlebar-button {
    color: whitesmoke;
}

.monaco-workbench #workbench.customizeUI-titlebar .titlebar-normal .window-controls-container .titlebar-button:hover,
.monaco-workbench #workbench.customizeUI-titlebar .titlebar-maximized .window-controls-container
.titlebar-button:hover {
    color: #5AC8FA;
}

.monaco-workbench .dialog-buttons-container .secondary-button {
    color: #5AC8FA !important;
}

.monaco-workbench .dialog-buttons-container .secondary-button:hover,
.monaco-workbench .dialog-buttons-container .secondary-button:focus {
    background-color: #5AC8FA !important;
}

此代码段创建了一个更漂亮、更有活力的保存提示窗口。您可以根据自己的喜好更改此代码段中的颜色和字体属性。

步骤 4：重启 VSCode 并保存您的代码！

现在，您已经编辑了插件的设置并保存了您的代码，在您进行 VSCode 中的下一次保存操作时，您将看到更漂亮的保存提示窗口。

注意：如果您的 Chrome 浏览器版本高于 61，您需要勾选“Allow custom UI”（允许自定义 UI）选项才能启用此插件。

祝您保存愉快！