激发你的编程动力：VS Code 外观自定义完整指南！🚀🔥

【注：相信我，这个博客里有很多你从未听说过的新奇事物。】

你的编辑器也像上面那样吗？厌倦了常用的 VS Code 主题？从一开始就用着同样的字体？想升级你的 VS Code 环境，让它看起来更棒吗？

保存这篇文章，因为今天我就要向你展示如何做到这一点！
我将向你展示如何将你那老旧乏味的 VS Code 编辑器变成一个全新的界面！

第一步：准备工作
首先，你需要VS Code 😂。好吧，我知道你已经有了 :) 总之，我们要下载一些东西。

步骤 2：Nerd Fonts 和 Inter Font

极客字体是指支持连字且拥有数百种操作系统字体中不存在的不同字形图标的字体。

访问此网站并下载一些等宽字体。在本教程中，我建议您下载 Fira Code、Jetbrains Mono 和 Victor Mono 这三种字体。下载完成后，请安装这些字体。

请在您的操作系统上下载并安装这些极客字体。

现在打开你的 VS Code。按下 键打开设置Ctrl/Cmd + ,。

在该Editor: Font Family部分中，将字体名称更改为JetbrainsMono Nerd Font。请参考下图。

现在我们的编辑看起来帅气多了，不是吗？

现在您还需要下载并安装“Inter”字体。
请访问此链接：https://rsms.me/inter/
下载并安装。我们稍后会用到它。

步骤三：安装主题

现在我们要安装一些主题。打开 VS Code，搜索以下主题：Best Themes Redefined

点击安装按钮，砰！💥

这么多不同的主题！！全都在这里！选择最适合你的那一个。

步骤 4：（仅适用于 Windows 系统，macOS 系统无需此步骤）安装 Mactype

Mactype 是一款用于改善 Windows 系统字体渲染效果的应用程序。请从此处安装 Mactype：https ://github.com/snowie2000/mactype/releases/download/v1.2023.5.31/mactype-20230531.zip

安装完成后，打开 Mactray，选择“以 Windows 服务方式运行”。点击“下一步”。在下一个屏幕上，选择“默认配置文件”。点击“完成”。一切就绪！

步骤 5：自定义 VS Code 用户界面

下载自定义 CSS 和 JS 加载器。

现在你需要在操作系统中选择任意位置创建一个 CSS 文件。由于本教程使用的是 Windows 系统，所以我将其创建在 .css 目录下C:/Users/Username/.local/customcss.css。请记住这个位置。

打开 VS Code，按下Ctrl/Cmd+Shift+P，输入 open user settings json。

添加以下行：

"vscode_custom_css.imports": [

 "file:///C:/Users/username/.local/customcssforvscode.css"
],

不同操作系统和用户的路径名称会有所不同。

现在打开你创建的 CSS 文件，并添加以下代码。`class`.windows仅适用于 Windows 系统。请根据你的操作系统分别使用.linux`or` 属性。.mac

.windows {
    font-family: "Inter";
    -webkit-text-stroke-width: 0.2px; /* not needed on macos */
}

.mtki {
    font-family: VictorMono Nerd Font;
}

这样做有什么作用？
增加笔画宽度可以改善 Windows 和 Linux 系统上的字体显示效果。我们还将用户界面字体系列更改为 Inter。

修改 mtki 类中的属性可以控制 VS Code 中的斜体字体行为。我们将斜体字体系列更改为我们想要的字体。

您可以根据需要进行任意修改。

保存下来。

现在按下快捷键Ctrl/Cmd+Shift+P，输入 enable custom css and js，然后按回车键。按照提示重启 VS Code。

瞧！一个焕然一新的 VS Code 界面。

你会注意到所有斜体字体现在看起来都非常非常好。

这就是完成上述自定义设置后的效果。

步骤 6：自定义标题栏

按下Ctrl/Cmd + ,，输入window.title。您将看到如下所示的输入框。

现在你可以随意输入任何你认为合适的内容。我只输入了文件名和我的名字。你可以随意发挥。

同时将标题栏样式更改为自定义。

///////////////////////////////////

一切就绪。现在你的 VS Code 界面焕然一新。

///////////////////////////////////

更多自定义选项包括调整“视图”菜单中的设置。您可以启用不同的模式，例如禅定模式等，以获得更专注的编辑环境。

///////////////////////////////////

希望你喜欢我的博客。请点赞并分享！