VSCode 中设置背景的两种方法

Visual Studio Code，简称 VS code，是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，并且可用于 Windows，macOS 和 Linux。它具有对 JavaScript，TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言（例如 C ++，C#，Java，Python，PHP，Go）和运行时（例如.NET 和 Unity）扩展的生态系统。

今天介绍几种在 Visual Studio Code 中设置背景的方法！！！

方法 1

修改 workbench.desktop.main.css 文件设置背景图片

vscode 其实就是一个网页程序, 所以可以找到 vscode 中的一个文件进行修改它的背景图片, 这个文件就是:workbench.desktop.main.css。

这个文件的路径是在 vs code 安装目录, 如下：

例如: D:\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

然后打开这个 workbench.desktop.main.css 文件进行 背景的添加设置, 注意这个文件打开后需要格式化代码一下!

背景图可以设置全局显示背景图 也可以 局部显示背景图

局部显示背景图，如下 css 代码:

body {background-image: url('file:/// 图片地址');

    background-size: 20%;

    background-position: 100% 100%;

    opacity: 0.75;

    background-repeat: no-repeat;

}

设置完成后重启 vscode, 如下图:

注意: 局部显示的图片格式最好选择 png 格式的

全局显示背景图，如下 css 代码:

body {background-image: url('file:/// 图片地址');

    background-size: 100%;

    opacity: 0.75;

    background-repeat: no-repeat;

}

注意: 这种修改 workbench.desktop.main.css 文件的方法来设置背景 如果 VScode 自动软件更新后  背景会消失，需要重新设置!

方法 2

使用 background 插件

在 vscode 插件市场搜索: background 插件、然后进行安装。如下图：

这里 background 背景插件还提供了一些用户自定义的配置参数, 这些配置参数设定在 setting.json 文件中，如下表：

| name                    | Type              | Description                                                  |

| ----------------------- | ----------------- | ------------------------------------------------------------ |

| background.enabled      | Boolean           | == 插件是否启用 ==   If background enabled   默认 true          |

| background.useDefault   | Boolean           | == 是否使用默认图片 == If use default images   默认 true        |

| background.customImages | Array<String 地址 > | == 自定义图片 == Your Your custom images                       |

| background.style        | Object            | == 自定义样式 == Custom style                                  |

| background.styles       | Array<Object>     | 每个图片的独立样式 Style of each image                       |

| background.useFront    | Boolean          | 前景图 / 背景图。在代码上面还是下面  == 一般设置 true==         |

| background.loop         | Boolean           | 循环模式，会重复显示图片    loop mode, may repeat your images |

在 setting.json 中配置案例:

 "background.customImages": [

        "file:///D:/6.png"   // 图片地址

    ],

    "background.style": {"content":"''","pointer-events":"none","position":"absolute",// 图片位置"width":"100%","height":"100%","z-index":"99999","background.repeat":"no-repeat","background-size":"25%,25%",// 图片大小"opacity":0.2 // 透明度},

    "background.useFront": true,

    "background.useDefault": false,// 是否使用默认图片