VS Code 在 Mac 环境下的详细使用教程 – wiki基地


在 macOS 环境下玩转 VS Code:从零基础到高效开发的全方位指南

Visual Studio Code(简称 VS Code)已迅速崛起,成为全球开发者中最受欢迎的代码编辑器之一。它轻量级、功能强大、可高度定制,并拥有庞大的扩展生态系统,使其适用于几乎所有编程语言和开发任务。对于 Mac 用户而言,VS Code 与 macOS 系统优秀的终端和开发环境相结合,更是如虎添翼。

本文将为你提供一份详尽的 VS Code 在 Mac 环境下的使用教程,从安装步骤开始,逐步深入到界面布局、核心功能、常用快捷键、强大的扩展系统、集成终端、调试技巧以及 Git 版本控制等方面,助你在 macOS 上充分发挥 VS Code 的潜力,提升开发效率。

第一章:初识 VS Code – 它为什么如此受欢迎?

在深入学习如何使用之前,我们先简单了解一下 VS Code 的魅力所在:

  1. 跨平台性: 虽然本文专注于 macOS,但 VS Code 也完美支持 Windows 和 Linux,这意味着你可以在不同操作系统间无缝切换工作。
  2. 轻量与强大并存: 相比于一些大型 IDE,VS Code 启动快、占用资源少,但通过其扩展系统,可以获得媲美甚至超越许多 IDE 的功能。
  3. 免费与开源: VS Code 是微软开发的免费开源软件,任何人都可以免费获取和使用。
  4. 丰富的语言支持: 默认支持多种主流语言的语法高亮、智能代码补全(IntelliSense)等,通过安装扩展,几乎可以支持地球上所有已知的编程语言。
  5. 高度可定制: 从主题、字体到编辑器行为、快捷键,几乎每一个细节都可以根据个人喜好进行调整。
  6. 强大的扩展生态: 这是 VS Code 最核心的优势之一。数以万计的扩展可以为你的开发工作流增加代码检查(Linting)、格式化(Formatting)、调试工具、数据库管理、云服务集成等各种功能。
  7. 内置 Git 集成: VS Code 对 Git 的支持非常友好,可以在编辑器内完成大部分 Git 操作,无需频繁切换到终端。
  8. 集成终端: 可以在编辑器内部直接使用终端,无需额外打开终端应用。

对于 Mac 用户来说,VS Code 完美融入 macOS 的文件系统和快捷键习惯,性能表现出色,是进行 Web 开发、移动开发、脚本编写、系统编程等各种任务的理想选择。

第二章:安装与启动 – 获取你的开发利器

在 Mac 上安装 VS Code 非常简单:

  1. 下载安装包:

    • 打开你的浏览器,访问 VS Code 官方网站:https://code.visualstudio.com/
    • 网站会自动检测你的操作系统并提供 Mac 版本的下载链接。点击蓝色的 “Download for macOS” 按钮下载 .zip 压缩包。
  2. 解压与安装:

    • 下载完成后,找到下载的 .zip 文件(通常在 Downloads 文件夹里)。
    • 双击 .zip 文件进行解压。解压后你会得到一个名为 “Visual Studio Code.app” 的应用程序文件。
    • 将 “Visual Studio Code.app” 文件拖动到你的 Applications(应用程序)文件夹中。这是 Mac 上安装应用程序的标准方式。
  3. 首次启动与安全提示:

    • 打开 Applications 文件夹,找到 Visual Studio Code 图标,双击启动。
    • 首次启动时,macOS 可能会提示该应用是从互联网下载的,询问你是否确定打开。点击 “Open”(打开)即可。
  4. 添加到 Dock (可选):

    • 当 VS Code 运行时,其图标会出现在 Dock 栏上。右键点击图标,选择 “Options” > “Keep in Dock”(选项 > 在 Dock 中保留),这样下次就可以更方便地启动 VS Code 了。
  5. 安装 code 命令行工具 (强烈推荐):

    • VS Code 提供了一个非常方便的命令行工具 code,允许你直接从终端打开文件或整个项目文件夹。在 Mac 上安装它非常简单。
    • 打开 VS Code。
    • 按下 Cmd + Shift + P 打开命令面板 (Command Palette)。
    • 输入 shell command,然后选择 “Install ‘code’ command in PATH”(在 PATH 中安装 ‘code’ 命令)。
    • 你可能需要输入你的管理员密码。
    • 安装成功后,关闭并重新打开你的终端应用(如 Terminal 或 iTerm2)。现在你就可以在任意文件夹中输入 code . (注意.代表当前目录)来使用 VS Code 打开该文件夹,或者输入 code filename 来打开指定文件了。这个功能在日常开发中极为方便。

至此,你已经成功在 Mac 上安装并配置好了 VS Code。

第三章:初探界面 – 认识你的工作区

启动 VS Code 后,你将看到其默认界面。了解这些区域的功能是高效使用的第一步。

VS Code 的主界面主要由以下几个区域组成:

  1. 活动栏 (Activity Bar):

    • 位于最左侧的一列图标。它允许你在侧边栏的不同视图之间切换。
    • 默认的图标从上到下依次是:
      • 资源管理器 (Explorer): 管理文件和文件夹的地方。你将大部分时间在这里浏览项目结构。
      • 搜索 (Search): 在文件或整个项目中搜索文本。
      • 源代码管理 (Source Control): 集成 Git 等版本控制系统的地方。
      • 运行和调试 (Run and Debug): 配置和运行代码,进行调试。
      • 扩展 (Extensions): 查找、安装和管理 VS Code 扩展。
    • 底部还有一些小图标,如设置 (Settings) 和账户 (Accounts)。你可以右键点击活动栏来自定义显示哪些图标。
  2. 侧边栏 (Sidebar):

    • 位于活动栏右侧的区域。根据你在活动栏中选择的图标,这里会显示对应的视图(资源管理器、搜索结果、Git 状态等)。
  3. 编辑器区域 (Editor Region):

    • 位于界面的中心和大部分空间。这是你编写代码的地方。
    • 可以同时打开多个文件,并通过选项卡 (Tabs) 进行切换。
    • VS Code 支持分屏编辑 (Editor Groups),你可以将编辑器区域水平或垂直分割,同时查看和编辑多个文件,这对于比对代码或参考文档非常有用。通过拖拽文件选项卡或使用菜单/快捷键可以创建新的编辑器组。
  4. 面板 (Panel):

    • 默认位于窗口底部。可以通过 Cmd + J 快捷键显示/隐藏。
    • 面板区域可以切换显示不同的视图:
      • 终端 (Terminal): 内置的命令行界面。
      • 输出 (Output): 显示任务、构建过程或扩展的输出信息。
      • 调试控制台 (Debug Console): 在调试过程中与程序交互或查看调试输出。
      • 问题 (Problems): 显示代码中的错误、警告和提示(来自 Linter 或编译器)。
  5. 状态栏 (Status Bar):

    • 位于窗口的最底部。显示当前打开文件的各种信息,如当前行号、列号、文件编码、行尾序列、文件类型(语言模式)、Git 分支等。
    • 状态栏左侧通常显示当前项目的 Git 状态。右侧显示语言模式、缩进方式等信息。点击这些信息通常可以进行快速切换或配置。

理解了这些区域的功能,你就可以开始基本的代码编辑工作了。

第四章:基础操作 – 打开、编辑与保存

现在我们来学习一些基本的 VS Code 操作:

  1. 打开文件:

    • 通过菜单: File > Open... (快捷键 Cmd + O),然后浏览并选择你要打开的文件。
    • 通过资源管理器: 在资源管理器侧边栏中,点击文件名即可打开。
    • 通过快速打开: 按下 Cmd + P,会弹出一个快速打开文件框。开始输入文件名,VS Code 会模糊匹配你项目中的文件,选择后按 Enter 即可打开。这是最高效的打开文件方式之一。
    • 通过 code 命令: 如果你安装了 code 命令,可以在终端中进入文件所在目录,然后输入 code filename
  2. 打开文件夹 (项目):

    • 通过菜单: File > Open Folder... (快捷键 Cmd + Shift + O),然后选择包含你项目文件的文件夹。
    • 通过 code 命令: 在终端中进入项目文件夹,输入 code .
    • 推荐方式: 强烈建议以打开文件夹的方式使用 VS Code。当你打开一个文件夹时,VS Code 会将其视为一个项目,并启用更多的项目级功能,如项目范围的搜索、Git 集成、配置工作区设置、更好的智能代码补全等。
  3. 创建文件或文件夹:

    • 在资源管理器侧边栏中,右键点击你想要创建文件或文件夹的位置(可以在空白区域,或者现有文件夹上)。
    • 选择 “New File” 或 “New Folder”。
    • 输入新文件或新文件夹的名称,按 Enter 确认。
  4. 保存文件:

    • 当你修改文件后,文件名旁边的选项卡上会出现一个小白点,表示文件有未保存的修改。
    • 保存当前文件:File > Save (快捷键 Cmd + S)。
    • 保存所有打开的文件:File > Save All (快捷键 Cmd + Option + S)。
    • 自动保存 (推荐): 你可以设置 VS Code 自动保存文件。进入设置 (Cmd + ,),搜索 “Auto Save”,选择一个选项,如 onFocusChange (当编辑器失去焦点时自动保存) 或 onWindowChange (当 VS Code 窗口失去焦点时自动保存),甚至 afterDelay (延迟一段时间后自动保存)。开启自动保存可以让你更专注于编写代码,无需频繁手动保存。
  5. 基本编辑操作:

    • 光标移动:方向键、Home/End (Fn + 左/右方向键)、Page Up/Page Down (Fn + 上/下方向键)。
    • 选中文字:Shift + 方向键,或者拖动鼠标。
    • 复制、剪切、粘贴:Cmd + C, Cmd + X, Cmd + V (标准 Mac 快捷键)。
    • 撤销、重做:Cmd + Z, Cmd + Shift + Z (标准 Mac 快捷键)。
    • 行复制:Shift + Option + Up/Down 可以复制当前行到上一行或下一行。
    • 行删除:Cmd + Shift + K 删除当前行。

第五章:高效编辑技巧 – 提升你的编码速度

VS Code 提供了大量内置的编辑技巧,掌握它们可以显著提升你的编码效率。

  1. 智能代码补全 (IntelliSense):

    • 当你输入代码时,VS Code 会根据当前的语言、上下文以及已安装的扩展,自动弹出可能的代码片段、函数、变量等建议。
    • 使用方向键选择建议,按 Tab 或 Enter 键接受。
    • Ctrl + Space 可以手动触发建议列表。
    • 对于 JavaScript/TypeScript,VS Code 的 IntelliSense 非常强大,能理解代码结构和类型信息。
  2. 多光标编辑:

    • 这是一个非常强大的功能,可以同时在多个位置进行编辑。
    • 方法一: 按住 Option 键,然后在你想要添加光标的位置点击鼠标左键。
    • 方法二: 选中一段文本,然后按 Cmd + D。VS Code 会依次选中下一个与当前选中文本相同的匹配项,并添加光标。重复按下 Cmd + D 可以选中更多匹配项。
    • 方法三: 选中一段文本,然后按 Cmd + Shift + L。VS Code 会同时选中所有与当前选中文本相同的匹配项,并在每个匹配项末尾添加光标。
    • 方法四: Option + Command + Up/Down 在当前光标的上方/下方创建新的光标。
    • 一旦拥有了多个光标,你输入的任何内容都会同时出现在所有光标位置,撤销、删除等操作也是同步的。
  3. 全局搜索与替换:

    • 文件内搜索: Cmd + F 打开当前文件内的搜索框。
    • 文件内替换: Cmd + Option + F 打开当前文件内的替换框。
    • 全局搜索 (在所有文件中搜索): Cmd + Shift + F 打开侧边栏的搜索视图。输入搜索内容,可以选择是否区分大小写、全字匹配、使用正则表达式。
    • 全局替换: 在全局搜索框中输入搜索内容后,点击搜索框下方的箭头图标,会展开替换输入框。输入替换内容后,可以点击单个文件的替换按钮,或者点击顶部的替换所有按钮。注意:全局替换是不可逆的,操作前请确认!
  4. 格式化代码:

    • 保持代码风格一致性非常重要。VS Code 可以帮助你自动格式化代码。
    • 格式化当前文件:Shift + Option + F
    • 你可以在设置中搜索 “Format On Save”,勾选后,VS Code 会在每次保存文件时自动格式化代码。
    • 通常你需要安装相应的语言格式化扩展(如 Prettier, ESLint, Black 等)来获得更好的格式化效果。在设置中搜索 “Default Formatter” 可以选择默认使用的格式化工具。
  5. 代码片段 (Snippets):

    • 代码片段是预定义的代码模板,通过输入一个简短的触发词,然后按下 Tab 键,就可以快速插入一段常用代码结构。
    • 例如,在一个 HTML 文件中输入 ! 然后按 Tab,通常会生成一个基本的 HTML5 文档结构。
    • VS Code 内置了许多常用语言的代码片段,你也可以安装扩展获取更多,甚至可以创建自己的代码片段 (Cmd + Shift + P,搜索 “Configure User Snippets”)。
  6. Emmet 支持:

    • Emmet 是一个非常强大的 Web 开发工具,可以通过CSS选择器语法快速生成 HTML 和 CSS 代码。VS Code 内置了 Emmet 支持。
    • 例如,在 HTML 文件中输入 div.container > p*3 + ul > li.item$*4 然后按 Tab,就会生成如下结构:
      html
      <div class="container">
      <p></p>
      <p></p>
      <p></p>
      <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
      </ul>
      </div>
    • 在 CSS 文件中输入 m10+p20 然后按 Tab,会生成 margin: 10px; padding: 20px;。掌握 Emmet 可以极大提高前端开发效率。

第六章:个性化定制 – 打造你的专属编辑器

VS Code 的一个强大之处在于它的可定制性。你可以轻松调整外观和行为以适应你的工作习惯。

  1. 设置 (Settings):

    • 打开设置:Code > Settings > Settings (快捷键 Cmd + ,)。
    • 设置界面分为两部分:用户设置 (User Settings) 和工作区设置 (Workspace Settings)。
      • 用户设置: 应用于你使用 VS Code 打开的所有项目。
      • 工作区设置: 仅应用于当前打开的文件夹(项目)。工作区设置会覆盖用户设置,并且会保存在项目根目录下的 .vscode/settings.json 文件中,这使得团队成员可以共享同一套项目配置。
    • 设置界面是图形化的,你可以通过搜索框查找特定的设置项,然后通过下拉菜单、复选框或输入框进行修改。
    • 你也可以点击右上角的 {} 图标切换到 JSON 格式编辑设置文件 (settings.json),这对于进行更高级或批量设置更方便。
    • 一些常用的设置项:
      • Editor: Font FamilyEditor: Font Size: 设置编辑器字体和字号。
      • Editor: Tab Size: 设置 Tab 键代表的空格数。
      • Editor: Insert Spaces: 决定按 Tab 键时插入空格还是 Tab 字符。
      • Files: Auto Save: 设置自动保存模式。
      • Workbench: Color Theme: 选择编辑器的颜色主题。
      • Workbench: Icon Theme: 选择资源管理器文件图标主题。
  2. 主题 (Themes):

    • VS Code 支持更改颜色主题(决定代码颜色高亮、界面颜色等)和文件图标主题。
    • 颜色主题: Code > Settings > Color Theme (快捷键 Cmd + K Cmd + T,然后松开 Cmd+K 再按 T)。通过方向键预览不同的主题。你也可以从扩展商店安装更多主题。
    • 文件图标主题: Code > Settings > File Icon Theme
  3. 快捷键 (Keyboard Shortcuts):

    • VS Code 提供了丰富的快捷键,并且你可以根据自己的习惯进行修改。
    • 打开快捷键编辑器:Code > Settings > Keyboard Shortcuts (快捷键 Cmd + K Cmd + S)。
    • 界面左侧列出了所有的命令及其当前绑定的快捷键。你可以在顶部的搜索框中输入命令名称(如 “save”)或快捷键组合(如 “Cmd+S”)来查找。
    • 双击一个快捷键条目,或将鼠标悬停在其上并点击左侧的铅笔图标,可以为其录制新的快捷键。
    • 右侧是 keybindings.json 文件,你可以直接编辑这个文件进行更高级的快捷键配置(例如,基于特定条件或编辑器上下文设置快捷键)。

第七章:扩展之力 – 拥抱无限可能

VS Code 的核心竞争力在于其强大的扩展生态系统。几乎任何你能想到的功能,都可能通过安装扩展来实现。

  1. 浏览和安装扩展:

    • 点击活动栏的扩展图标 (Cmd + Shift + X)。
    • 在顶部的搜索框中输入你想查找的扩展名称或功能关键词(如 “Python”, “React”, “GitLens”, “Prettier”, “Docker”)。
    • 搜索结果会显示在列表中。点击一个扩展可以查看其详细信息、评分、安装量、功能描述、截图等。
    • 点击扩展详情页面或列表项旁的 “Install” 按钮即可安装。安装后通常需要重新加载 VS Code (Cmd + Shift + P, 输入 Reload Window) 来激活扩展。
  2. 管理扩展:

    • 在扩展视图中,你可以看到已安装的扩展列表。
    • 点击已安装的扩展可以查看详情。
    • 可以 “Disable” (禁用) 或 “Uninstall” (卸载) 扩展。禁用扩展可以在不删除它的情况下暂时关闭其功能。
  3. 推荐的常用扩展 (仅举例):

    • 语言支持: 根据你使用的语言安装对应的扩展。例如 Python, JavaScript (ES6) code snippets, Java Extension Pack, C/C++, Go 等。这些扩展通常提供语法高亮、智能补全、代码导航、格式化、调试支持等。
    • 前端开发: Live Server (启动一个本地开发服务器,自动刷新页面), Prettier - Code formatter (流行的代码格式化工具), ESLint (JavaScript 代码检查), Debugger for Chrome (直接在 VS Code 中调试 Chrome 浏览器中的 JavaScript)。
    • Git 工具: GitLens (增强的 Git Blame、历史记录等功能)。
    • Markdown 支持: VS Code 内置了 Markdown 预览,但可以安装扩展增强功能。
    • Docker 支持: 管理 Docker 容器和镜像。
    • 数据库工具:SQLTools,可以直接连接和查询数据库。
    • SSH 远程开发: Remote - SSH 扩展允许你直接在远程服务器上进行开发,而无需将代码同步到本地。这是一个非常强大的功能。

花费时间探索和安装适合你工作流程的扩展,是提高效率的关键一步。

第八章:集成终端 – 代码与命令行无缝切换

VS Code 内置了终端功能,你可以在编辑器内部运行命令行命令,这避免了在编辑器和独立的终端应用之间频繁切换。

  1. 打开终端:

    • 通过菜单:Terminal > New Terminal
    • 通过快捷键:Cmd + J (切换面板显示/隐藏,如果面板显示的是其他视图,点击面板区域左侧的 “Terminal” 标签切换)。
    • 通过命令面板:Cmd + Shift + P,输入 Terminal: Create New Terminal
  2. 使用终端:

    • 打开终端后,你会看到熟悉的命令行提示符(在 Mac 上通常是 Bash 或 Zsh)。终端的工作目录默认是当前打开的文件夹(项目根目录)。
    • 你可以像在外部终端一样输入命令,例如 ls (列出文件), cd foldername (进入文件夹), git status (查看 Git 状态), npm install (安装 Node.js 包), python your_script.py (运行 Python 脚本) 等。
    • 你可以通过终端右上角的 + 图标创建多个终端实例,通过下拉菜单在它们之间切换。
    • 点击垃圾桶图标可以关闭当前终端。
  3. 配置终端:

    • 你可以在设置中搜索 “Terminal” 来配置终端的外观和行为,例如字体、字号、光标样式、以及默认使用的 Shell (Terminal > Integrated > Shell: Osx,选择 /bin/bash, /bin/zsh 等)。

第九章:调试你的代码 – 找出并修复错误

VS Code 提供了强大的调试功能,可以帮助你逐步执行代码、检查变量值、定位问题。

  1. 进入调试视图:

    • 点击活动栏的运行和调试图标 (Cmd + Shift + D)。
  2. 配置调试器:

    • 首次进入调试视图或打开新项目时,你可能需要配置一个 launch.json 文件来告诉 VS Code 如何启动你的应用程序进行调试。
    • 点击调试视图顶部的齿轮图标,VS Code 会尝试根据你的项目类型(如果安装了相应扩展)推荐一个环境(如 Node.js, Python, Chrome 等)。选择一个环境后,VS Code 会自动生成一个 launch.json 文件并打开。
    • launch.json 文件定义了不同的调试配置(”configurations”)。例如,一个 Node.js 项目可能有 “Launch Program” (启动主文件) 和 “Attach to Process” (附加到正在运行的 Node.js 进程) 等配置。你需要根据你的项目结构和需求修改或添加配置。
  3. 设置断点:

    • 在你想让程序暂停执行的代码行的行号左侧点击鼠标左键。会出现一个红点,这就是断点 (Breakpoint)。程序运行到断点处会自动暂停。
  4. 开始调试:

    • 在调试视图顶部的下拉菜单中选择一个调试配置。
    • 点击绿色的播放按钮或按下 F5 (如果 launch.json 已配置且绑定了 F5) 来启动调试。
  5. 调试控制:

    • 程序暂停在断点处时,顶部会出现一个调试控制工具栏:
      • 继续 (Continue): F5,继续执行直到下一个断点或程序结束。
      • 单步跳过 (Step Over): F10,执行当前行代码,如果当前行是函数调用,则不进入函数内部。
      • 单步调试 (Step Into): F11,执行当前行代码,如果当前行是函数调用,则进入函数内部的第一行。
      • 单步跳出 (Step Out): Shift + F11,跳出当前函数,执行到调用该函数的地方。
      • 重启 (Restart): Cmd + Shift + F5,重新启动调试会话。
      • 停止 (Stop): Shift + F5,终止调试会话。
  6. 检查变量与调用堆栈:

    • 在调试暂停时,调试视图的侧边栏会显示:
      • 变量 (Variables): 显示当前作用域内的变量及其值。你可以展开对象和数组查看其内容。
      • 监视 (Watch): 你可以手动添加想要监视的表达式或变量,无论它们当前是否在作用域内,只要能被求值,都会显示其值。
      • 调用堆栈 (Call Stack): 显示程序当前执行路径上的函数调用栈。
      • 断点 (Breakpoints): 列出所有设置的断点,可以启用/禁用或删除。

调试是开发过程中必不可少的技能,掌握 VS Code 的调试功能可以帮助你更快速地定位和解决问题。

第十章:Git 集成 – 内置的版本控制利器

VS Code 对 Git 的集成做得非常好,你可以在不离开编辑器的情况下完成大部分 Git 操作。

  1. 初始化或克隆仓库:

    • 如果你打开的文件夹是一个 Git 仓库,VS Code 会自动识别并激活 Git 功能。
    • 如果不是,可以在源代码管理视图 (Cmd + Shift + G) 中点击 “Initialize Repository” (初始化仓库) 或 “Clone Repository” (克隆仓库)。
  2. 查看状态与暂存更改:

    • 源代码管理视图会显示当前仓库的状态:未跟踪文件 (Untracked Changes)、已修改文件 (Changes)、暂存文件 (Staged Changes)。
    • 在 “Changes” 列表中,将鼠标悬停在文件名上,点击 + 图标可以将该文件暂存 (Stage Changes)。
    • 点击列表顶部的 + 可以暂存所有已修改文件。
  3. 比较文件差异:

    • 点击源代码管理视图中 “Changes” 或 “Staged Changes” 列表里的文件名,会打开一个差异视图 (Diff View),清晰地显示当前文件与上次提交或暂存时的差异。
  4. 提交 (Commit):

    • 在源代码管理视图顶部的文本框中输入提交信息 (Commit Message)。
    • 点击顶部的✅图标或按下 Cmd + Enter 来提交已暂存的更改。
  5. 分支管理与同步:

    • 状态栏左侧会显示当前所在的 Git 分支。点击它可以在分支之间切换。
    • 源代码管理视图顶部的三个点菜单 (…) 提供了更多 Git 操作,如创建分支、合并分支、拉取 (Pull)、推送 (Push)、抓取 (Fetch) 等。
    • 状态栏右侧通常会显示当前分支与远程仓库的同步状态(如 ↓ 2 ↑ 1 表示落后远程仓库 2 次提交,领先远程仓库 1 次提交)。点击状态栏上的同步图标可以直接执行拉取和推送操作。
  6. Git Blame 与历史记录 (通过扩展):

    • 虽然 VS Code 内置的 Git 功能已很实用,但安装 GitLens 这样的扩展可以获得更强大的功能,如在代码行尾显示该行最后的提交信息 (Git Blame)、查看文件历史记录、提交详情等。

第十一章:常用快捷键速查 (Mac)

熟练使用快捷键是提高效率的关键。这里列出一些 VS Code 在 Mac 上常用的快捷键:

  • Cmd + P: 快速打开文件
  • Cmd + Shift + P: 打开命令面板 (Command Palette),执行几乎所有 VS Code 命令
  • Cmd + N: 新建文件
  • Cmd + O: 打开文件
  • Cmd + Shift + O: 打开文件夹
  • Cmd + S: 保存当前文件
  • Cmd + Option + S: 保存所有文件
  • Cmd + W: 关闭当前编辑器选项卡
  • Cmd + Shift + W: 关闭所有编辑器选项卡,关闭 VS Code 窗口
  • Cmd + B: 切换侧边栏显示/隐藏
  • Cmd + J: 切换面板显示/隐藏
  • Cmd + \: 分割编辑器 (垂直分屏)
  • Cmd + 1, Cmd + 2, Cmd + 3: 切换到第 1, 2, 3 个编辑器组
  • Cmd + K Cmd + Left/Right: 将当前编辑器移动到左/右边的编辑器组
  • Cmd + K Cmd + Up/Down: 将当前编辑器移动到上/下边的编辑器组
  • Cmd + K Cmd + W: 关闭当前编辑器组
  • Cmd + F: 文件内搜索
  • Cmd + Option + F: 文件内替换
  • Cmd + Shift + F: 全局搜索 (在所有文件中搜索)
  • Cmd + Shift + H: 全局替换
  • Cmd + G: 查找下一个匹配项 (文件内搜索时)
  • Shift + Cmd + G: 查找上一个匹配项 (文件内搜索时)
  • Cmd + D: 添加下一个相同的匹配项到选中区 (用于多光标编辑)
  • Cmd + Shift + L: 选中所有相同的匹配项 (用于多光标编辑)
  • Option + Click: 在任意位置添加新光标
  • Option + Cmd + Up/Down: 在当前行上方/下方添加新光标
  • Cmd + C: 复制
  • Cmd + X: 剪切
  • Cmd + V: 粘贴
  • Cmd + Z: 撤销
  • Cmd + Shift + Z: 重做
  • Cmd + Shift + K: 删除当前行
  • Shift + Option + Up/Down: 复制当前行到上方/下方
  • Cmd + K Cmd + C: 添加行注释
  • Cmd + K Cmd + U: 移除行注释
  • Shift + Option + A: 块注释
  • Shift + Option + F: 格式化当前文件
  • F12: 跳转到定义 (Go to Definition)
  • Option + F12: 查看定义 (Peek Definition)
  • Shift + F12: 查找所有引用 (Find All References)
  • Cmd + .: 显示快速修复 (Quick Fix) 和重构建议
  • Cmd + Shift + X: 显示扩展视图
  • Cmd + Shift + G: 显示源代码管理视图
  • Cmd + Shift + D: 显示运行和调试视图
  • Cmd + ,: 打开设置
  • Cmd + K Cmd + T: 选择颜色主题
  • Cmd + K Cmd + S: 打开快捷键设置
  • Cmd + Shift + [: 折叠当前代码块
  • Cmd + Shift + ]: 展开当前代码块
  • F5: 启动调试
  • F10: 单步跳过 (调试)
  • F11: 单步调试 (调试)
  • Shift + F11: 单步跳出 (调试)
  • Esc: 取消当前操作,退出菜单或模态框,退出 Zen Mode

记住这些快捷键需要时间练习,但它们将极大地提升你的效率。你可以随时通过 Cmd + K Cmd + S 查看或修改所有快捷键。

第十二章:进阶使用与实用技巧

除了上述核心功能,还有一些进阶用法和实用技巧可以让你更高效地使用 VS Code:

  1. 命令面板 (Command Palette): Cmd + Shift + P 是一个万能入口。当你忘记某个操作的菜单位置或快捷键时,只需打开命令面板并输入关键词,几乎所有 VS Code 的命令都可以在这里找到并执行。养成使用命令面板的习惯可以显著提高效率。

  2. 工作区 (Workspaces): 当你打开一个文件夹时,VS Code 创建了一个临时的工作区。对于包含多个相关项目的复杂场景,你可以创建 .code-workspace 文件来定义一个多根工作区 (Multi-root Workspace)。这样可以在同一个 VS Code 窗口中管理和同时搜索多个独立的项目文件夹。通过 File > Add Folder to Workspace... 来添加文件夹,然后 File > Save Workspace As... 来保存工作区文件。

  3. 任务 (Tasks): VS Code 可以配置和运行各种任务,如编译代码、运行测试、打包项目等。这些任务可以在 .vscode/tasks.json 文件中定义。通过 Terminal > Run Task... (或 Cmd + Shift + B 运行默认构建任务) 来执行任务。这使得你无需离开编辑器就可以执行常用的项目构建命令。

  4. 用户代码片段 (User Snippets): 如果内置或扩展提供的代码片段不能满足你的需求,你可以创建自己的用户代码片段。通过命令面板 Cmd + Shift + P 搜索 “Configure User Snippets”,选择对应的语言,然后编辑 JSON 文件来定义你的片段。

  5. Zen Mode (禅宗模式): View > Appearance > Toggle Zen Mode (或 Cmd + K Z)。进入禅宗模式后,编辑器会全屏显示,隐藏所有不相关的 UI 元素(侧边栏、面板、活动栏、状态栏),让你更专注于代码本身。按两次 Esc 退出禅宗模式。

  6. Markdown 预览: 打开一个 .md 文件后,点击编辑器右上角的预览图标(一个像眼睛的图标),或使用快捷键 Shift + Cmd + V,可以在侧边栏看到 Markdown 渲染后的效果。Shift + Cmd + V E 可以同步预览和编辑器滚动。

  7. 语言模式切换: VS Code 会自动检测文件类型并应用相应的语言模式。如果检测错误或你想手动切换,可以点击状态栏右侧的语言模式名称,然后选择或搜索正确的语言模式。

总结与展望

恭喜你!通过阅读本文,你已经掌握了 VS Code 在 Mac 环境下的安装、基本操作、核心功能和许多实用技巧。VS Code 是一个功能深不可测的编辑器,其强大之处很大程度上依赖于其庞大的扩展生态和高度可定制性。

接下来的学习之路,建议你:

  • 多加练习: 熟能生巧,多动手在 VS Code 中编写、调试和管理你的项目。
  • 探索扩展: 根据你的开发语言和工作流程,积极在扩展市场中寻找并尝试有用的扩展。
  • 定制设置和快捷键: 将 VS Code 调整到最符合你个人习惯的状态。
  • 查阅官方文档: VS Code 的官方文档非常详尽,遇到问题时是最好的参考资料。

希望这篇教程能帮助你在 Mac 上更好地使用 VS Code,祝你编码愉快,效率翻倍!


发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部