VSCode 美化#

前情提要#

最近被学弟安利了一个开源项目 ServiceLogos，是一个各类开发语言与 IDE 的 Logo 设计仓库。

所以想了想，老登也要跟上时代！美化的尽头是默认，但首先要开始美化😁

插件安装#

众所周知，VSCode 的本质就是一个~~浏览器~~ IDE，你可以在里面写代码、~~看动漫~~、~~看小说~~，而这些的前提都是基于各种各样的插件。因此，首先安装以下两个插件：

1
名称: Custom CSS and JS Loader
2
ID: be5invis.vscode-custom-css
3
说明: Custom CSS and JS for Visual Studio Code
4
版本: 7.2.1
5
发布者: be5invis
6
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css

1
名称: Background
2
ID: Katsute.code-background
3
说明: The most advanced background image extension for VSCode
4
版本: 2.10.2
5
发布者: Katsute
6
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Katsute.code-background

美化设置#

背景#

Ctrl + Shift + P，搜索 Background: Configuration，有四个组件的背景可以设置：

Window（整个窗口）
Editor（编辑器）
Sidebar（侧边栏）
Panel（各种弹出窗口）

选中你要修改的组件，然后选择一张图片即可。

Logo#

Ctrl + Shift + P - Open User Settings

在 settings.json 中插入一行：

1
"vscode_custom_css.imports": ["file:///D:/snippets/vscode-custom/logo.css"]

这里的 file:/// 是文件协议，指向你的自定义 css 文件，该文件如下：

1
.editor-group-watermark > .letterpress{
2
  background-image: url("image.link") !important;
3
  opacity: .75;
4
  aspect-ratio: 3/2 !important;
5
}

将其中的 image.link 替换为 Logo 图片的链接，可以是 ServiceLogos 中的 raw link，也可以将图片转为 base64 后替换进去。如果网络环境无法直连 github，建议选择 base64 方案。

日勿の部落格

VSCode 美化#

前情提要#

插件安装#

美化设置#

背景#

Logo#

最终效果#