教程：入门Visual Studio Code

在本教程中，你将学习Visual Studio Code的关键功能，帮助你快速开始编程。你会了解用户界面的不同组成部分，以及如何根据自己的喜好进行定制。然后你写代码，使用内置的代码编辑功能，比如IntelliSense和Code Actions，学习如何运行和调试代码。通过安装语言扩展，你就增加了对另一种编程语言的支持。

前提条件

• 在您的电脑上下载并安装Visual Studio Code。

在VS Code中打开一个文件夹

你可以用 VS Code 快速编辑单个文件，或者打开一个文件夹，也称为工作区。

我们先创建一个文件夹，用 VS Code 打开它。整个教程过程中你都会使用这个文件夹。

1. 打开Visual Studio Code，从菜单中选择“文件>打开文件夹......以打开一个文件夹。

2. 选择新文件夹并创建一个名为VScode101.然后选择选择文件夹（macOS 上打开），在 VS Code 中打开该文件夹。

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

3. 在工作区信任对话框中，选择“是，我信任作者启用工作区中的所有功能。

   

   重要

   Workspace Trust 允许您决定项目文件夹中的代码是否可以由 VS Code 执行。当你从网上下载代码时，首先应审查以确保运行安全。获取更多关于Workspace Trust的信息。

4. 你现在应该会看到左侧的资源管理器视图，显示文件夹名称。

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

   

探索用户界面

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

使用活动栏切换视图

1. 使用活动栏切换不同视角。

   

   提示

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

2. 当你在活动栏中选择视图时，主侧栏会打开，显示特定视图的信息。

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

   

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

1. 在活动栏中选择资源管理器视图，选择“新文件......”按钮，在你的工作区创建新文件。

   

2. 名字的出现index.html然后按下回车键。

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

   

3. 开始在index.html档案。

   当你输入时，应该会看到弹出的建议，帮助你完成代码（IntelliSense）。你可以用上键和下键导航建议，用Tab键插入选中的建议。

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

   你可以随意打开任意数量的编辑器，并将它们并排或横向查看。了解更多关于并排编辑的信息。

   

从面板区域进入终端

1. VS Code 配备了集成终端。按 ⌃'（Windows，Linux Ctrl+'）打开。你也可以使用“查看终端”菜单>项。

   你可以根据作系统配置选择不同的shell，比如PowerShell、命令提示符或Bash。

   

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

   echo "Hello, VS Code" > greetings.txt
   

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

   

3. 你可以同时打开多个终端。选择发射配置文件下拉菜单查看可用的弹壳并选择一个。

   

通过命令调色板访问命令

1. 通过按⇧⌘P（Windows，Linux Ctrl+Shift+P）打开命令面板。你也可以使用“视图”>命令面板菜单项。

   VS Code 中的许多命令可以通过命令面板使用。安装扩展后，它们可以向命令面板添加额外命令。

   

   提示

   注意命令面板显示了带有快捷键的默认快捷方式。你可以直接使用快捷键来执行该命令。

2. 命令调色板支持不同的作模式：

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

      

   2. 快速打开模式：移除字符，开始输入搜索工作区内的文件。你可以使用⌘P（Windows，Linux的Ctrl+P）键盘快捷键打开命令面板，直接开始搜索文件。>

      

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

配置VS Code设置

你几乎可以通过配置来自定义VS Code的每一个部分。你可以用设置编辑器修改VS Code中的设置，或者直接修改settings.json档案。

1. 按⌘（Windows，Linux Ctrl+，）打开设置编辑器（或选择 “设置菜单>偏好文件”>项）。

   

   提示

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

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

   

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

3. 要将设置恢复到默认值，请选择设置旁边的齿轮图标，选择重置设置。

   

   提示

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

4. 你可以在设置编辑器里的标签页切换用户设置和工作区设置。

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

写点代码

VS Code 内置支持 JavaScript、TypeScript、HTML、CSS 等。在本教程中，你将创建一个示例 JavaScript 文件，并使用 VS Code 提供的一些代码编辑功能。

VS Code 支持多种编程语言，下一步你会安装一个语言扩展，以增加对另一种语言（即 Python ）的支持。

1. 在资源管理器视图中，创建一个新文件app.js， 开始输入以下 JavaScript 代码：

   function sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   sayHello('VS Code');
   

   当你输入时，应该会看到弹出的建议，帮助你完成代码（IntelliSense）。你可以用上键和下键导航建议，用Tab键插入选中的建议。

   还要注意代码的格式（语法高亮），帮助你区分代码的不同部分。

   

2. 当你把光标放在弦上时你好，你应该会看到一个灯泡图标，表示有代码作。

   你也可以使用⌃Space（Windows，Linux Ctrl+Space）快捷键打开灯泡菜单。

3. 选择灯泡图标，然后选择转换为模板字符串。

   

   代码作是建议，帮助你对代码应用快速修复。在这种情况下，代码动作会转换“”你好，“+名字映射为模板字符串 “你好，${name}”，这是一种用于嵌入字符串表达式的特殊JavaScript构造。

了解更多关于代码编辑功能、IntelliSense、代码导航和VS Code重构的信息。

使用源代码控制

Visual Studio Code 集成了源代码管理（SCM），并开箱即用 Git 支持。

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

1. 在活动栏中选择源代码控制视图以打开源控视图。

   

2. 确保你的电脑安装了Git。如果你还没安装 Git，在源代码控制视图里会看到一个按钮，可以在你的机器上安装它。

3. 选择初始化仓库以创建新的 Git 仓库。

   

   初始化仓库后，源控制器视图会显示你在工作区中所做的更改。

4. 你可以通过将鼠标悬停在文件上并选择文件旁边来分阶段进行调整。+

   

   提示

   要暂停所有更改，请将鼠标悬停在更改上，选择“暂停所有更改”按钮。

5. 例如，输入提交信息添加hello函数，然后选择提交，将更改提交到你的Git仓库。

   

   提示

   在源控视图中选择“图表”，以显示你 Git 仓库提交历史的可视化表现。

关于VS Code中的源码控制还有很多内容等待我们去发现。获取更多关于VS Code中源码控制的信息。

安装语言扩展

VS Code 拥有丰富的扩展生态系统，允许你向安装添加语言、调试器和工具，以支持你的具体开发工作流程。Visual Studio Marketplace 上有成千上万的扩展。

让我们安装一个语言扩展，以增加对Python或其他你感兴趣编程语言的支持。

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

   扩展视图允许你在 VS Code 内浏览和安装扩展。

   

2. 在扩展视图搜索框中输入 Python 以浏览与 Python 相关的扩展。选择Microsoft发布的Python扩展，然后选择安装按钮。

   

3. 现在，创建一个新的 Python 文件hello.py在你的工作区，开始输入以下 Python 代码：

   def say_hello(name):
       print("Hello, " + name)
   
   say_hello("VS Code")
   

   注意现在你还会收到建议和IntelliSense的Python代码。

   

运行并调试你的代码

VS Code 内置支持运行和调试Node.js应用程序。在这个教程中，你使用上一步安装的Python扩展来调试Python程序。

让我们调试一下hello.py你在前一步创建的程序。

1. 确保你的电脑安装了Python 3。

   如果你的电脑上没有安装Python解释器，你会在窗口右下角看到通知。选择“选择解释器”打开命令调色板，选择你想使用的 Python 解释器或安装一个。

2. 在hello.py文件，将光标放在印刷然后按F9设置断点。

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

   

3. 按 F5 启动调试会话。

   1. 选择 Python 调试器：

      

   2. 选择运行当前的 Python 文件：

      

4. 注意程序启动后，执行停止在你设定的断点。

   

   提示

   检查名称在执行暂停时，在编辑器中将鼠标悬停在变量上方即可。你可以在任何时候在运行和调试视图的变量视图中查看变量的值。

5. 在调试工具栏中按下继续按钮或按F5继续执行。

   

VS Code 还有许多其他调试功能，如观看变量、条件断点和启动配置。深入学习VS Code中调试的细节。

用AI加速你的编码

VS Code 内置支持 GitHub Copilot，这是一款由人工智能驱动的助手，帮助完成代码完成、代码重构、实现新功能等多种任务。

让我们利用基于聊天的AI交互来实现一项新功能，hello.py档案。

1. 确保你已经在VS Code里设置了GitHub Copilot。请按照我们的Copilot设置指南作步骤作。

   提示

   如果你还没有Copilot订阅，可以通过注册Copilot免费计划免费使用Copilot，并获得每月的在线建议和聊天互动限制。

2. 通过在VS Code标题栏中选择聊天>打开聊天，打开聊天视图。

   聊天视图是你可以和AI对话的地方。你可以对代码提问，规划新功能，或者请求实现新功能。

   

3. 在聊天输入框中输入以下提示以实现交互式日历：

   Create a terminal-based interactive calendar in Python that shows the current month and allows users to navigate to previous and next months.
   

4. 按下回车键将提示发送给AI。

   AI会在聊天对话中回复并开始生成代码。你可以查看更改文件列表，编辑器会显示变更的差异。

   

5. 运行生成的代码，查看交互式日历的运行。

   

6. 查看生成的代码，选择保留以接受更改。

7. 进一步尝试，向AI提问，为日历添加更多功能。

想深入了解在VS Code中使用AI，可以试试我们的Copilot QuickStart教程，你可以跟着作教程，帮助你在VS Code中构建第一个AI应用。

下一步

恭喜你！你已经完成了教程，并探索了Visual Studio Code的一些关键功能。现在你已经掌握了Visual Studio Code的基础知识，了解更多关于如何：

• 用AI加速你的编码

• 发现并运行你的代码单元测试

• 使用集成终端

• 搭建远程开发环境