VS Code Settings Editor 完全教程：从入门到精通

什么是 Settings Editor？为什么需要它？

VS Code 的设置允许你自定义编辑器的方方面面，从界面主题、字体大小，到代码格式化、快捷键，再到各种插件的配置选项。

Settings Editor（设置编辑器） VS Code 中用于管理和修改这些设置的核心界面，它提供了两种模式：

1. UI（图形界面）模式：通过下拉菜单、输入框、复选框等控件来修改设置，非常直观，适合新手和常用设置。
2. JSON（代码）模式：直接在一个 settings.json 文件中编写和编辑 JSON 代码，功能强大，适合高级用户、精确控制以及版本管理。

掌握 Settings Editor 是提升 VS Code 使用效率和个性化体验的第一步。

如何打开 Settings Editor？

有三种常用方法可以打开设置编辑器：

1. 快捷键 (最常用)

   
   （图片来源网络，侵删）
   • Windows / Linux: Ctrl + , (逗号)
   • macOS: Cmd + , (逗号)

2. 命令面板

   • 按 Ctrl + Shift + P (Windows/Linux) 或 Cmd + Shift + P (macOS) 打开命令面板。
   • 输入 Preferences: Open Settings (UI) 或 Preferences: Open Settings (JSON)，然后选择对应的命令。

3. 文件菜单

   • 点击左上角的 "文件" (File) 菜单。
   • 选择 "首选项" (Preferences) -> "设置" (Settings)。

打开后,你会看到设置编辑器的默认界面，通常是 UI 模式。

深入解析 Settings Editor 的两大模式

UI 模式 (图形界面)

这是设置编辑器的默认视图,它非常友好。

界面布局：

• 左侧：功能分类

  • 常用: 包含最核心、最常用的设置，如编辑器主题、字体、文件关联等。
  • 功能: 按功能分组，如“扩展”、“终端”、“调试”等。
  • 更多设置: 显示所有设置的完整列表。
  • 扩展配置: 显示已安装扩展的特定设置，非常方便。

• 中间：设置项列表

  • 搜索框：用于快速查找任何设置项。
  • 每个设置项都有一个名称、描述和控件（输入框、开关、下拉菜单等）。

• 右侧：JSON 预览

  • 当你在左侧修改任何设置时,右侧的 settings.json 文件会实时更新，让你能看到对应的 JSON 代码。
  • 你也可以直接在右侧修改 JSON，然后左侧的 UI 控件会同步更新。

UI 模式操作技巧：

1. 搜索设置：在顶部的搜索框中输入关键词，VS Code 会智能过滤出相关的设置，输入 font 就能找到所有与字体相关的设置。
2. 修改设置：直接点击开关、输入数值或从下拉菜单中选择即可。
3. 重置设置：将鼠标悬停在一个设置项上，会出现一个“重置”图标（一个圆圈加箭头），点击即可恢复默认值。
4. 查看更多信息：点击设置项名称旁边的 齿轮 图标，可以：
   • 在设置中搜索: 深入查找相关设置。
   • 复制设置 ID: 复制该设置的 JSON 键名，方便在 settings.json 中直接使用。
   • 打开默认设置: 打开一个只读的 settings.json.default 文件，查看所有设置及其默认值。

JSON 模式 (代码模式)

对于高级用户来说,JSON 模式是最高效、最强大的方式。

如何进入 JSON 模式？

• 在设置编辑器的右上角,点击 图标。
• 或者通过命令面板输入 Preferences: Open Settings (JSON)。

JSON 模式的好处：

1. 精确控制：可以输入 UI 模式没有提供的值，精确的颜色代码 (#RRGGBB)。
2. 批量编辑：可以一次性复制、粘贴、修改多个设置项。
3. 版本控制：settings.json 是一个普通的文本文件，你可以轻松地使用 Git 等工具进行版本管理，在不同电脑间同步你的配置。
4. 注释：可以在 JSON 文件中添加注释（使用 ），来解释某个设置的用途，方便日后回顾。

JSON 模式操作技巧：

1. 工作区设置 vs. 用户设置

   • 用户设置 (settings.json): 存放在你的用户配置目录中，这些设置会在你打开的所有 VS Code 窗口中生效。
   • 工作区设置 (.vscode/settings.json): 存放在当前项目的 .vscode 文件夹中，这些设置只对当前项目有效，可以覆盖用户设置。

   最佳实践：将个人偏好（如主题、字体）放在用户设置中；将项目特定的配置（如代码格式化规则、linting 规则）放在工作区设置中，以便团队共享。

2. JSON 语法：

   • 文件必须是一个有效的 JSON 对象 。
   • 键和值都用双引号 括起来。
   • 使用逗号 分隔键值对。
   • VS Code 会提供实时的语法高亮和错误提示。

示例：在 JSON 模式中添加设置

假设你想同时修改字体大小和行高：

{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "workbench.colorTheme": "Monokai",
  // 这是一个注释，说明下面的设置用于终端
  "terminal.integrated.fontSize": 12 
}

实战演练：5个常用设置的修改

更改主题

• UI 模式: 在左侧选择“常用” -> “颜色主题”，然后从下拉菜单中选择你喜欢的主题，如 "Dark+" (默认暗色) 或 "Light" (亮色)。
• JSON 模式: 在 settings.json 中添加或修改：

  "workbench.colorTheme": "Monokai" 

修改字体和大小

• UI 模式: 在“常用” -> “字体”中，找到“编辑器字体”和“编辑器字号”进行修改。
• JSON 模式:

  "editor.fontFamily": "'Fira Code', 'Courier New', monospace",
  "editor.fontSize": 16,
  "editor.fontLigatures": true // 启用连字

配置自动保存

• UI 模式: 在“常用” -> “Files: Auto Save” 中，可以选择 off (关闭), afterDelay (延迟保存) 或 onFocusChange (失去焦点时保存)。
• JSON 模式:

  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000 // 延迟1秒保存

安装并配置 Prettier 代码格式化插件

1. 在扩展商店搜索并安装 Prettier - Code formatter。
2. UI 模式: 在左侧选择“扩展” -> @installed -> Prettier - Code formatter，在这里可以配置 Prettier 的规则，如缩进使用空格还是制表符。
3. JSON 模式:

   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "prettier.useTabs": false

配置文件关联

• UI 模式: 在“常用” -> “Files: Associations” 中，点击 号，在第一个输入框中输入文件名（如 .env），在第二个输入框中输入语言模式（如 properties）。
• JSON 模式:

  "files.associations": {
    "*.env": "properties",
    "*.myconfig": "json"
  }

最佳实践与技巧

1. 善用搜索：不要试图在分类里翻找，直接搜索最快。
2. 从 UI 到 JSON：不确定某个设置在 JSON 中的键名是什么？先用 UI 模式改一下，然后看右侧的 JSON 预览。
3. 使用 和 进行高级搜索：
   • 在搜索框中输入 可以筛选特定类型的设置，@theme 只显示主题相关设置。
   • 输入 可以显示已被覆盖的设置。
4. 导出/导入设置：如果你想在多台电脑上同步设置，可以通过 Ctrl + Shift + P 运行 Preferences: Export User Settings 命令，将你的 settings.json 导出，然后在另一台电脑上导入。
5. 不要害怕探索：Settings Editor 是 VS Code 最强大的工具之一，花点时间逛逛，你会发现很多能极大提升你工作效率的隐藏功能。

核心建议：从 UI 模式开始，当你需要更灵活的控制时，切换到 JSON 模式。 两者相辅相成，共同构成了 VS Code 无与伦比的定制能力。

希望这份教程能帮助你成为 VS Code 设置管理大师！