VS Code 高效开发实用指南

Visual Studio Code (VS Code) 已经成为现代开发者最受欢迎的代码编辑器之一。其轻量、强大、可扩展的特性使其能够胜任各种开发任务。为了更淋漓尽致地发挥 VS Code 的威力，掌握一些实用技巧、常用快捷键以及选择合适的扩展插件至关重要。本指南将为你汇总 Windows 和 Mac 平台下的常用快捷键、高效的查找方法以及一系列能显著提升开发效率的扩展插件。

常用快捷键：提升操作速度

编辑快捷键

功能描述 Windows 快捷键 macOS 快捷键
命令面板 Ctrl+Shift+P / F1 Cmd+Shift+P / F1
打开文件 Ctrl+O Cmd+O
打开文件夹/工作区 Ctrl+K Ctrl+O Cmd+K Cmd+O
保存文件 Ctrl+S Cmd+S
全部保存 Ctrl+K S Cmd+Option+S
另存为 Ctrl+Shift+S Cmd+Shift+S
新建文件 Ctrl+N Cmd+N
关闭编辑器 Ctrl+W / Ctrl+F4 Cmd+W
关闭所有编辑器 Ctrl+K Ctrl+W Cmd+K Cmd+W
重新打开关闭的编辑器 Ctrl+Shift+T Cmd+Shift+T
撤销 Ctrl+Z Cmd+Z
重做 Ctrl+Y / Ctrl+Shift+Z Cmd+Shift+Z
剪切 Ctrl+X Cmd+X
复制 Ctrl+C Cmd+C
粘贴 Ctrl+V Cmd+V
复制当前行（上/下） Shift+Alt+Up/Down Shift+Option+Up/Down
移动当前行（上/下） Alt+Up/Down Option+Up/Down
删除当前行 Ctrl+Shift+K Cmd+Shift+K
向上/向下插入新行 Ctrl+Enter / Ctrl+Shift+Enter Cmd+Enter / Cmd+Shift+Enter
添加多光标 (上/下) Ctrl+Alt+Up/Down Cmd+Option+Up/Down
添加下一个匹配项到选择 Ctrl+D Cmd+D
选择所有匹配项 Ctrl+Shift+L Cmd+Shift+L
代码格式化 Shift+Alt+F Shift+Option+F
切换行注释 Ctrl+/ Cmd+/
切换块注释 Shift+Alt+A Shift+Option+A
跳转到定义 F12 F12
查看定义 (Peek) Alt+F12 Option+F12
查找所有引用 Shift+F12 Shift+F12
重命名符号 F2 F2
显示错误/警告 Ctrl+Shift+M Cmd+Shift+M
切换终端 Ctrl+` Cmd+`
放大/缩小编辑器字体 Ctrl+= / Ctrl+- Cmd+= / Cmd+-
切换侧边栏 Ctrl+B Cmd+B
拆分编辑器 Ctrl+\ Cmd+\
切换焦点到不同的编辑器组 Ctrl+1/2/3 Cmd+1/2/3

导航快捷键

功能描述 Windows 快捷键 macOS 快捷键
转到文件 (Go to File) Ctrl+P Cmd+P
转到符号 (Go to Symbol) Ctrl+Shift+O Cmd+Shift+O
转到行 Ctrl+G Cmd+G
后退/前进 (光标位置) Alt+Left/Right Ctrl+- / Ctrl+Shift+- (注意: Mac 上 Ctrl 而非 Cmd)
打开/关闭 Markdown 预览 Ctrl+Shift+V Cmd+Shift+V
并排打开 Markdown 预览 Ctrl+K V Cmd+K V

高效查找与替换

VS Code 提供了强大的查找和替换功能，支持正则表达式、大小写敏感、全词匹配等。

  • 在当前文件中查找：

    • Windows: Ctrl+F
    • macOS: Cmd+F
    • 在查找框中输入文本后，可以使用 Enter 查找下一个，Shift+Enter 查找上一个。
    • 点击查找框旁边的图标可以切换大小写敏感 (Aa)、全词匹配 (ab) 和正则表达式 (.*)。

  • 在当前文件中替换：

    • Windows: Ctrl+H
    • macOS: Cmd+Option+F (或通过 Cmd+F 后点击替换展开按钮)
    • 可以逐个替换或全部替换。

  • 在整个工作区中查找 (全局搜索)：

    • Windows: Ctrl+Shift+F
    • macOS: Cmd+Shift+F
    • 这会在侧边栏的搜索视图中显示结果，你可以配置包含/排除的文件和文件夹。

  • 在整个工作区中替换 (全局替换)：

    • Windows: Ctrl+Shift+H
    • macOS: Cmd+Shift+H

查找技巧：

  • 使用命令面板 (Ctrl+Shift+P 或 Cmd+Shift+P)：
    • 输入 > 可以查看并执行所有命令。
    • 直接输入文件名可以快速打开文件 (等同于 Ctrl+P / Cmd+P)。
    • 输入 @ 可以查找文件内的符号 (例如函数名、变量名)。
    • 输入 @: 可以按类别对符号进行分组和查找。
    • 输入 # 可以查找工作区内的符号。
  • 正则表达式： 掌握基础的正则表达式能让你在查找和替换时更加得心应手。
  • 包含/排除文件： 在全局搜索中，可以使用 files to include 和 files to exclude 字段来精确控制搜索范围，支持通配符。

提升效率的 VS Code 扩展插件推荐

VS Code 的扩展插件库非常丰富，以下是一些提升开发效率的推荐插件：

  1. Prettier - Code formatter：自动格式化代码，支持多种编程语言。
  2. ESLint：JavaScript 和 TypeScript 的代码检查工具，帮助保持代码风格一致。
  3. Live Server：启动一个本地开发服务器，支持实时预览 HTML 文件。
  4. GitLens：增强的 Git 集成，提供丰富的 Git 功能和可视化。
  5. Bracket Pair Colorizer：为括号对添加颜色，方便识别代码结构。
  6. REST Client：在 VS Code 中直接发送 HTTP 请求，方便进行 API 测试。
  7. Debugger for Chrome：调试 JavaScript 代码，支持在 Chrome 浏览器中调试。
  8. Path Intellisense：自动补全文件路径，提高文件操作效率。
  9. IntelliSense for CSS class names in HTML：在 HTML 文件中自动补全 CSS 类名。
  10. Visual Studio IntelliCode：基于 AI 的代码补全，提高编码效率。
  11. Project Manager：管理多个项目，快速切换项目。
  12. Code Spell Checker：拼写检查工具，帮助避免拼写错误。
  13. Better Comments：为代码注释添加样式，提高代码可读性。
  14. Todo Tree：显示代码中的 TODO、FIXME 等标记，方便追踪待办事项。
  15. Import Cost：显示导入模块的包大小，帮助优化依赖。

更多提效小技巧

  • 集成终端： 使用 Ctrl+` (Windows) 或 Cmd+` (macOS) 快速打开和关闭集成终端，无需切换窗口即可执行命令行操作。
  • 工作区设置 (Workspace Settings)： 针对特定项目进行配置，例如代码风格、任务、调试配置等。这些设置保存在项目根目录的 .vscode 文件夹中，方便团队共享。
  • 用户代码片段 (User Snippets)： 定义常用的代码块模板，通过前缀快速插入，减少重复编码。
  • 多光标编辑：
    • 按住 Alt (Windows) / Option (macOS) 点击鼠标，可以在不同位置添加光标。
    • 使用 Ctrl+Alt+Up/Down (Windows) / Cmd+Option+Up/Down (macOS) 向上或向下插入光标。
    • 选择一段文本后，使用 Ctrl+Shift+L (Windows) / Cmd+Shift+L (macOS) 可以选中所有匹配项并同时编辑。
  • Zen Mode (禅模式)： Ctrl+K Z (Windows/macOS)，进入无干扰的编码模式，只显示编辑器。按 Esc两次退出。
  • 拆分编辑器： Ctrl+\ (Windows) / Cmd+\ (macOS) 可以将编辑器垂直拆分。也可以通过拖拽编辑器的标签页到边缘来实现水平或垂直拆分。

总结

VS Code 是一款功能强大且高度可定制的编辑器。通过熟练掌握常用快捷键，善用其查找与替换功能，并结合优秀的扩展插件，你的开发效率必将得到显著提升。希望这篇指南能帮助你更好地驾驭 VS Code，享受编码的乐趣！不断探索和尝试，找到最适合自己的工作流程和工具组合吧！