蒸汽波风格的 VS Code

最近一直在准备秋招，非常忙碌，不过有空的时候还是要写一些总结，是时候放一点干货出来啦。

今天看到一个叫 SynthWave '84 的 VS Code 主题，我觉得效果还不错，给大家看看应用主题后的效果：

是不是很炫酷呢？话不多说，让我们开始安装主题吧。

（过程中用到的插件会修改 VS Code 文件，介意勿装）

 

步骤1：安装主题

点击 VS Code 左侧的拓展程序，搜索 SynthWave '84 ，就是这个主题：

然后点击 Install 进行安装

 

步骤2：安装必要插件

这个蒸汽波主题使用自定义CSS来实现文字发光效果，但 VS Code 并没有原生支持加载自定义CSS文件，

因此我们需要安装额外的插件。搜索拓展程序 Custom CSS and JS Loader ，就是这个：

点击 Install 安装即可

 

步骤3：配置自定义CSS文件

接下来，我们需要创建一个 CSS 文件，名叫 synthwave84.css ，可以用编辑器或者记事本在桌面创建一个，

然后找到 SynthWave 的 Github 仓库里的这个文件：synthwave84.css ，然后复制它的内容到本地 CSS 文件中，保存

（上面这个CSS文件是带文字辉光效果的，如果你想文字不带辉光，就找这个： synthwave84-noglow.css 如法炮制）

 

步骤4：配置主题

将你本地的 CSS 文件复制到 C盘 的任意文件夹下，比如：

C:\Users\你的用户名\

复制到 C盘 其他文件夹也可以，但路径不要有空格。然后打开 VS Code，点击左下角齿轮进入设置，打开 setting.json：

然后做如下修改：

你添加的部分的路径就是你之前本地 CSS 文件的路径，斜杠 \ 要换成反斜杠 / 

注意：JSON文件由键值对组成，每个键值对都要用逗号分隔，记得添加逗号

 

步骤5：启用自定义CSS

按快捷键 Ctrl + Shift + P，打开 VS Code 的命令菜单，搜索 Enable Custom CSS and JS ：

然后点击命令，再重启 VS Code，即可令主题生效。现在就可以向别人秀一秀你的 VS Code 啦！

 

注意事项

你应该注意到，安装蒸汽波主题后，每一次 VS Code 启动，右下角都会弹出这样的警告：

这是因为之前安装的 Custom CSS and JS Loader 插件修改了 VS Code 的文件，

你只需要点击右上方的齿轮，然后选择不再提示即可。

另外还有一点，因为该插件会修改 VS Code 代码，因此每一次 VS Code 更新后都会自动禁用该插件，

你每一次更新 VS Code 后都要重新 Ctrl + Shift + P ，然后 Enable Custom CSS and JS