在 VS Code 中开始使用 GitHub Copilot

GitHub Copilot改变了你在Visual Studio Code中编写代码的方式。在这个实践教程中，你将构建一个完整的任务管理网络应用程序，同时探索VS Code的AI功能：智能的即时建议、通过智能体自主功能开发、精准编辑与即时聊天、集成智能操作以及强大的自定义选项。

通过本教程，你将拥有一个可以运行的网络应用程序和一个根据你的开发风格定制的AI编码环境。

创建示例应用程序

使用 VS Code 中的聊天功能一次性生成示例应用程序。

先决条件

VS Code 已安装在您的机器上。从 Visual Studio Code 网站下载。
访问 GitHub Copilot。请按照以下步骤操作以在 VS Code 中设置 GitHub Copilot。

小贴士
如果您没有 Copilot 订阅，您可以直接在 VS Code 内注册使用 Copilot 免费版，并获得每月有限的内联建议和聊天互动。

步骤 1：体验内联建议

AI驱动的实时建议在您输入时出现，帮助您更快、更准确地编写代码。让我们开始构建您的任务管理器基础。

为您的项目创建一个新文件夹，并在 VS Code 中打开它。
创建一个名为的新文件index.html输入：.
开始输入以下内容，并在输入时，VS Code 提供内联建议（幽灵文本）：
```
<!DOCTYPE html>
```
您可能会看到不同的建议，因为大型语言模型是不确定的。
按 Tab 键接受建议。

恭喜！您刚刚接受了第一个由人工智能驱动的实时建议。
继续构建你的HTML结构。在<body>标签，开始输入：
```
<div class="container">
    <h1>我的任务管理器</h1>
    <form id="task-form">
```
注意 VS Code 在你构建应用程序结构时继续建议相关的 HTML 元素。
如果你看到多个建议，请将鼠标悬停在虚线文本上以查看导航控件，或者使用⌥]（Windows, Linux Alt+]）和⌥[（Windows, Linux Alt+[）来切换选项。

内联建议在您键入时自动工作，从您的模式和项目的上下文中学习。它们特别有助于编写模板代码、HTML结构和重复的模式。

步骤 2：与智能体一起构建完整的功能

AI代理是VS Code最强大的AI功能。给定一个自然语言提示，它们能够自主规划并在多个文件中实现复杂功能。让我们使用它们来创建你的任务管理器应用程序的核心功能。

按 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 或者在 VS Code 标题栏中选择聊天图标来打开聊天视图。

聊天视图是通过使用自然语言提示与AI互动的地方。您可以进行持续的对话，并逐步优化您的请求以获得更好的结果。
选择 智能体 在智能体下拉菜单中，让AI独立地从头到尾实现您的请求。
重要
如果你没有看到代理选项，请确保在 VS Code 设置中启用了代理 (
聊天代理启用
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
ORG)。您的组织可能也已禁用代理 - 请联系您的管理员启用此功能。
输入以下提示并按回车。助手分析您的请求并开始实施解决方案。
```
创建一个完整的任务管理器网络应用程序，具有添加、删除和标记任务为完成的功能。包括现代CSS样式并使其响应式。使用语义HTML并确保其可访问性。将标记、样式和脚本分开到各自的文件中。
```
观看代理生成实现您的请求所需的文件和代码。您应该会看到它更新index.html文件，创建一个styles.css文件用于样式，和一个脚本.js文件用于功能。

小贴士
不同的语言模型可能有不同的优势。在聊天视图中使用模型下拉菜单在语言模型之间切换。
审查生成的文件并选择保留以接受所有更改。
打开你的index.html 在集成浏览器 VS Code 中右键单击文件并选择预览。您可以添加任务、标记为已完成并删除它们。
现在，让我们添加一个额外的功能。在聊天输入框中输入以下提示：
```
添加一个带有按钮的过滤系统，以显示所有任务、仅已完成的任务或仅待办的任务。更新样式以匹配现有设计。
```
注意代理如何协调在多个文件中进行更改，以完全实现此功能。

Agents在理解高级需求并将其转化为可运行代码方面表现出色。他们非常适合实现新功能、重构大量代码或从头开始构建整个应用程序。

步骤 3：使用内联聊天进行精确调整

当代理处理大型功能时，编辑器内联聊天非常适合对文件中特定代码部分进行有针对性的改进。让我们用它来增强任务管理器应用程序。

打开你的JavaScript文件，找到添加新任务的代码。
选择代码块，然后按⌘I（Windows, LinuxCtrl+I）以打开编辑器内联聊天。

注意
确切的代码可能会有所不同，因为大型语言模型是不确定的。
输入以下提示：
```
添加输入验证以防止添加空任务，并从任务文本中修剪空白。
```
注意如何将内联聊天具体聚焦在所选代码上，并进行有针对性的改进。
查看更改并选择保留以应用。

内联编辑器聊天是进行小而专注的更改的理想选择，而不会影响更广泛的代码库，例如添加错误处理、重构单个函数或修复错误。

步骤 4：个性化您的 AI 体验

定制聊天使其更好地满足您的特定需求和编码风格。您可以设置自定义指令并构建专用的自定义代理。让我们为您的项目创建一个完整的个性化设置。

创建自定义说明

自定义指令告知AI您的编码偏好和标准。这些规则会自动应用于所有聊天互动。

创建一个名为的新文件夹.github在你的项目根目录。
在...里面.github文件夹，创建一个名为的文件Copilot指令.md输入：.

添加以下内容：

# 项目通用编码指南

## 代码风格
- 使用语义化的 HTML5 元素（header, main, section, article 等）
- 倾向于使用现代 JavaScript（ES6+）特性，如 const/let、箭头函数和模板字符串

## 命名约定
- 组件名称、接口和类型别名使用PascalCase
- 变量、函数和方法使用camelCase
- 私有类成员前缀为下划线 (_)
- 常量使用ALL_CAPS

## 代码质量
- 使用有意义的变量和函数名称，清楚地描述它们的目的
- 为复杂的逻辑包含有用的注释
- 为用户输入和 API 调用添加错误处理

保存文件。这些说明现在适用于此项目中的所有聊天互动。
通过让代理添加新功能来测试自定义指令：
```
在任务管理器中添加一个深色模式切换按钮。
```
注意生成的代码遵循了您指定的指南。VS Code 支持更高级的自定义指令，例如对特定文件类型应用指令。

小贴士

使用/初始化在聊天中使用斜线命令，根据项目的结构和编码模式自动生成定制说明。这在你已经有现有的代码库并希望为AI辅助做好准备时非常有用。

创建用于代码审查的自定义代理

自定义代理为特定任务创建专门的AI角色。让我们创建一个“代码审查员”代理，专注于代码分析和提供反馈。在自定义代理定义中，您可以定义AI的角色、具体指南以及它可以使用的工具。

打开命令面板并运行聊天：新建自定义代理命令。
选择.github/agents作为地点。

此选项将自定义代理添加到您的工作区，以便其他团队成员在打开项目时可以使用它。
将自定义代理命名为“Reviewer”。这将创建一个名为的新文件评论者.代理.md在.github/agents文件夹。

将文件内容替换为以下内容。请注意，此自定义代理不允许代码更改。

---
名称: 'Reviewer'
描述: '审查代码以确保质量和遵守最佳实践。'
工具: ['vscode/askQuestions', 'vscode/vscodeAPI', 'read', 'agent', 'search', 'web']
---
# 代码审查剂

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## 重要指南
- 在适当的时候询问有关设计决策的澄清问题
- 专注于解释应该更改什么以及为什么
- 不要直接编写或建议具体的代码更改

保存文件。在聊天视图中，您现在可以从代理选择器中选择此自定义代理。
通过选择 Reviewer 从代理选择器中并输入以下提示来测试您的自定义代理：
```
查看我的完整项目
```
注意，现在人工智能像代码审查员一样进行分析并提供改进建议。

步骤 5：使用智能操作来利用预构建的 AI 助手

智能操作在 VS Code 的界面中直接提供 AI 功能，无缝地集成到您的开发流程中。与聊天互动不同，智能操作在您最需要的上下文中出现。让我们以生成提交信息为例进行探索。

打开源代码管理视图，按⌃⇧G（Windows, Linux Ctrl+Shift+G）或在活动栏中选择源代码管理图标。
如果你还没有为项目初始化Git仓库，请在源代码控制视图中选择初始化仓库。
通过选择您要提交的文件旁边的+按钮来暂存您的更改。
选择闪烁图标以根据您已暂存的更改生成提交信息。

人工智能分析您的阶段更改，并生成一个符合传统提交标准的描述性提交信息。人工智能考虑：
- 哪些文件被更改了
- 变化的性质（新增功能、错误修复、代码重构）
- 修改的范围和影响
查看生成的消息。如果你满意，继续进行提交。如果你需要不同的风格或重点，再次选择闪亮图标以生成替代消息。

智能操作如提交信息生成展示了 AI 如何自然地整合到您的现有工作流程中，而无需您切换到聊天界面。VS Code 还有许多其他智能操作，可以帮助您进行调试、测试等。

下一步

恭喜！您已经创建了一个完整的任务管理应用程序，并学习了如何在 VS Code 的核心功能中与 AI 有效合作。

您可以通过探索其他自定义选项来进一步增强您的AI的能力：

添加更多针对不同任务（如规划、调试或文档）的专用智能体。
为特定的编程语言或框架创建自定义指令。
通过MCP（模型上下文协议）服务器或VS Code扩展额外工具来扩展AI的能力。