在日常用 Visual Studio Code（VS Code）写代码时，想让编辑器看起来更顺眼？加一张自己喜欢的背景图，工作氛围立刻就不一样了。

这个操作其实并不复杂，但网上很多教程写得像机器人指令集。今天咱们用更接地气的方式捋一遍。

第一步：安装扩展

打开 VS Code 左侧菜单栏的插件图标（四个方块那个）。在搜索框里输入 background image plus，回车。找到后点击安装，装完记得重启一下编辑器。这一步很简单，但新手容易忘记重启，导致设置没生效。

第二步：配置设置

进入 VS Code 的设置文件。路径：菜单栏“文件” → “首选项” → “设置”。在设置页顶部的搜索框输入 background，会出现几个相关选项。注意，点击 “Edit in settings.json”，直接打开 JSON 配置文件。

别被 JSON 吓到——你只需要把下面这段代码贴进去，再改一个地方就行：

"background.customimages": ["图片路径"],
"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "fixed",
    "left": 0,
    "top": 0,
    "width": "100%",
    "height": "100%",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "background-attachment": "fixed"
}

第三步：替换图片路径

关键一步：把上面代码里的 "图片路径" 替换成你电脑里真正的图片路径。比如，你要用桌面上一张叫 code.jpg 的图片，路径大概长这样：c:/users/你的用户名/desktop/code.jpg。

注意：路径里的反斜杠要换成斜杠（Windows 下用正斜杠或双反斜杠都行，但推荐正斜杠，省得转义麻烦）。

改好后保存文件，切回 VS Code 界面——你会有种眼前一亮的感觉：背景图真的出现了！第一次看到自己选的图片铺满编辑器背景，心情还是挺不一样的。

第四步：调整参数（可选）

如果你觉得默认显示方式不够满意，可以手动调整参数。比如把 background-size 从 cover 改成 contain，或者调整 left、top 的值来改变图片位置。这些在 background.style 里面直接改就行，试几次就能找到最顺眼的组合。

总结

给编辑器加个背景图，本质上是“锦上添花”的操作。它不会帮你减少 bug，也不会提升编译速度。但每天对着自己喜欢的画面敲代码，确实能减少一点枯燥感。至少它提醒你：写代码这件事，也可以有点乐趣。

《夸克》非常好用的免费AI浏览器

下载APP查看