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 \resources\app\out\vs\workbench\workbench.desktop.main.css
然后打开这个 workbench.desktop.main.css 文件进行 背景的添加设置, 注意这个文件打开后需要格式化代码一下!
body {background-image: url('file:/// 图片地址');
background-size: 20%;
background-position: 100% 100%;
opacity: 0.75;
background-repeat: no-repeat;
}
设置完成后重启 vscode, 如下图:
注意: 局部显示的图片格式最好选择 png 格式的
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,// 是否使用默认图片
评论 (0)