教程：Visual Studio Code 入门
在本教程中，你将了解 Visual Studio Code 的关键功能，以帮助你快速开始编码。你将了解用户界面的不同组件以及如何自定义它以满足你的喜好。然后，你将编写一些代码并使用内置的代码编辑功能，如 IntelliSense 和代码操作，你还将学习如何运行和调试你的代码。通过安装语言扩展，你可以为不同的编程语言添加支持。
提示如果你更喜欢通过视频学习，可以观看 入门视频，该视频涵盖了本教程的相同步骤。
先决条件
在你的计算机上下载并安装 Visual Studio Code
在 VS Code 中打开文件夹
你可以使用 VS Code 处理单个文件进行快速编辑，也可以打开一个文件夹，也称为 _工作区_。
让我们首先创建一个文件夹并在 VS Code 中打开它。你将在整个教程中使用此文件夹。
打开 Visual Studio Code。
首次打开 VS Code 时，你应该会看到 **欢迎** 页面，其中包含不同的入门操作。
从菜单中选择 **文件** > **打开文件夹...** 来打开文件夹。
选择 **新建文件夹**，创建一个名为 vscode101 的新文件夹，然后选择 **选择文件夹**（macOS 上为 **打开**）。
你创建的文件夹是你工作区的根目录。
在 **工作区信任** 对话框中，选择 **是，我信任作者** 以启用工作区中的所有功能。
由于你在计算机上创建了该文件夹，因此你可以信任该文件夹中的代码。
重要工作区信任允许你决定项目文件夹中的代码是否可以由 VS Code 执行。当你从 Internet 下载代码时，应首先对其进行审查，以确保其运行安全。有关 工作区信任 的更多信息。
现在，你应该在左侧看到 **资源管理器** 视图，显示文件夹的名称。
你将使用资源管理器视图来查看和管理工作区中的文件和文件夹。
提示当你打开 VS Code 中的文件夹时，VS Code 可以恢复该文件夹的用户界面状态，例如打开的文件、活动视图以及编辑器的布局。你还可以配置仅适用于该文件夹的设置，或定义调试配置。有关 工作区 的更多信息。
探索用户界面
现在你已经在 VS Code 中打开了一个文件夹，让我们快速浏览一下用户界面。
通过活动栏切换视图
使用活动栏在不同视图之间切换。
提示将鼠标悬停在活动栏上，即可看到每个视图的名称和相应的键盘快捷键。你可以通过再次选择视图或按键盘快捷键来打开和关闭视图。
当你选择活动栏中的视图时，**主侧边栏** 会打开以显示视图特定的信息。
例如，运行和调试视图允许你配置和启动调试会话。
通过编辑器查看和编辑文件
在活动栏中选择 **资源管理器** 视图，然后选择 **新建文件...** 按钮在你的工作区中创建新文件。
输入文件名 index.html，然后按 Enter。
文件将添加到你的工作区，并且编辑器将在窗口的主区域中打开。
开始在 index.html 文件中键入一些 HTML 代码。
在你键入时，你应该会看到建议弹出，帮助你完成代码（_IntelliSense_）。你可以使用 上 和 下 键导航建议，并使用 Tab 键插入选定的建议。
向工作区添加更多文件，并注意每个文件都会打开一个新的编辑器选项卡。
你可以打开任意数量的编辑器，并将它们并排放置，垂直或水平。了解有关 并排编辑 的更多信息。
从面板区域访问终端
VS Code 具有集成终端。按 ⌃`（Windows、Linux Ctrl+`） 打开它。
你可以选择不同的 shell，例如 PowerShell、命令提示符或 Bash，具体取决于你的操作系统配置。
在终端中，输入以下命令在你的工作区中创建一个新文件。
echo "Hello, VS Code" > greetings.txt
默认工作文件夹是你工作区的根目录。请注意，资源管理器视图会自动捕获并显示新文件。
你可以同时打开多个终端。选择 **启动配置** 下拉菜单以查看可用的 shell 并选择一个。
通过命令面板访问命令
按 ⇧⌘P（Windows、Linux Ctrl+Shift+P） 打开 **命令面板**。你也可以使用 **视图** > **命令面板...** 菜单项。
VS Code 中的许多命令都可以通过命令面板访问。当你安装扩展时，它们也可以将命令添加到命令面板。
提示请注意，命令面板显示具有键盘快捷键的命令的默认快捷键。你可以使用键盘快捷键直接运行命令。
命令面板支持不同的操作模式
在 > 符号之后，开始键入以过滤命令列表。例如，键入 move terminal 来查找将终端移动到新窗口的命令。
删除 > 字符并开始键入以搜索工作区中的文件。你可以使用 ⌘P（Windows、Linux Ctrl+P） 键盘快捷键直接打开命令面板并开始搜索文件。
提示VS Code 使用模糊匹配来查找文件或命令。例如，键入 odks 会返回 打开默认键盘快捷方式 命令。
配置 VS Code 设置
你可以通过配置设置来自定义 VS Code 的几乎所有部分。你可以使用 **设置编辑器** 修改 VS Code 中的设置，或直接修改 settings.json 文件。
按 ⌘,（Windows、Linux Ctrl+,） 打开设置编辑器（或选择 **文件** > **首选项** > **设置** 菜单项）。
提示使用搜索框过滤显示的设置列表。
默认情况下，VS Code 不会自动保存修改过的文件。从“自动保存”下拉菜单中选择一个值来更改此行为。
VS Code 会自动应用设置的更改。当你修改工作区中的文件时，它现在应该会自动保存。
要将设置恢复为其默认值，请选择设置旁边的齿轮图标，然后选择 **重置设置**。
提示你可以通过在搜索框中键入 @modified 或选择 **已修改** 过滤器来快速找到所有已修改的设置。
你可以使用设置编辑器中的选项卡在 **用户** 设置和 **工作区** 设置之间切换。
用户设置适用于你的所有工作区。工作区设置仅适用于当前工作区。工作区设置会覆盖用户设置。有关 VS Code 中 设置 的更多信息。
编写一些代码
VS Code 内置支持 JavaScript、TypeScript、HTML、CSS 等。在本教程中，你将创建一个示例 JavaScript 文件并使用 VS Code 提供的一些代码编辑功能。
VS Code 支持许多编程语言，在下一步中，你将 安装语言扩展 以添加对另一种语言（即 Python）的支持。
在资源管理器视图中，创建一个新文件 app.js，然后开始键入以下 JavaScript 代码
function sayHello(name) {
console.log('Hello, ' + name);
}
sayHello('VS Code');
在你键入时，你应该会看到建议弹出，帮助你完成代码（_IntelliSense_）。你可以使用 上 和 下 键导航建议，并使用 Tab 键插入选定的建议。
同时注意代码的格式（_语法高亮_），以帮助你区分代码的不同部分。
当你将光标放在字符串 Hello, 上时，你应该会看到一个灯泡图标出现，表明有一个代码操作。
你还可以使用 ⌃Space（Windows、Linux Ctrl+Space） 键盘快捷键打开灯泡菜单。
选择灯泡图标，然后选择 **转换为模板字符串**。
代码操作是用于对代码应用快速修复的建议。在本例中，代码操作将 ""Hello, " + name 转换为 模板字符串 `Hello, ${name}`，这是一个嵌入表达式到字符串中的特殊 JavaScript 结构。
了解有关 VS Code 中代码 编辑功能、IntelliSense、代码导航 和 重构 的更多信息。
使用源代码管理
Visual Studio Code 具有集成的源代码管理 (SCM)，并包含开箱即用的 Git 支持。
让我们使用内置的 Git 支持来提交之前所做的更改。
在活动栏中选择 **源代码管理** 视图以打开源代码管理视图。
请确保你的计算机上已安装 Git。如果未安装 Git，你将在源代码管理视图中看到一个用于在你计算机上安装它的按钮。
选择 **初始化存储库** 来为你的工作区创建新的 Git 存储库。
初始化存储库后，源代码管理视图将显示你在工作区中所做的更改。
你可以通过将鼠标悬停在文件上并选择文件旁边的 + 来暂存单个更改。
提示要暂存所有更改，请将鼠标悬停在 **更改** 上并选择 **暂存所有更改** 按钮。
输入提交消息，例如 添加 hello 函数，然后选择 **提交** 将更改提交到你的 Git 存储库。
提示在源代码管理视图中选择 **图表**，以显示你的 Git 存储库提交历史记录的可视化表示。
VS Code 中的源代码管理还有更多内容可以探索。有关 VS Code 中 源代码管理 的更多信息。
安装语言扩展
VS Code 拥有丰富的扩展生态系统，可让你为安装添加语言、调试器和工具，以支持你的特定开发工作流。在 Visual Studio Marketplace 中有数千个可用的扩展。
让我们安装一个语言扩展来添加对 Python 或你感兴趣的任何其他编程语言的支持。
在活动栏中选择 **扩展** 视图。
扩展视图允许你在 VS Code 中浏览和安装扩展。
在扩展视图搜索框中输入 _Python_ 来浏览 Python 相关扩展。选择 Microsoft发布的 **Python** 扩展，然后选择 **安装** 按钮。
现在，在你的工作区中创建一个新 Python 文件 hello.py，然后开始键入以下 Python 代码
def say_hello(name):
print("Hello, " + name)
say_hello("VS Code")
请注意，你现在还可以获得 Python 代码的建议和 IntelliSense。
运行和调试你的代码
VS Code 内置支持运行和调试 Node.js 应用程序。在本教程中，你将使用在上一步中安装的 Python 扩展来调试 Python 程序。
让我们来调试你在上一步中创建的 hello.py 程序。
请确保你的计算机上已安装 Python 3。
如果你的计算机上没有安装 Python 解释器，你会在窗口右下角看到一个通知。选择 **选择解释器** 打开 **命令面板**，然后选择你想要使用的 Python 解释器或安装一个。
在 hello.py 文件中，将光标放在 print 行上，然后按 F9 设置断点。
编辑器左边距会出现一个红点，表示已设置断点。有了断点，你就可以在特定代码行暂停程序的执行。
按 F5 开始调试会话。
选择 Python 调试器
选择运行当前的 Python 文件
请注意，程序已启动，并且执行会在你设置的断点处停止。
提示通过在执行暂停时将鼠标悬停在变量上，来检查 name 变量的值。你可以在“运行和调试”视图的 **变量** 视图中随时查看变量的值。
按“调试”工具栏中的 **继续** 按钮或按 F5 继续执行。
VS Code 中还有许多其他调试功能，例如监视变量、条件断点和启动配置。深入了解 VS Code 中 调试 的详细信息。
通过 AI 和 GitHub Copilot 增强你的编码
GitHub Copilot 是一个由 AI 驱动的助手，可帮助你更快地编写代码，并可以帮助你完成各种任务，例如代码补全、代码重构和修复错误。
让我们开始从 Copilot 获取代码建议。
请确保已在 VS Code 中设置好 Copilot。请遵循我们 Copilot 设置 指南中的步骤。
提示如果你还没有 Copilot 订阅，你可以通过注册 Copilot 免费计划 来免费使用 Copilot，并获得每月一次的内联建议和聊天交互限制。
在 hello.py 文件中，将光标放在文件末尾，然后键入此函数标头。
def say_day_of_week(date)
GitHub Copilot 将自动建议函数的其余部分。通过按 Tab 键接受代码建议。
接下来，让我们调用新函数。
say_day_of_week(date.today())
请注意，date 关键字上有一个波浪线，表示存在错误。
将光标放在 date 关键字上，选择 _灯泡_ 图标，然后选择 **使用 Copilot 修复**。
GitHub Copilot 将建议一个错误修复。如果你对建议满意，请选择 **接受**。
提示你还可以使用 ⌘.（Windows、Linux Ctrl+.） 键盘快捷键手动触发快速修复。
在 VS Code 中，你还可以使用 Copilot 做更多事情。通过我们的 Copilot 快速入门，了解 VS Code 中 GitHub Copilot 的更多信息。
后续步骤
恭喜！你已完成本教程，并探索了 Visual Studio Code 的一些关键功能。既然你已经掌握了 Visual Studio Code 的基础知识，请详细了解如何
发现并运行代码的单元测试
使用集成终端
设置远程开发环境
01/08/2026