The GitHub Blog

GitHub Copilot app for Beginners: Using the diff, terminal, and browser

7.0内容质量
GitHub Copilot app for Beginners: Using the diff, terminal, and browser

TL;DR · AI 摘要

GitHub Copilot为初学者提供了在diff、终端和浏览器中的使用指南,帮助开发者快速上手AI代码补全工具。

核心要点

  • 在diff视图中,Copilot能根据上下文自动生成代码补全
  • 终端安装命令:npm install -g github-copilot
  • 浏览器端需通过GitHub Codespaces集成使用

结构提纲

按章节快速跳转。

  1. 介绍GitHub Copilot对初学者的价值和适用场景

  2. 展示diff视图中的实时代码补全特性

  3. 详细说明终端安装命令和配置流程

  4. 讲解通过Codespaces实现云端开发环境

  5. 提供快捷键和上下文感知的使用建议

  6. 强调Copilot对提升开发效率的实际帮助

思维导图

用一张图看清主题之间的关系。

查看大纲文本(无障碍 / 无 JS 友好)
  • GitHub Copilot使用指南
    • 安装方式
      • 终端安装
      • VS Code插件
      • 浏览器集成
    • 核心功能
      • diff视图补全
      • 终端代码生成
      • 上下文感知
    • 使用场景
      • 代码编写
      • 调试辅助
      • 学习工具

金句 / Highlights

值得收藏与分享的关键句。

#GitHub Copilot#AI代码生成#开发者工具#前端
打开原文

GitHub Copilot 应用入门:使用差异比较、终端和浏览器 - GitHub 博客

跳过内容跳过侧边栏

[](https://github.com/)/博客

立即体验 GitHub Copilot 应用参加 GitHub Universe

了解 GitHub 生态系统及整个行业在人工智能和机器学习领域的最新动态。

学习如何使用生成式 AI 进行开发。

探索 GitHub Copilot 的使用方式。

开发者需要了解关于大语言模型的所有知识。

机器学习技巧、窍门和最佳实践。

探索 AI 代码生成的功能和优势,以及它如何提升开发体验。

了解更多

为开发者提供技能提升和职业发展的资源。

构建应用的见解和最佳实践。

成为专业开发者的技巧和建议。

提升工作中的 GitHub 使用技巧。

学习如何进入首个专业开发岗位。

了解最新(或重新流行)的技术趋势。

学习如何使用 GitHub 开始构建、发布和维护软件。

了解更多

深入了解我们如何为所有开发者打造一个家园。

探索我们如何在GitHub平台各处提供高性能且高可用的体验。

了解如何在主要远程团队的规模化软件开发中践行最佳实践。

一窥全球领先的AI驱动开发者平台背后的技术架构。

学习我们如何在整个开发者生命周期中将安全性融入每一环节。

了解GitHub为何能成为所有开发者的家园。

我们的工程和安全团队正在开展一些令人瞩目的工作。让我们看看我们如何通过GitHub提升生产力、实现协作开发,并将安全左移。

了解更多

探索如何规模化编写、构建和部署企业级软件。

通过自动化实现更快更安全的交付。

持续集成与交付指南。

提升开发者协作的技巧、工具与实践。

面向企业工程团队的DevOps资源。

如何将安全集成到软件开发生命周期中。

确保构建过程始终保持规范。

了解为何Gartner连续第二年将GitHub定位为AI代码助手魔力象限的领导者。

了解更多

持续关注GitHub内部的重要动态与最新消息。

深入了解GitHub的新闻动态与产品更新。

GitHub平台、产品和工具的最新动态。

GitHub上开源生态的深度洞察。

软件领域最新政策和监管变化。

围绕开发者生态系统的数据驱动洞察。

GitHub 早期新闻和更新。

学习如何使用检索增强生成(RAG)技术获取更多洞察。

了解更多

GitHub 上所有开源相关内容。

最新的 Git 更新。

聚焦开源项目维护者。

开源如何推动积极变革。

探索 GitHub 上的开源游戏。

全球组织正在将开源方法论融入自身软件构建和交付流程。

了解更多

获取所有安全领域最新动态。

详解应用安全。

解析供应链安全。

GitHub 安全实验室最新动态。

Web 应用安全实用技巧。

了解 DevSecOps 核心挑战,以及如何通过 AI 和自动化开始应对。

了解更多

搜索

分类

了解 GitHub 生态系统及更广泛行业的人工智能和机器学习相关内容。

学习如何使用生成式 AI 进行开发。

重新认识 GitHub Copilot 的使用方式。

开发者需要了解的所有关于 LLMs 的知识。

机器学习技巧、窍门和最佳实践。

探索AI代码生成的能力和优势,以及它如何提升开发者的体验。

了解更多

帮助开发者提升技能和职业发展的资源。

构建应用的最佳实践和洞察。

成为专业开发者的技巧与建议。

提升在工作中使用GitHub的效率。

学习如何进入首个职业角色。

了解最新动态(或重新流行的技术)。

学习如何使用GitHub构建、发布和维护软件。

了解更多

深入了解我们如何为所有开发者打造家园。

了解我们如何在GitHub平台各处提供高性能且高可用的体验。

探索如何在远程团队主导的环境下实现规模化软件开发的最佳实践。

了解支撑全球领先AI驱动开发者平台的技术基础。

学习我们如何在开发者生命周期的每个环节构建安全性。

了解GitHub为何能成为所有开发者的家园。

我们的工程和安全团队正在做出卓越的工作。让我们看看我们如何使用GitHub提升生产力、协作开发并实现安全左移。

了解更多

探索如何规模化编写、构建和部署企业软件。

通过自动化实现更快更安全的交付。

持续集成和交付指南。

提升开发者协作的技巧、工具和窍门。

面向企业工程团队的 DevOps 资源。

如何将安全集成到软件开发生命周期中。

确保构建过程始终保持整洁。

了解为何 Gartner 连续第二年将 GitHub 评为该领域的领导者。

了解更多

持续关注 GitHub 最新动态与重要资讯。

深入了解 GitHub 的新闻与产品更新。

GitHub 平台、产品和工具的最新动态。

GitHub 上开源生态的深度洞察。

软件领域最新政策与监管变化。

围绕开发者生态的数据驱动型洞察。

GitHub 早期新闻与更新内容。

学习如何通过检索增强生成(RAG)技术获取更多洞察。

了解更多

GitHub 上所有开源相关内容。

Git 的最新更新。

聚焦开源项目维护者。

开源如何推动积极的社会变革。

探索 GitHub 上的开源游戏。

全球组织正在将开源方法论融入自身软件构建与发布流程。

了解更多

及时掌握所有安全相关动态。

全面解析应用安全。

深入解读供应链安全。

GitHub Security Lab 的最新动态。

关于保护 Web 应用的实用建议。

了解 DevSecOps 的核心挑战,以及如何通过 AI 和自动化开始应对这些挑战。

了解更多

参加 GitHub Universe试用 GitHub Copilot 应用

首页/人工智能与机器学习/GitHub Copilot

GitHub Copilot 应用入门:使用差异视图、终端和浏览器

检查代理生成的代码通常意味着在多个标签页之间切换。学习如何在 GitHub Copilot 应用中并排查看差异、运行终端命令和预览 Web 应用。

图片 14:GitHub Copilot 应用入门:停止切换标签页视频 2

[Kayla Cinnamon](https://github.blog/author/cinnamonmsft/ "Kayla Cinnamon 的文章")·@cinnamon-msft

2026 年 9 月 10 日

| 3 分钟

  • 分享:
  • [](https://x.com/share?text=GitHub%20Copilot%20app%20for%20Beginners%3A%20Using%20the%20diff%2C%20terminal%2C%20and%20browser&url=https%3A%2F%2Fgithub.blog%2Fai-and-ml%2Fgithub-copilot%2Fgithub-copilot-app-for-beginners-using-the-diff-terminal-and-browser%2F)
  • [](https://www.facebook.com/sharer/sharer.php?t=GitHub%20Copilot%20app%20for%20Beginners%3A%20Using%20the%20diff%2C%20terminal%2C%20and%20browser&u=https%3A%2F%2Fgithub.blog%2Fai-and-ml%2Fgithub-copilot%2Fgithub-copilot-app-for-beginners-using-the-diff-terminal-and-browser%2F)
  • [](https://www.linkedin.com/shareArticle?title=GitHub%20Copilot%20app%20for%20Beginners%3A%20Using%20the%20diff%2C%20terminal%2C%20and%20browser&url=https%3A%2F%2Fgithub.blog%2Fai-and-ml%2Fgithub-copilot%2Fgithub-copilot-app-for-beginners-using-the-diff-terminal-and-browser%2F)

当代理对您的代码进行修改时,您希望审查代码、运行代码并查看更改内容。好消息是,现在您可以在不离开 GitHub Copilot 应用 的情况下完成这三项操作。

以前,完成这三项任务需要在编辑器、终端窗口和 Web 浏览器之间来回切换。但现在,当这些步骤作为内置面板并排显示在 Copilot 应用中时,检查代理的工作变得简单。

让我们逐步了解应用中的每个面板及其如何帮助我们完成 AI 编码循环。

使用差异面板审查更改

差异面板(差异是指更改前后的比较)会精确显示哪些行被添加、删除或修改,新增内容以绿色高亮,删除内容以红色显示。

这能让你完全清楚发生了什么,从而做出选择。你可以接受更改、添加评论,或要求 Copilot 进行修改。你拥有完全的控制权,并最终决定如何处理。

在终端面板中运行命令

阅读代码很好,但运行代码更好。你可以在 Copilot 应用的终端面板中直接在会话中运行命令。如果看起来有些令人望而生畏,不用担心。你大部分时间只是在运行项目本身的命令并查看结果。

你可以手动运行代码,也可以通过 运行 按钮将其配置为脚本。假设你正在开发一个网站,以下是具体操作示例:

  • 添加 dev server 脚本,该脚本会打开客户端文件夹并运行 npm run dev
  • 点击 运行 启动网站服务器。

你可以同时打开多个终端窗口,从而在不同窗口之间切换并持续运行命令。

在浏览器面板中使用“选择与优化”工具

对于任何具有用户界面的内容,浏览器面板都能形成完整闭环。以我们的网站示例来说:通过此面板,你可以打开它并像真实用户一样测试新功能。

如果你想持续迭代,可以使用 选择与优化 工具选择元素并让代理进行调整。

要查看修复效果,可以在完成修改后再次运行 dev server 脚本。

完成 AI 代码审查闭环

现在你已审查了差异,通过终端启动了项目,在浏览器中进行了审查,并通过迭代使功能达到可用状态。当达到预期效果后,你可以直接通过 Copilot 应用接受更改并创建拉取请求。从单一位置完成这一闭环意味着无需在多个标签页之间切换、切换应用或担心丢失进度。

将审查、运行和预览功能并排使用,正是让代理生成的更改显得安全而非可怕的关键,因为你可以证明所合并的内容确实按预期工作。

将这些方法带入你的工作流程

这些内置面板能回答你在接受代理工作前应始终提出的三个重要问题。

  • 什么内容发生了变化?
  • 它能正常运行吗?
  • 它_实际上_能正常工作吗?

在接受代理生成的代码前,依次检查这些问题列表,有助于你理解发生了哪些更改以及是否按你期望的方式运行,从而始终保持控制权。 Image 15: ✨

尝试使用 GitHub Copilot 应用 >

  • * *

标签:

作者

Image 16: Kayla Cinnamon
Image 16: Kayla Cinnamon

[Kayla Cinnamon](https://github.blog/author/cinnamonmsft/)

@cinnamon-msft

高级 AI 开发工具倡导者

目录

更多关于 [GitHub Copilot](https://github.blog/tag/github-copilot/)

[使用 Copilot 将 GitHub Copilot 运行时迁移到 Rust](https://github.blog/ai-and-ml/generative-ai/migrating-the-github-copilot-runtime-to-rust-using-copilot/)

在引入代理之前,这种规模的重写是无法承担的。以下是将 Copilot 代理运行时迁移至 800,000 行生产级 Rust 代码的实际过程。

[Stephen Toub](https://github.blog/author/stephentoub/ "Stephen Toub 的文章")

[营销运营即代码:在 GitHub 上从活动规划到后续跟进的自动化](https://github.blog/ai-and-ml/github-copilot/marketing-ops-as-code-automating-events-from-planning-to-follow-up-on-github/)

如果你能写出自己工作的方式,就可以实现自动化。以下是我在支持 GitHub 亚太区营销团队时采取的措施。

[Tomoko Tanaka](https://github.blog/author/tomokota/ "Tomoko Tanaka 的文章")

相关文章

图片 17:Copilot 出现在装饰性背景上,周围散落着绿色方块。
图片 17:Copilot 出现在装饰性背景上,周围散落着绿色方块。

AI & ML

[使用 Copilot 将 GitHub Copilot 运行时迁移到 Rust](https://github.blog/ai-and-ml/generative-ai/migrating-the-github-copilot-runtime-to-rust-using-copilot/)

在引入代理之前,这种规模的重写是无法承担的。以下是将 Copilot 代理运行时迁移至 800,000 行生产级 Rust 代码的实际过程。

[Stephen Toub](https://github.blog/author/stephentoub/ "Stephen Toub 的文章")

图片 18:装饰性背景上,两个 Copilot 人物在抽象的绿色和半透明方块间移动。
图片 18:装饰性背景上,两个 Copilot 人物在抽象的绿色和半透明方块间移动。

AI & ML

[营销运营即代码:在 GitHub 上从活动规划到后续跟进的自动化](https://github.blog/ai-and-ml/github-copilot/marketing-ops-as-code-automating-events-from-planning-to-follow-up-on-github/)

如果你能写出自己工作的方式,就可以实现自动化。以下是我在支持 GitHub 亚太区营销团队时采取的措施。

[Tomoko Tanaka](https://github.blog/author/tomokota/ "Tomoko Tanaka 的文章")

图片 19:研究预览:HydraFusion。GitHub Copilot 中的高级运行时模型编排。
图片 19:研究预览:HydraFusion。GitHub Copilot 中的高级运行时模型编排。

AI & ML

[项目 HydraFusion:通过多模型编排实现前沿质量](https://github.blog/ai-and-ml/github-copilot/project-hydrafusion-frontier-quality-via-multi-model-orchestration/)

在受控的离线评估中,HydraFusion 的选择性编码工作流与评估的 Opus 5 基线相当或超越,同时降低了预估的工作流成本。现在作为研究预览功能在 GitHub Copilot 中提供。

[GitHub 团队](https://github.blog/author/staff/ "GitHub 团队的文章")

在 GitHub 上探索更多内容

图片 20:文档
图片 20:文档

文档

掌握 GitHub 所需的一切,尽在一处。

前往文档

图片 21:GitHub
图片 21:GitHub

GitHub

在 GitHub 上构建未来,这里是任何人都能从任何地方构建任何事物的地方。

立即开始构建

Image 22: Customer stories
Image 22: Customer stories

客户案例

认识使用 GitHub 构建产品的公司和工程团队。

了解更多

Image 23: GitHub Universe 2026
Image 23: GitHub Universe 2026

GitHub Universe 2026

10 月 28-29 日,欢迎加入我们在旧金山或在线举办的 GitHub Universe 主题开发者大会,这是一场汇聚开发者、代理和全球代码的盛会。

立即注册

我们也做电子报

在专为开发者打造的双周刊电子报中,获取技巧、技术指南和最佳实践。

您的电子邮件地址

*您的电子邮件地址

订阅

  • [x] 请允许 GitHub 及其关联公司使用我的信息进行个性化沟通、定向广告和营销效果分析。详见 GitHub 隐私声明

订阅

全站链接

[](https://github.com/)

产品

平台

支持

公司

  • © 2026 GitHub, Inc.
  • 条款
  • 隐私
  • 管理 Cookie
  • 不分享我的个人信息

Image 24×

Image 25
Image 25