Skip to content

Instantly share code, notes, and snippets.

@ambar
Last active March 23, 2024 04:31
Show Gist options
  • Save ambar/8f2428756a5a0c12db990782ee4c9711 to your computer and use it in GitHub Desktop.
Save ambar/8f2428756a5a0c12db990782ee4c9711 to your computer and use it in GitHub Desktop.
Copilot Pair Programming

Copilot

品牌

  • GH Copilot
    • Copilot Chat (Editor/Github.com)
    • Copilot in the CLI
    • Copilot Enterprise (Github.com 聊天/PR 摘要)
  • MS Copilot
    • Bing Chat -> Copilot
    • Cortana -> Copilot
    • Office/Windows/iOS/Android

界面

  • 状态菜单:右下角状态栏中,可以配置对当前文件类型的 Copilot 禁用/启用状态(例如 Markdown 文件默认禁用,你可能想要启用它)
  • 聊天:三种形式为内联提示/会话弹层/侧边栏会话,不同形式支持的指令不一样
  • 闪光图标:点击触发内联提示
  • 拖放会话:侧边栏会话可以拖放到底栏或右侧栏

快捷键

  • ctrl + enter: 多版本提示 vs 即时单次提示(ghost text)
  • opt + [opt + ]: 下一个版本提示/上一个版本提示
  • tab: 全部完成
  • cmd + right arrow: 部分完成
  • cmd + i: 内联提示,选区指令
  • shift + cmd + i: 会话弹层
// 光标停留在代码末尾,会出现影子文本(快捷键作用于所有影子文本,包括注释/句子,不仅仅是代码)
// 按 tab 全部采用,按 cmd + right arrow 部分采用(按词)
// 按 opt + ]  or opt + [ 循环下一个版本/上一个版本
const memo = (fn, cache = new Map()) =>

// 选中下面一行,按 ctrl + enter 可以生成多个版本的实现
const memo = (fn, cache = new Map()) => {}

提示

mindmap
  root{{提示}}
    新建
    自动完成
    头脑风暴
    迭代
    答疑
    重构
    测试
Loading

/ 快捷指令

  • /explain 解释选择的代码
  • /tests 为选择的代码生成单元测试
  • /fix 针对所选代码中的问题提出修复建议
  • /doc 为所选代码生成文档
  • /new 创建新工作区的脚手架代码
  • /newNotebook 创建 Jupyter Notebook
  • /api 询问有关 VS Code 扩展开发的问题
  • /help 帮助(显示所有可用指令)
  • /clear 开启新对话

@ 对话对象

限制对话场景或主题

  • @vscode VS Code 本身相关问题
  • @workspace 工作区相关问题
  • @terminal 终端相关问题

# 上下文(会话专有)

  • #selection 切换上下文,相当于回到内联对话
  • #editor 限制在所有打开的文件中
  • #file 指定某个具体的文件(需要在侧边栏会话中使用)
  • #terminalLastCommand 最后一次在终端中运行的命令
  • #terminalSelection 终端选中的文本

组合示意

@x /y #z: 

  • @workspace /tests #file:foo.js
  • @workspace /fix #terminalSelection 

使用模式

  • 注释生成代码、函数名生成代码:越具体越有效
  • 代码生成文档:generate markdown doc
  • Q&A 模式:行内结果返回快于会话模式,可自定义角色
  • 重构:例如语言类型转换(change to ts), 结构转换(change to fc,没错 Copilot 懂 React 黑话)等等
  • 数据预处理:例如从 CSV 生成 JSON
  • 翻译:由提示翻译句子,或者由 i18n 模板文件批量翻译
  • 减少工作区打开的文件数量

比较:

// 如何居中元素?
// q: FlatList 如何向前加载?
// Roles: copilot
//   20 年经验的前端开发专家
// Role: me
//   初入门的开发者
//

// me: 怎么迭代 NodeList?

Copilot in the CLI

终端版本刚刚进入 GA 阶段,尽管在 VSCode 中终端也得到相同的提示结果,但脱离编辑器使用更为方便。

安装:

brew install gh
gh auth login
gh extension install github/gh-copilot
gh copilot --help

# 可选,配置别名简化使用
echo 'eval "$(gh copilot alias -- zsh)"' >> ~/.zshrc
ghcs # = gh copilot suggest
ghce # = gh copilot explain
# 更进一步简化
echo 'alias ??="ghcs"' >> ~/.zshrc

示例:

ghcs "提取主分支的 src/Toolbar.tsx"
ghcs "计算 src 目录所有文件的行数"
?? "转换当前目录所有图片的尺寸,宽度为 200"
?? "mp4 转 wave, 24K 采样率,单通道"

局限

https://docs.github.com/en/copilot/github-copilot-chat/about-github-copilot-chat#limitations-of-github-copilot-chat

意外案例

  • change to fc (function component):可能造成代码丢失

经验:

  • 先写测试代码
  • 越少的转换步骤越好

同类产品

指南

// 光标停留在代码末尾,会出现影子文本(快捷键作用于所有影子文本,包括注释/句子,不仅仅是代码)
// 按 tab 全部采用,按 cmd + right arrow 部分采用(按词)
// 按 opt + ] or opt + [ 循环下一个版本/上一个版本
const memo = (fn, cache = new Map()) =>
// 选中下面一行,按 ctrl + enter 可以生成多个版本的实现
const memo = (fn, cache = new Map()) => {}
// 如何居中元素?
// Roles: copilot
// 20 年经验的前端开发专家
// Role: me
// 初入门的开发者
//
// me: 怎么迭代 NodeList?
// q: FlatList 如何向前加载?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment