VS Code 作为我日常编码和学习的主力工具，几乎每天都要和它打交道。一个顺手、高效且赏心悦目的开发环境，对生产力的提升不言而喻。最近花了一些时间，对我的 VS Code 配置进行了一番折腾和优化，主要集中在编码效率和视觉美化两个方面。

为了防止以后重装系统或者更换设备后忘记这些配置细节，特此记录下来，作为一份个人备忘。

1. 编码效率优化配置

这部分主要是对 Code Runner 插件和编辑器本身的一些行为进行调整，让编码和调试流程更加顺畅。这些配置都可以通过 VS Code 的设置界面 (快捷键 Ctrl + ,) 搜索到，然后勾选或修改。

  • Code Runner: Ignore Selection: true
    • 说明：禁用“运行部分选中代码”的功能。我个人好几次因为不小心选中了某几行代码就执行，导致运行出错。关闭后，Code Runner 将始终运行整个文件，符合我的使用习惯。
  • Code Runner: Run In Terminal: true
    • 说明：将代码放到 VS Code 内置的终端（Terminal）中运行，而不是在“输出”（Output）面板。这样做的好处是，对于需要交互式输入（如 input()）的程序，可以在终端里直接操作。
  • Code Runner: Save File Before Run: true
    • 说明：一个必备的保险设置，确保每次运行时执行的都是最新保存的代码，避免因忘记保存而导致调试乌龙。
  • Editor: Format On Type: true
    • 说明：在我输入代码的过程中自动进行格式化，比如调整缩进、对齐等。对于追求代码整洁的我来说，这个功能极大地提升了幸福感。
  • Editor: Accept Suggestion On Commit Character: false
    • 说明：这是一个非常关键的设置。关闭它，可以避免在输入分号、括号等触发字符时，编辑器非预期地接受了代码建议，尤其是在我只想换行的时候，它不会强行帮我补全。

2. 编辑器背景美化：注入灵魂

看久了单调的深色或浅色背景，总想来点不一样的。Background 这款插件就能满足我的需求，它允许为 VS Code 的编辑器区域设置自定义背景图片。

首先，确保你已经在扩展商店中安装了 Background 插件。

配置的核心步骤是在 settings.json 文件中完成的。可以通过 File > Preferences > Settings，然后在右上角点击“打开设置 (JSON)”图标来访问它。

找到 "background.editor" 相关的配置项，如果不存在，可以手动添加。关键在于修改 images 数组。

{
    // ... 其他配置项
    "background.editor": {
        "useFront": true,
        "style": {
            "background-position": "100% 100%",
            "background-size": "auto",
            "opacity": 0.6
        },
        "images": [
            "https://user-images.githubusercontent.com/9987486/40583669-d6189844-61c5-11e8-89e3-c52ad153da09.png",
            "https://user-images.githubusercontent.com/9987486/40583670-d6478c9e-61c5-11e8-9551-6b55eacc7b8d.png",
            "https://user-images.githubusercontent.com/9987486/40583671-d676c6e4-61c5-11e8-94cb-34ec4a12fa01.png"
        ],
        "interval": 0,
        "random": false
    },
    // ... 其他配置项
}

在 images: [] 数组中填入图片的 URL 即可，多个 URL 之间用逗号 , 隔开。

2.1 如何获取图片 URL

  • 网络图片：直接复制图片的链接地址。
  • 本地图片：可以将本地图片上传到图床，然后使用生成的外链。

提示：如果坚持使用本地图片文件，有一个非常实用的小技巧：直接将本地图片文件拖拽到浏览器（如 Chrome、Edge）的地址栏中打开，浏览器地址栏显示的 file:///... 路径就是可以直接使用的 URL。

3. 个人 settings.json 完整参考

下面是我当前使用的 settings.json 完整文件，包含了一些未在上面详述的配置，例如针对不同语言的 executorMap 等。仅供参考，可以直接取用你需要的部分。

注意：这份配置是我个人环境的快照，包含了大量针对特定语言和插件的设置。直接完整复制可能会覆盖你的个人设置或引入不需要的配置。建议按需摘取。

{
    "editor.experimental.treeSitterTelemetry": true,
    "editor.minimap.enabled": false,
    "editor.unicodeHighlight.nonBasicASCII": false,
    "editor.formatOnType": true,
    "editor.acceptSuggestionOnCommitCharacter": false,
    "code-runner.runInTerminal": true,
    "code-runner.saveFileBeforeRun": true,
    "code-runner.ignoreSelection": true,
    "background.enabled": true,
    "background.editor": {
        "useFront": true,
        "style": {
            "background-position": "100% 100%",
            "background-size": "auto",
            "opacity": 0.6
        },
        "images":[
            "https://user-images.githubusercontent.com/9987486/40583669-d6189844-61c5-11e8-89e3-c52ad153da09.png",
            "https://user-images.githubusercontent.com/9987486/40583670-d6478c9e-61c5-11e8-9551-6b55eacc7b8d.png",
            "https://user-images.githubusercontent.com/9987486/40583671-d676c6e4-61c5-11e8-94cb-34ec4a12fa01.png"
        ],    
        "interval": 0,
        "random": false
    },
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "GitHub Dark Colorblind (Beta)",
    "git.autofetch": true,
    "diffEditor.hideUnchangedRegions.enabled": true,
    "code-runner.executorMap": {
        "python": "python -u",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "go": "go run",
        "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
        // ... 其他语言执行映射
    },
    "code-runner.languageIdToFileExtensionMap": {
        "bat": ".bat",
        "powershell": ".ps1",
        "typescript": ".ts"
    }
}

4. 避坑指南与总结

在这次折腾过程中，也踩了一些小坑，总结如下：

  1. 插件依赖是前提：background.editor 相关的配置项必须在安装了 Background 插件后才会生效。如果直接复制 JSON 配置，务必先检查相关插件是否已安装。
  2. JSON 语法要严谨：在手动编辑 settings.json 时，务必注意 JSON 格式的正确性，特别是对象和数组成员之间的逗号，多一个或少一个都会导致解析失败，从而使整个用户配置失效。
  3. 本地图片路径问题：直接复制 Windows 的文件路径（如 D:\Images\bg.png）是无效的。必须将其转换为 URL 格式（file:///D:/Images/bg.png）。使用浏览器打开本地文件来获取 URL 是最稳妥的方法。
  4. 配置的优先级：VS Code 的配置存在优先级（用户设置 < 工作区设置）。如果发现某项配置不生效，可以检查一下当前工作区（.vscode/settings.json）是否覆盖了用户级别的全局设置。

好了，这次的折腾记录就到这里。希望这份备忘录在未来能帮到我自己。