网站导航
> 技术文档 > 3 VS Code 深度配置与优化：settings.json 参数调优、快捷键大全、实用插件推荐与离线安装教程_vscode settings.json

3 VS Code 深度配置与优化：settings.json 参数调优、快捷键大全、实用插件推荐与离线安装教程_vscode settings.json

网友: 技术文档 2025-08-15 15:56:32

1 settings.json 参数调优

1.1 文件说明

        settings.json 是 VS Code 的核心配置文件，用于保存用户的个性化设置和偏好。通过该文件，可以自定义和覆盖编辑器的默认行为，主要涵盖以下方面：

  • 编辑器外观：主题、字体、颜色方案等视觉效果。
  • 代码格式化：缩进大小、换行规则、默认格式化工具等。
  • 语言支持：语法高亮、智能补全、Lint 工具配置等语言相关功能。
  • 快捷键设置：自定义键盘快捷方式。
  • 调试配置：调试器相关参数的定义与优化。
  • 工作区设置：为特定项目定义专属配置。

        settings.json 文件采用标准 JSON 格式，所有配置项均以键值对形式定义：

  • 键（Key）：配置项的名称，类型为字符串。
  • 值（Value）：配置项对应的值，可以是字符串、数字、布尔值、数组，甚至是嵌套的 JSON 对象。

        在 VS Code 中，我们既可以修改全局 settings.json（影响所有项目），也可以在工作区定义局部配置（仅作用于当前项目），从而实现灵活的个性化开发环境定制。

1.2 配置方式

        在 VS Code 中，settings.json 文件有两种主要的配置方式，用于自定义编辑器的行为和外观：

  1. 通过图形化界面（UI）设置。
  2. 直接编辑 settings.json 文件。

通过界面编辑

        这种方式适合初学者或不熟悉 JSON 配置语法的用户：

  1. 打开 VS Code；
  2. 使用快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（macOS）进入设置界面；
  3. 在搜索框中输入需要调整的设置名称，找到对应选项后，直接在 UI 界面修改其值；
  4. 修改完成后，VS Code 会自动更新并保存到 settings.json，更改即时生效。

直接编辑文件

        这种方式更灵活，适合需要批量配置或进行精细化调整的用户。具体操作如下：

1. 文件位置

  • 全局配置文件路径：
    • Windows: C:\\Users\\\\AppData\\Roaming\\Code\\User\\settings.json
    • macOS: /Users//Library/Application Support/Code/User/settings.json
    • Linux: /home//.config/Code/User/settings.json

  • 快速打开方式：
    • 使用快捷键 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）打开命令面板。
    • 输入 Open Settings (JSON) 并选择：
      • Open User Settings (JSON)：编辑全局配置，影响所有项目。
      • Open Workspace Settings (JSON)：编辑当前工作区配置，仅影响当前项目。
      • Open Default Settings (JSON)：查看 VS Code 默认配置项（只读）。

2. 编辑与保存

  • 在 settings.json 中，可以直接添加或修改配置项。
  • 修改完成后，保存文件即可立即生效，VS Code 会自动应用新配置。
  • 本文后续将提供推荐的常用配置示例，你可以直接复制到自己的 settings.json 文件中使用，并按照后续说明进行调整。

3. 设置作用范围

  • 全局设置：保存在用户目录下的 settings.json，对所有项目生效。
  • 工作区设置：保存在当前项目的 .vscode/settings.json，会覆盖全局配置，实现项目级别的个性化定制。
    • 如果项目目录中存在 .vscode/settings.json，该配置优先于全局设置生效。

        通过灵活使用全局与工作区的 settings.json，你可以根据个人习惯和项目需求，高度定制 VS Code 的工作方式，大幅提升开发效率。

1.3 推荐基础配置

        以下是博主精选的 settings.json 基础配置示例，旨在提升编辑器的流畅性、代码可读性以及整体开发效率。

{ \"editor.fontSize\": 16, \"editor.unicodeHighlight.allowedLocales\": { \"zh-hant\": true }, \"files.autoSave\": \"afterDelay\", \"files.autoGuessEncoding\": true, \"workbench.list.smoothScrolling\": true, \"editor.cursorSmoothCaretAnimation\": \"on\", \"editor.smoothScrolling\": true, \"editor.cursorBlinking\": \"smooth\", \"editor.mouseWheelZoom\": true, \"editor.formatOnPaste\": true, \"editor.formatOnType\": true, \"editor.formatOnSave\": true, \"editor.wordWrap\": \"on\", \"editor.guides.bracketPairs\": true, \"editor.suggest.snippetsPreventQuickSuggestions\": false, \"editor.acceptSuggestionOnEnter\": \"smart\", \"editor.suggestSelection\": \"recentlyUsed\", \"window.dialogStyle\": \"custom\", \"debug.showBreakpointsInOverviewRuler\": true}

        你可以直接将其复制到自己的 settings.json 文件中使用，如下所示： 

配置项解释：

  1. editor.fontSize: 16：设置编辑器字体大小为 16，保证代码清晰可读。
  2. editor.unicodeHighlight.allowedLocales: { \"zh-hant\": true }：启用繁体中文（zh-hant）的 Unicode 高亮，确保中文字符在编辑器中正常显示。
  3. files.autoSave: \"afterDelay\"：文件在短暂延迟后自动保存，减少频繁手动保存的操作。
  4. files.autoGuessEncoding: true：自动检测文件编码，避免出现乱码问题。
  5. workbench.list.smoothScrolling: true：启用文件资源管理器等列表的平滑滚动，提升浏览体验。
  6. editor.cursorSmoothCaretAnimation: \"on\"：光标移动动画更加平滑，操作体验更自然。
  7. editor.smoothScrolling: true：编辑器内容滚动时更加顺畅，减少卡顿感。
  8. editor.cursorBlinking: \"smooth\"：光标平滑闪烁，减少视觉疲劳。
  9. editor.mouseWheelZoom: true：允许使用鼠标滚轮配合快捷键放大/缩小字体。
  10. editor.formatOnPaste: true：粘贴代码时自动格式化，使其符合当前代码风格。
  11. editor.formatOnType: true：在输入特定字符（如分号）时自动格式化当前代码块。
  12. editor.formatOnSave: true：保存文件时自动格式化代码，确保一致的代码风格。
  13. editor.wordWrap: \"on\"：自动换行，避免长代码行超出可视区域。
  14. editor.guides.bracketPairs: true：显示括号配对引导线，帮助理解代码结构层级。
  15. editor.suggest.snippetsPreventQuickSuggestions: false：允许代码片段与自动建议同时显示，提升输入效率。
  16. editor.acceptSuggestionOnEnter: \"smart\"：仅在合理位置按回车才接受建议，避免误输入。
  17. editor.suggestSelection: \"recentlyUsed\"：优先显示最近使用的建议，提高重复输入的效率。
  18. window.dialogStyle: \"custom\"：使用自定义对话框样式，使界面更加现代化。
  19. debug.showBreakpointsInOverviewRuler: true：在概览标尺中显示断点位置，便于调试时快速定位。

2 VS Code 快捷键大全

常用快捷键：

功能 Windows / Linux macOS 打开命令面板 Ctrl + Shift + P Cmd + Shift + P 打开设置 Ctrl + ， Cmd + , 打开文件 Ctrl + P Cmd + P 新建文件 Ctrl + N Cmd + N 打开最近的文件 Ctrl + R Cmd + R 保存文件 Ctrl + S Cmd + S 另存为 Ctrl + Shift + S Cmd + Shift + S 关闭当前文件 Ctrl + W Cmd + W 关闭所有文件 Ctrl + K Ctrl + W Cmd + K Cmd + W 撤销 Ctrl + Z Cmd + Z 重做 Ctrl + Y 或 Ctrl + Shift + Z Cmd + Y 或 Cmd + Shift + Z 剪切 Ctrl + X Cmd + X 复制 Ctrl + C Cmd + C 粘贴 Ctrl + V Cmd + V 查找 Ctrl + F Cmd + F 替换 Ctrl + H Cmd + H 格式化代码 Shift + Alt + F Shift + Option + F 切换全屏 F11 F11 或 Ctrl + Cmd + F

全局快捷键：

基本编辑快捷键：

导航快捷键：

查找和替换快捷键：

多光标和选择快捷键：

多语言编辑快捷键：

编辑器管理快捷键：

文件管理快捷键：

显示快捷键：

调试快捷键：

集成终端快捷键：

3 VS Code 实用插件推荐

3.1 外观主题

GitHub Theme

        GitHub Theme 是一款广受欢迎的 VS Code 插件，完美复刻了 GitHub 网站的代码高亮和界面风格。安装后，开发者能够在编辑器中享受到与 GitHub 相同的视觉体验，这有助于提升代码阅读和审查的效率。

        启用该主题插件后，只需点击 “设置颜色主题”，从主题列表中选择你喜欢的 GitHub 主题，即可立即应用，如下图所示：

3.2 图标主题

Material Icon Theme

        Material Icon Theme 是一款深受欢迎的 VS Code 插件，采用 Google 的 Material Design 风格，为文件和文件夹提供丰富且美观的图标。这款插件显著提升了编辑器的视觉效果，使界面更加现代且易于辨识。通过直观的图标展示不同文件类型和项目结构，帮助开发者更快地定位和管理代码文件，从而提升工作效率。

        启用该插件后，只需点击 “设置文件图标主题”，从列表中选择 “Material Icon Theme”，即可立即应用，如下图所示：

        部分文件图标样式如下：

3.3 基础功能

Error Lens

        Error Lens 是一款非常实用的 VS Code 插件，能够在代码行内实时高亮显示错误、警告和规范问题。通过内联提示，开发者无需频繁切换到控制台或问题面板，就能直观地发现并快速定位代码中的潜在问题，大幅提升编码效率和体验。

        规范错误的显示效果如下：

Prettier - Code formatter

        Prettier 是一款广受欢迎的 VS Code 代码自动格式化插件。它通过解析代码并应用统一的格式规则，确保代码风格一致，自动处理换行和最大行宽。安装后，开发者可以使用快捷键（如 Shift + Alt + F）格式化整个文档或选中代码，也可配置为保存时自动格式化。Prettier 支持多种编程语言，是注重代码整洁的开发者必备工具。

GBK to UTF8 for vscode

        GBK to UTF8 for VS Code 是一款实用的编码转换插件，专门用于在 GBK 和 UTF-8 编码之间进行快速转换。它有效解决因编码不匹配导致的中文乱码问题，尤其适合处理旧项目或遗留代码。

        当你打开包含 GBK 编码的文件时，插件会自动弹出提示，询问是否转换为 UTF-8。你也可以通过命令面板执行 Convert encoding to UTF8 命令，手动完成转换。此外，插件支持批量转换功能。你可以在文件浏览器中选中多个文件或整个文件夹，右键点击并选择 Convert encoding to UTF8，一次性转换多个文件编码。

Hex Editor

        Hex Editor 是 VS Code 中一款功能强大的插件，允许开发者以十六进制格式查看和编辑文件内容。它提供直观的界面展示文件的二进制数据，并支持撤销/重做、复制/粘贴、查找和替换等实用操作。

        操作步骤如下：

        1. 在编辑器的文件标签页上右键，选择 “重新打开编辑器的方式”。

        2. 在弹出的选项中选择 “十六进制编辑器”。

        3. 文件即会以十六进制格式打开，你可以查看和编辑其二进制数据。

3.4 扩展功能

CodeSnap

        CodeSnap 是一款广受欢迎的 VS Code 插件，专注于快速截取代码屏幕截图。它提供直观的操作界面和丰富的自定义选项，支持调整截图样式和导出格式。借助 CodeSnap，开发者能够轻松将代码片段转成高质量图片，方便在文档、教程或演示中分享，有效提升代码展示的专业度和便捷性。

        操作步骤如下：

        1. 在编辑器中选中目标代码片段，右键点击并选择 CodeSnap，打开截图界面。

        2. 在右侧的 CodeSnap 窗口中，会实时显示所选代码的截图预览。你可以右键点击该截图，执行剪切、复制等操作。

Doxygen Documentation Generator

        Doxygen Documentation Generator 是 VS Code 中一款实用插件，专注于自动生成和管理源代码文档。基于 Doxygen 工具，它能够将代码中的注释、函数说明和类结构等信息转换为清晰易读的文档格式，如 HTML 和 LaTeX。

        对于采用 Doxygen 标准的项目，该插件是提升文档编写效率和质量的重要辅助工具。同时，它有助于团队协作和代码共享。对于希望在 VS Code 中便捷生成和维护代码文档的开发者，Doxygen Documentation Generator 是值得推荐的选择。

Better Comments

        Better Comments 是一款提升 VS Code 注释可读性的实用插件。它通过为不同类型的注释（如 TODO、警告、问题、重要说明等）添加颜色和样式，使代码注释更加醒目和易于区分，帮助开发者更快地理解和管理代码中的关键点。

        插件通过注释中的特定符号（如 TODO、?、!、*）触发高亮显示，无需使用额外快捷键。默认情况下，插件仅支持多行注释中的文字高亮，效果如下所示：

        如果需在单行注释中启用相同的文字高亮显示，请在设置中勾选下图所示的选项：

Path Intellisense

        Path Intellisense 是一款高效的 VS Code 插件，专注于提升文件路径输入的速度与准确性。它通过智能自动补全，在你输入文件或目录路径时，实时提供精准的路径建议，极大减少手动输入量，避免因路径错误引发的编译或运行问题。

        该插件支持多种路径格式，包括：

  1. 相对路径（如 ./ 开头）
  2. 工作区绝对路径（如 / 开头）
  3. 文件系统绝对路径（如 C: 开头）
  4. 用户目录路径（如 ~ 开头）

        此外，Path Intellisense 还支持部分路径自动补全，允许通过配置排除特定目录或文件，提供自定义路径映射和转换，灵活适应不同项目结构和开发需求。

Image preview

        Image Preview 是一款非常实用的 VS Code 插件，允许开发者无需切换到外部工具，即可直接在编辑器中预览图片。这对前端开发、网页设计以及频繁处理图片资源的开发者尤为方便。只需将鼠标悬停在代码中的图片路径上，即可即时显示预览，大幅提升工作效率。该插件支持多种图片格式，包括 PNG、JPG、GIF、SVG 等，满足多样化的开发需求。

Hungry Delete

        Hungry Delete 是一款提升 VS Code 删除操作体验的实用插件。它能智能识别光标附近的多余字符或代码块，如多余空格、制表符，甚至括号对中的部分内容，并一次性高效删除，帮助开发者保持代码整洁。

        快捷键：

  • Windows 和 Linux：Ctrl + Backspace
  • macOS：Alt + Backspace

3.5 智能编程助手

Lingma

        Lingma 是阿里云推出的一个智能编码助手，名为通义灵码。它旨在帮助开发者更高效地编写代码、解决问题以及提升编码技能。通过利用 AI 技术，Lingma 能够在代码编辑过程中提供智能补全建议、实时错误检测和修复建议等，从而提高开发效率。

        Lingma 的特点包括但不限于：

  1. 智能补全：基于上下文提供代码补全建议。
  2. 文件编辑：支持多种编程语言的文件编辑，增强代码编辑体验。
  3. 编码使用实践：为用户提供最佳实践指导，帮助用户写出更加规范和高效的代码。
  4. 行间会话：允许用户在编码过程中与AI进行交互，获取即时的帮助和建议。

        官方使用说明文档：https://help.aliyun.com/zh/lingma/getting-started/

4 VS Code 插件离线安装教程

        如果由于网络原因导致在线下载 VS Code 插件扩展变得非常缓慢，而你已经在本地拥有对应的插件扩展包（网盘链接：https://pan.baidu.com/s/12pImL7DSy09h_Wrret568Q?pwd=n857），你可以通过导入这些 VSIX 文件直接安装插件。以下是具体的操作流程：

        1. 在扩展视图的顶部，点击 “更多操作” 按钮（...），选择 “从 VSIX 安装...”。

        2. 浏览文件系统，找到并选择你已经下载到本地的 VSIX 插件文件。

网络标签：

相关问题