GitHub Copilot 在 VS Code 中的入门指南

GitHub Copilot 改变了您在 Visual Studio Code 中编写代码的方式。在本实践教程中，您将构建一个完整的任务管理 Web 应用程序，同时探索 VS Code 的 AI 功能：能够跨多个文件实现功能的自主代理、智能内联建议、通过内联聊天进行的精确编辑、集成智能操作以及强大的自定义选项。

通过本教程，您将获得一个可运行的 Web 应用程序，以及一个能够适应您开发风格的个性化 AI 编码环境。

创建示例应用程序

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

先决条件

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

提示
如果您没有 Copilot 订阅，可以直接在 VS Code 中注册免费使用 Copilot，并获得每月内联建议和聊天交互的额度限制。

第一步：体验内联建议

AI 驱动的内联建议会在您输入时出现，帮助您更快地编写代码并减少错误。让我们开始构建任务管理器的基础。

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

恭喜！您刚刚接受了您的第一个 AI 驱动的内联建议。
继续构建您的 HTML 结构。在 <body> 标签内，开始输入
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
请注意，当您构建应用程序结构时，VS Code 会持续建议相关的 HTML 元素。
如果您看到多个建议，可以将鼠标悬停在虚影文本上以查看导航控件，或者使用 ⌥] (Windows, Linux Alt+]) 和 ⌥[ (Windows, Linux Alt+[) 在选项之间循环切换。

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

第二步：使用代理构建完整功能

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

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

聊天视图是您使用自然语言提示与 AI 交互的地方。您可以进行持续对话，并迭代优化您的请求以获得更好的结果。
在代理下拉菜单中选择 Agent，让 AI 独立地端到端实现您的请求。

重要
如果您没有看到代理选项，请确保在您的 VS Code 设置中启用了代理（ chat.agent.enabled 在 VS Code 中打开在 VS Code Insiders 中打开此设置在组织级别管理。请联系您的管理员进行更改。）。您的组织可能也禁用了代理功能——请联系您的管理员以启用此功能。
输入以下提示并按 Enter 键。代理将分析您的请求并开始实现解决方案。
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
观察代理如何生成必要的文件和代码来满足您的请求。您应该会看到它更新了 index.html 文件，创建了一个用于样式的 styles.css 文件，以及一个用于功能的 script.js 文件。

提示
不同的语言模型可能具有不同的优势。使用聊天视图中的模型下拉菜单可以在不同语言模型之间切换。
查看生成的代码文件，并选择 Keep（保留） 以接受所有更改。
右键点击文件并选择 Show Preview（显示预览），在 VS Code 的集成浏览器中打开您的 index.html 文件。您可以添加任务、将其标记为完成并删除它们。
现在，让我们添加一个额外功能。在聊天输入框中输入以下提示
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
请注意代理如何协调多个文件之间的更改以完整地实现此功能。

代理擅长理解高级需求并将其转化为可运行的代码。它们非常适合实现新功能、重构大段代码或从头开始构建整个应用程序。

第三步：使用内联聊天进行精确调整

虽然代理可以处理大型功能，但编辑器内联聊天非常适合对文件内的特定代码段进行针对性改进。让我们使用它来增强任务管理应用。

打开您的 JavaScript 文件并定位到添加新任务的代码。
选择代码块，然后按 ⌘I (Windows, Linux Ctrl+I) 以打开编辑器内联聊天。

注意
确切的代码可能会有所不同，因为大语言模型具有非确定性。
输入以下提示
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
请注意内联聊天如何专门针对所选代码进行操作并进行有针对性的改进。
查看更改并选择 Keep（保留） 以应用它们。

编辑器内联聊天非常适合进行小范围、有针对性的更改，而不会影响更广泛的代码库，例如添加错误处理、重构单个函数或修复错误。

第四步：个性化您的 AI 体验

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

创建自定义指令

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

在您的项目根目录下创建一个名为 .github 的新文件夹。
在 .github 文件夹内，创建一个名为 copilot-instructions.md 的文件。

添加以下内容

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

保存文件。这些指令现在适用于您在此项目中的所有聊天交互。
通过要求代理添加新功能来测试这些自定义指令
```
Add a dark mode toggle button to the task manager.
```
请注意生成的代码如何遵循您指定的准则。VS Code 支持更高级的自定义指令，例如针对特定文件类型应用指令。

提示

在聊天中使用 /init 斜杠命令，根据您项目的结构和编码模式自动生成自定义指令。如果您有一个现有的代码库并希望为其准备 AI 辅助，这将非常有用。

为代码审查创建自定义代理

自定义代理可以为特定任务创建专门的 AI 人格。让我们创建一个专注于分析并提供代码反馈的“代码审查员（Code Reviewer）”代理。在自定义代理定义中，您可以定义 AI 的角色、特定准则以及它可以使用哪些工具。

打开命令面板并运行 Chat: New Custom Agent（聊天：新建自定义代理） 命令。
选择 .github/agents 作为位置。

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

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

---
name: 'Reviewer'
description: 'Review code for quality and adherence to best practices.'
tools: ['vscode/askQuestions', 'vscode/vscodeAPI', 'read', 'agent', 'search', 'web']
---
# Code Reviewer agent

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

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

保存文件。在聊天视图中，您现在可以从代理选择器中选择此自定义代理。
通过从代理选择器中选择 Reviewer 并输入以下提示来测试您的自定义代理
```
Review my full project
```
请注意 AI 现在如何表现得像一名代码审查员，提供分析和改进建议。

第五步：使用智能操作获取预构建的 AI 辅助

智能操作（Smart actions）提供了直接集成在 VS Code 界面中的 AI 功能，可无缝融入您的开发工作流。与聊天交互不同，智能操作会根据上下文在您最需要的地方出现。让我们以提交消息生成为例进行探索。

通过按 ⌃⇧G (Windows, Linux Ctrl+Shift+G) 或选择活动栏中的源代码管理图标，打开 源代码管理（Source Control） 视图。
如果您尚未为项目初始化 Git 存储库，请通过在源代码管理视图中选择 Initialize Repository（初始化存储库） 来完成操作。
通过选择要提交的文件旁边的 + 按钮来暂存您的更改。
选择 闪烁图标（sparkle icon），根据您暂存的更改生成提交消息。

AI 会分析您暂存的更改并生成符合常规提交标准（conventional commit standards）的描述性提交消息。AI 会考虑：
- 修改了哪些文件
- 更改的性质（添加功能、错误修复、重构）
- 修改的范围和影响
查看生成的消息。如果您满意，请继续进行提交。如果您想要不同的风格或重点，请再次选择闪烁图标以生成替代消息。

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

后续步骤

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

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

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