💻 欢迎参加 6 月 3 日 MS Build 上的 VS Code 直播活动。

教程：Visual Studio Code 入门

在本教程中，你将了解 Visual Studio Code 的核心功能，以帮助你快速上手。你将了解用户界面的不同组件，使用 AI 智能体构建 Web 应用，并探索如何通过扩展来增强开发环境。你还将学习如何配置 VS Code 设置、使用源代码管理以及运行和调试代码。

提示

如果你更喜欢通过视频学习 Visual Studio Code，可以在我们的 YouTube 频道观看 入门视频。

先决条件

提示

如果你还没有 Copilot 订阅，可以通过注册 Copilot 免费计划 来免费使用 Copilot，该计划提供每月的补全和聊天互动额度。

在 VS Code 中打开文件夹

你可以使用 VS Code 处理单个文件以进行快速编辑，也可以打开一个文件夹，这也被称为工作区 (workspace)。

让我们从创建一个文件夹并在 VS Code 中打开它开始。你将在整个教程中使用此文件夹。

  1. 打开 Visual Studio Code，在菜单中选择 文件 (File) > 打开文件夹... (Open Folder...) 以打开文件夹。

  2. 选择 新建文件夹 (New Folder) 并创建一个名为 vscode101 的新文件夹。然后选择 选择文件夹 (Select Folder)（macOS 上为 打开 (Open)）以在 VS Code 中打开该文件夹。

    VS Code 现在将你打开的文件夹视为一个工作区。

  3. 在“工作区信任”对话框中，选择 是，我信任此作者 (Yes, I trust the authors) 以启用工作区中的所有功能。

    Screenshot that shows the Workspace Trust dialog.

    重要

    工作区信任功能让你能够决定项目文件夹中的代码是否可以由 VS Code 执行。当你从互联网下载代码时，应首先进行审核以确保其运行安全。获取有关 工作区信任 的更多信息。

  4. 现在你应该能在左侧看到 资源管理器 (Explorer) 视图，其中显示了文件夹名称。

    你将使用资源管理器视图来查看和管理工作区中的文件和文件夹。

    Screenshot of VS Code with the Explorer view opened and showing the vscode101 folder.

提示

当你在 VS Code 中打开文件夹时，VS Code 可以恢复该文件夹的 UI 状态，例如打开的文件、活动视图和编辑器布局。你还可以配置仅适用于该文件夹的设置，或定义调试配置。获取有关 工作区 的更多信息。

探索用户界面

既然你已经在 VS Code 中打开了文件夹，让我们快速浏览一下用户界面。

使用活动栏 (Activity Bar) 在视图之间切换

  1. 使用活动栏在不同视图之间进行切换。

    Screenshot that highlights the Activity Bar.

    提示

    将鼠标悬停在活动栏上可以看到每个视图的名称及其对应的键盘快捷键。你可以通过再次选择视图或按键盘快捷键来打开或关闭视图。

  2. 当你从活动栏中选择一个视图时，主侧边栏 (Primary Side Bar) 将打开，以显示特定视图的信息。

    例如，运行和调试视图允许你配置和启动调试会话。

    Screenshot that shows the Activity Bar and the Run and Debug view in the Primary Side Bar.

    提示

    注意活动栏中的 聊天 (Chat) 视图。这是你与 AI 智能体交互以生成代码、提问等的地方。你将在下一步中使用它来构建应用。

使用编辑器查看和编辑文件

  1. 在活动栏中选择资源管理器视图，然后选择 新建文件... (New File...) 按钮在工作区中创建一个新文件。

    Screenshot that shows the New File button in the Explorer view.

  2. 输入名称 index.html 并按 Enter 键。

    一个文件被添加到你的工作区，编辑器会在窗口的主要区域打开。

    Screenshot that shows the Editor in the main area of the window.

  3. 开始在 index.html 文件中输入一些 HTML 代码。

    输入时，你会看到弹出建议，帮助你完成代码（即 IntelliSense）。你可以使用 Up 和 Down 键浏览建议，按 Tab 键插入所选建议。

  4. 向工作区添加更多文件，并注意每个文件都会打开一个新的编辑器标签页。

    你可以根据需要打开任意数量的编辑器，并垂直或水平并排查看它们。了解更多关于 并排编辑 的信息。

    Screenshot that shows multiple Editor tabs.

从面板区域访问终端

  1. VS Code 内置了一个终端。按 ⌃` (Windows, Linux Ctrl+`) 即可打开。你也可以使用 视图 (View) > 终端 (Terminal) 菜单项。

    根据操作系统的配置，你可以在不同的 Shell（如 PowerShell、命令提示符或 Bash）之间进行选择。

    Screenshot that shows the Panel area with the Terminal view.

  2. 在终端中，输入以下命令以在工作区中创建一个新文件。

    echo "Hello, VS Code" > greetings.txt

    默认工作文件夹是工作区的根目录。注意资源管理器视图会自动捕获并显示该新文件。

    Screenshot that shows the Explorer view with the new file.

  3. 你可以同时打开多个终端。选择 启动配置文件 (Launch Profile) 下拉菜单查看可用 Shell 并进行选择。

    Screenshot that shows the Launch Profile dropdown with the available shells.

使用命令面板访问命令

  1. 按 ⇧⌘P (Windows, Linux Ctrl+Shift+P) 打开 命令面板 (Command Palette)。你也可以使用 视图 (View) > 命令面板 (Command Palette) 菜单项。

    VS Code 中的许多命令都可以通过命令面板访问。当你安装扩展时，它们可能会向命令面板添加额外的命令。

    Screenshot that shows the Command Palette.

    提示

    注意命令面板会显示具有默认快捷键的命令。你可以使用快捷键直接运行命令。

  2. 命令面板支持不同的操作模式

    1. 命令模式 (>)：在 > 符号之后，开始输入以筛选命令列表。例如，输入 move terminal 来查找将终端移动到新窗口的命令。

      Screenshot that shows the Command Palette, listing the entries for moving the terminal.

    2. 快速打开模式：移除 > 字符并开始输入以在工作区中搜索文件。你可以使用 ⌘P (Windows, Linux Ctrl+P) 快捷键直接打开命令面板并开始搜索文件。

      Screenshot that shows the Quick Open feature in the Command Palette.

    3. 符号搜索模式 (#)：将 > 字符替换为 #，以在代码中搜索变量或函数等符号。

提示

VS Code 使用模糊匹配来查找文件或命令。例如，输入 odks 会返回 Open Default Keyboard Shortcuts（打开默认键盘快捷键）命令。

使用 AI 智能体构建应用

Visual Studio Code 内置了对 GitHub Copilot 的支持，用于 AI 驱动的代码编写。AI 智能体可以自主规划解决方案、创建和编辑多个文件、运行终端命令，并根据错误进行迭代，所有操作只需一个自然语言提示词即可完成。你描述你的需求，智能体就会完成所需的工作。

让我们使用智能体通过单个提示词来构建一个食谱列表 Web 应用。

  1. 按 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 打开聊天视图。

  2. 在聊天视图的下拉菜单中选择 智能体 (Agent)。智能体使 AI 能够自主创建和编辑文件、运行终端命令等。

    Screenshot that shows the Agent mode selector in the Chat view.

  3. 在聊天输入框中输入以下提示词

    Create a recipe list app with HTML, CSS, and JavaScript in separate files. Include an input field to add recipes with a name and description, a list to display them, and a delete button for each item. Use modern styling. Add some sample recipes to the list.
    注意

    如果你尚未设置 GitHub Copilot，系统会提示你登录 GitHub 账户并设置 Copilot，然后才能发送提示词。如果你没有 Copilot 订阅，你将关联到一个免费账户，该账户提供每月的补全和聊天互动额度。

  4. 按 Enter 发送提示词。

    智能体开始生成应用。注意它是如何创建多个文件、向你展示拟议的更改，并可能请求授权以运行终端命令的。

    Screenshot that shows the agent generating the recipe list app in the Chat view.

  5. 检查生成的文件，并在聊天视图中选择 保留 (Keep) 以接受所有更改。

在下一步中，你将安装一个扩展以在集成浏览器中托管该应用。

使用扩展增强你的环境

VS Code 拥有丰富的扩展生态系统，让你能够添加语言、调试器和工具到你的安装中，以支持你的开发工作流程。在 Visual Studio Marketplace 中有数千个扩展可供选择。

让我们安装一个扩展，帮助我们处理刚才构建的食谱列表应用。

  1. 在活动栏中选择 扩展 (Extensions) 视图。

    扩展视图使你能够直接在 VS Code 内浏览和安装扩展。

    Screenshot that shows the Extensions view, highlighting the Extensions icon in the Activity Bar.

  2. 在扩展视图的搜索框中输入 Live Preview。选择微软发布的 Live Preview 扩展，然后选择 安装 (Install) 按钮。

    Live Preview 会启动一个带有实时重载功能的本地开发服务器，用于静态和动态页面。

  3. 打开 index.html 文件，在编辑器中右键点击，然后选择 显示预览 (Show Preview)。

    你的食谱列表应用现在会在浏览器中打开。当你更改代码时，浏览器会自动刷新以显示最新版本。

    Screenshot that shows the recipe list app preview.

  4. 通过要求智能体添加功能来继续聊天对话。输入以下提示词

    Add the ability to mark recipes as favorites with a star icon. Favorite recipes should appear at the top of the list.

    智能体修改了现有文件以添加新功能。这展示了你如何通过后续提示词迭代构建你的应用。

通过 Copilot 快速入门 探索 VS Code 中的更多 AI 功能。

配置 VS Code 设置

你可以通过配置设置来自定义 VS Code 的几乎每个部分。你可以使用 设置编辑器 (Settings Editor) 来修改 VS Code 中的设置，或直接修改 settings.json 文件。

  1. 按 ⌘, (Windows, Linux Ctrl+,) 打开设置编辑器（或选择 文件 (File) > 首选项 (Preferences) > 设置 (Settings) 菜单项）。

    Screenshot that shows the Settings Editor.

    提示

    使用搜索框筛选显示的设置列表。

  2. 默认情况下，VS Code 不会自动保存修改后的文件。从“自动保存”下拉菜单中选择一个值来更改此行为。

    Screenshot that shows the Auto Save dropdown in the Settings Editor.

    VS Code 会自动应用设置的更改。当你修改工作区中的文件时，它现在应该会自动保存。

  3. 若要将设置恢复为默认值，请选择设置旁边的齿轮图标，然后选择 重置设置 (Reset Setting)。

    Screenshot that shows the gear icon next to a setting in the Settings Editor.

    提示

    你可以通过在搜索框中输入 @modified 或选择 已修改 (Modified) 过滤器来快速找到所有已修改的设置。

  4. 你可以使用设置编辑器中的选项卡在 用户 (User) 设置和 工作区 (Workspace) 设置之间进行切换。

    用户设置适用于你的所有工作区。工作区设置仅适用于当前工作区。工作区设置会覆盖用户设置。获取有关 VS Code 设置 的更多信息。

使用源代码管理

Visual Studio Code 具有集成的源代码管理 (SCM) 功能，并开箱即用地支持 Git。

让我们使用内置的 Git 支持来提交你之前所做的更改。

  1. 在活动栏中选择 源代码管理 (Source Control) 视图以打开该视图。

    Screenshot that shows the Source Control view, highlighting the button in the Activity Bar.

  2. 请确保你的计算机上已安装 Git。如果未安装 Git，你将在源代码管理视图中看到一个按钮，用于在机器上安装它。

  3. 选择 初始化存储库 (Initialize Repository) 为你的工作区创建一个新的 Git 存储库。

    Screenshot that shows the Source Control view, highlighting the Initialize Repository button.

    初始化存储库后，源代码管理视图将显示你在工作区中所做的更改。

  4. 你可以通过将鼠标悬停在文件上并选择文件旁边的 + 号来暂存单个更改。

    Screenshot that shows the Source Control view with changes in the workspace.

    提示

    要暂存所有更改，请悬停在 更改 (Changes) 上并选择 暂存所有更改 (Stage All Changes) 按钮。

  5. 输入提交信息，例如 Add recipe list app，然后选择 提交 (Commit) 以将更改提交到你的 Git 存储库。

    Screenshot that shows the Source Control view with a commit message.

    提示

    在源代码管理视图中选择 图形 (Graph)，以直观地显示 Git 存储库的提交历史记录。

VS Code 的源代码管理还有很多功能等待探索。获取更多关于 VS Code 源代码管理 的信息。

运行并调试你的代码

VS Code 内置了对运行和调试 JavaScript 和 Node.js 应用的支持。让我们使用调试器来逐步调试智能体生成的食谱列表应用。

注意

由于智能体是动态生成代码的，因此项目中文件的名称和函数名称可能与此处所示的示例不同。请在你生成的代码中查找类似的模式。

  1. 打开智能体为你的食谱列表应用创建的 JavaScript 文件（例如 app.js 或 script.js）。

  2. 找到处理添加食谱的函数（例如 addRecipe）。将光标放在函数体内的第一行，并按 F9 设置断点。

    编辑器左侧边缘会出现一个红点，表示已设置断点。通过断点，你可以在代码的特定行暂停程序的执行。

    Screenshot that shows a breakpoint set in the addRecipe function in the JavaScript file.

  3. 在活动栏中打开“运行和调试”视图，选择 调试 URL (Debug URL)，并输入食谱列表应用预览的 URL（例如 https://:3000）。

    Screenshot that shows the Debug URL configuration in the Run and Debug view.

    调试器启动并打开一个带有你应用的浏览器窗口。

  4. 当触发断点时，执行会暂停，VS Code 会突出显示当前行。

    Screenshot that shows the program stopped at a breakpoint in the editor, highlighting the Variables view to inspect variables.

    提示

    在执行暂停时，将鼠标悬停在变量上即可检查其值。你也可以随时在 运行和调试 视图的 变量 (Variables) 窗格中查看所有变量。

  5. 使用调试工具栏单步执行代码。按 单步跳过 (Step Over) (F10) 执行当前行并移至下一行，或按 继续 (Continue) (F5) 恢复执行。

    Screenshot that shows the Debug toolbar with the Continue button highlighted.

VS Code 还有许多其他调试功能，例如监视变量、条件断点和启动配置。深入了解 VS Code 调试 的详细信息。

后续步骤

恭喜！你已完成本教程并探索了 Visual Studio Code 的一些关键功能。既然你已经学习了 Visual Studio Code 的基础知识，请了解更多关于如何

5/13/2026
English 한국어 中文(简体) 中文(繁體)
© . This site is unofficial and not affiliated with Microsoft.