SynthWave'84 - VS Code使用流程

Posted on | Edited on | In

赛博朋克风，好看！

安装之前

Github地址：https://github.com/robb0wen/synthwave-vscode，先看开发者写的文档

下载安装vs code：https://code.visualstudio.com/

配置主题

下载安装theme

打开vs code，点击​ 文件 ——> 首选项——> 扩展（Ctrl + Shift + X）。

在搜索扩展里搜索 SynthWave，点击 安装。

sy6

再次在搜索扩展里搜索 Custom CSS and JS Loader，点击 安装。

在vs code里，点击 文件 ——> 新建文件，打开网址，把synthwave84.css里的所有代码复制粘贴过去，保存，文件命名为 synthwave84.css，下拉保存类型为css，点击确定。

sy1

接下来我们需要修改vs code的settings.json：

最快的方法：点击 文件 ——> 首选项 ——> 设置——> 扩展——>在settings.json中编辑，弹出之后，右键标签，选择 在资源管理器中显示 ，就能自动打开路径文件夹（C:\Users\dell\AppData\Roaming\Code\User）了。

回到vs code，settings.json文件，修改代码，引用刚刚的css文件，windows用户在后面复制粘贴以下内容并保存：

1
2
3
4
5
{
  "vscode_custom_css.imports": [
    "file:///D:/synthwave84.css"
    ]
}

注意：自己修改file后面的路径，你的css文件保存在哪里，就用对应路径。

sy4

修改完后，win用户使用快捷键 Ctrl + Shift + P，输入 Enable custom CSS and JS ， 找到后鼠标点击一下，会出现提示：

sy2

点击Restart Visual Studio Code。

sy3

点击旁边的齿轮按钮，选择不再显示这条提醒。

如果还是没有发光效果，使用快捷键 Ctrl + Shift + P，输入 reload custom CSS and JS， 找到后鼠标点击一下，就可以看到发光效果了，不会很刺眼：

sy5

不稳定的插件

VS code doesn’t natively support text effects and as a result, the glow is experimental. It’s likely to be buggy and, whilst it looks rad, it isn’t intended for extended use.

文档上有这么一句话，注意这个Custom CSS and JS Loader 插件很容易坏掉，不是主题的问题。希望以后这个插件更新后能避免这种情况~

更新

Every time you update VS code, you will need to repeat this step to re-enable custom CSS and JS. Similarly, when the theme updates, you will need to copy the updated css to your chosen location.

This is less than ideal, but until VS code add the option to use custom CSS natively, it’s unfortunately the only option.

每次我们更新vs code，都需要重复上面的步骤去re-enable custom CSS and JS。

同样地，主题有了更新后，你也需要去复制最新的css文件去覆盖你的旧css文件。

关掉发光效果和卸载

The glow effect started as a joke and was never intended for long-term coding sessions. If you want to turn it off, you can disable it at any time by opening your command palette with Ctrl + Shift + P or Shift + ⌘ + P and choose “Disable custom CSS”.

If you decide to change to a different theme altogether, you will also need to disable the custom css in this way. You may also wish to remove the file path from your settings.json.

这个发光效果不是很稳定，如果想要关掉，打开vs code，使用快捷键 Ctrl + Shift + P，输入 Disable custom CSS ，找到后鼠标点击一下。

如何卸载主题？

先根据上面的步骤把发光效果关掉，然后打开settings.json，把之前添加的那行代码删掉

sy7

参考资料

1.https://github.com/robb0wen/synthwave-vscode

2.https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode