diff --git a/.dockerignore b/.dockerignore index 4827b05..c612943 100644 --- a/.dockerignore +++ b/.dockerignore @@ -5,6 +5,7 @@ node_modules package-lock.json pnpm-lock.yaml yarn.lock +dist .DS_Store .cache diff --git a/README.md b/README.md index 4cf9502..79d46f0 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ Quick Reference [Oracle](./docs/oracle.md) [Pytorch](./docs/pytorch.md) [Vue 3](./docs/vue.md) +[Github Copilot](./docs/github-copilot.md) ## 编程 diff --git a/assets/github-copilot.svg b/assets/github-copilot.svg new file mode 100644 index 0000000..2ac161c --- /dev/null +++ b/assets/github-copilot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/github-copilot.md b/docs/github-copilot.md new file mode 100644 index 0000000..78ae7b0 --- /dev/null +++ b/docs/github-copilot.md @@ -0,0 +1,596 @@ +Github Copilot 备忘清单 +=== + +这是开始使用 [Github Copilot](https://code.visualstudio.com/docs/editor/github-copilot) 的快速参考指南。 + +\* 校对、错误请指正。📮邮箱: jussker@outlook.com + +一、准备工作 +---- + +### 1、账号注册 + +> 需要先拥有一个Github账号,并订阅Copilot。 + +事项 | 说明 +:-|- +Github 账号 | [注册地址](https://github.com/signup) +订阅 Github Copilot | [订阅地址](https://github.com/features/copilot) + +### 2、安装Vscode插件 + + +> 在扩展商店中搜索安装下面插件 + +插件名称 | 功能 +:-|- +`GitHub Copilot`|编辑器中进行代码补全提示 +`GitHub Copilot Chat`|插件栏可以与copilot对话 + +### 3、Vscode 中登陆 Github 账号 + + +- 安装后,点击右下角的 `GitHub Copilot` 插件图标,然后点击 `Sign in to GitHub` 登陆。 +- 或者,点击工具栏中的 `Accounts` 图标,然后点击 `使用 Github 登陆以使用Github Copilot` 进行登陆。 + +### 4、Copilot 订阅方案 + +方案 | 价格 | 特性 +:-|-|- +Copilot Individual | 10美元/人/月
(学生, 教师, 开源项目贡献者 免费) | 代码补全, 聊天机器人 +Copilot Business| 19美元/人/月 |代码补全, 聊天机器人, 命令行工具, 安全漏洞筛查, 代码参考, 公共代码筛查, 知识产权, 企业安全与隐私保障 +Copilot Enterprise| 39美元/人/月 | Business 特性 + 私有代码库的个性化聊天 + 文档搜索总结 + Git Pull Request 摘要 + 代码审查 + 模型微调 + + +### 5、Copilot 使用入口 + +|名称 | 描述 | +|-|-| +Inline Suggestions| 在编辑器中紧邻光标所在位置显示建议 +Completions Panel| 在编辑器中展示完整的建议列表 +Inline Chat| 在编辑器中紧邻光标所在位置发起对话 +Editor Chat| 在编辑器中打开完整的对话界面 +Silde Chat| 在编辑器的侧边栏打开对话界面 +Quick Chat| 在顶部唤起对话界面 + +二、提示技巧 +---- + +### 提示之禅 + + +> 你与 `copilot` 之间的关系,就是作家和插画师的关系。 +> 你只有尽可能的全面、干练、清晰的描述你的故事(即 `上下文`)。 +> `copilot` 才能根据你的故事画出精美的插画 (即 `代码` )。 + +### 提示技巧 + + +- 1⃣️ 提供上下文信息 +- 2⃣️ 上下文可被预测 + +### 实战教程 + +- [Youtube GitHub Copilot Series](https://www.youtube.com/playlist?list=PLj6YeMhvp2S5_hvBl2SE-7YCHYlLQ0bPt) +- [Pragmatic techniques to get the most out of GitHub Copilot](https://www.youtube.com/watch?v=CwAzIpc4AnA) +- [How I used GitHub Copilot to build a browser extension](https://github.blog/2023-05-12-how-i-used-github-copilot-to-build-a-browser-extension/) + +### 上下文信息的种类 + + +类型|说明 +-|- +文件|Copilot会查看编辑器中当前和紧邻打开的文件。 +注释|Copilot会根据紧邻的注释,为你的代码提供帮助和建议。如 docstring, 块注释, 行注释之类。 +命名|良好的命名能帮助Copilot更好地理解你的代码,如函数名, 变量名, 文件名等 +代码|Copilot会查看你的代码和它附近的代码,以生成帮助你的建议。 + + +### 上下文:文件 + +> Copilot会查看编辑器中当前和紧邻打开的文件,以分析上下文并提供适当的建议。 + +--- + +> - 1、避免打开过多的文件,以便Copilot能够更好地理解你的代码。 +> - 2、打开的文件尽量相关且有共性。 +> - 3、如果是新项目,可以打开一些模版代码、数据文件以及参考文档等相关示例文件。以便Copilot能够更好地理解你的期望。等已经开发了一些代码后,这些示例文件就可以删除了。 + +### 上下文: 注释: 顶部注释 + +创建一个新文件时,在文件顶部添加注释,描述你的需求。这对 Copilot 很有帮助。 + +\* 下面说明将使用`...`表示copilot开始生成的位置 + +```python +# Download file from an URL and analyze its content +# Details: +# * Download the file from an URL +# * Save the downloaded files into `./download` folder +# * Use `filetype` of the file to specify how to parse +# * Filetype can be `.pdf`, `.html`, `.epub`, `.md` and `.txt` +# * Use NLP or OCR to get the file content +# * Tokenize the file content and get the statistics result + +import ... +``` + +### 上下文: 注释: 行内注释 + +在每个函数上面或重要代码块的上面添加注释,以帮助 Copilot 了解你代码中的一些意图或问题。 + +\* 下面说明将使用`...`表示copilot开始生成的位置 + +函数上方添加注释说明 + +```python +# parse the JSON string into User object +def ... +``` + +--- + +代码添加注释说明 + +```python +# ... +api_sever = FastApi(...) + +# starting the API Sever, enable ssl, bind to 8443 port +... +``` + +### 上下文: 注释: Docstring + +有时候当你已经拥有详细设计文档,但未编写功能代码时,可以直接使用 docstring 中的描述来让 copilot 生成代码。 + +```python +def send_email(to_address: Email, subject: str, content: HTML): -> StatusCode: + """ + Send email to specified address + + Parameters + ---------- + to_address : Email + The email address to send to + subject : str + The email subject + content : HTML + The email content + + Returns + ------- + StatusCode + The sending result + """ + + ... +``` + +### 上下文: 注释: 提问 + +> 如果你不想切换到 copilot chat 时,注释也可以用于提问。 + +```python +# Q: What is the difference between `os.path.join` and `pathlib.PurePath`? +# A: ... +``` + +### 上下文: 注释: Todo + +> 你也可以让 copilot 为你生成 `todo` 列表来评估工作量。 + +```python +# Parse the json file into a Talks object +# TODO: +# -[ ] 1. ... +``` + +### 上下文: 命名 + +> 你的命名应该足够明确以便于 Copilot 理解你的意图 + +#### bad case + +```python +a = 60 + +def send(dict): + ... + +class data: + ... +``` + +#### good case + +```python +timeout = 60 + +def send_email(to_address: Email, subject: str, content: HTML): -> StatusCode: + ... + +class Email: + ... +``` + +### 上下文: 代码: 代码示例 + +> 提供片段代码示例,以帮助 Copilot 更好地开始新的开发任务。 +> +> - 使用的框架与库 +> - 代码风格 +> - 算法逻辑 + +```python +from typing import List +from typing import Optional +from sqlalchemy import ForeignKey +from sqlalchemy import String +from sqlalchemy.orm import DeclarativeBase +from sqlalchemy.orm import Mapped +from sqlalchemy.orm import mapped_column +from sqlalchemy.orm import relationship + +class Base(DeclarativeBase): + pass + +class User(Base): + __tablename__ = "user_account" + id: Mapped[int] = mapped_column(primary_key=True) + name: Mapped[str] = mapped_column(String(30)) + fullname: Mapped[Optional[str]] + addresses: Mapped[List["Address"]] = relationship( + back_populates="user", cascade="all, delete-orphan" + ) + def __repr__(self) -> str: + return f"User(id={self.id!r}, name={self.name!r}, fullname={self.fullname!r})" + +# Email Address +... +``` + +### 上下文: 代码: 数据示例 + +> 提供片段数据示例,以帮助 Copilot 更好地开始新的开发任务。 +> +> - 数据结构与类型 +> - 命名 +> - 值处理逻辑 + +```python + +dailogs = [ + { + "timestamp": "May 1, 2023 11:00:00", + "text": "Hello, World!", + "speaker": "Jack", + }, + { + "timestamp": "May 1, 2023 11:01:00", + "text": "Hello, Copilot!", + "speaker": "Copilot", + }, +] + +# Parse the json object into `Dialog` object +... +``` + +三、快捷键 +---- + + +对于mac用户建议修改alt相关的快捷键,因为mac上的alt+字母键有可能被输入法使用了。若有自定义过输入法`keylayout`,则忽略这句话。 + +另外没有快捷键的命令,可以唤起`命令面板`后输入查询关键字筛选后执行。 + +### Github Copilot + + +#### Copilot 中 Inline Suggestions 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`editor.action.inlineSuggest.trigger`| 触发内联建议 | `alt+\` | `alt+\` +`editor.action.inlineSuggest.showPrevious`| 显示上一个内联建议 | `alt+[`| `alt+[` +`editor.action.inlineSuggest.showNext`| 显示下一个内联建议 | `alt+]`| `alt+]` +`editor.action.inlineSuggest.acceptNextWord`| 接受内联建议的下一个字 | `ctl+right`| `cmd+right` +`editor.action.inlineSuggest.commit`| 接受内联建议 | `Tab`| `Tab` +`editor.action.inlineSuggest.hide`| 隐藏内联建议 | `Esc`| `Esc` +`editor.action.inlineSuggest.acceptNextLine`| 接受内联建议的下一行 | - | - + + +#### Copilot 中 Completions Panel 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`github.copilot.generate`| 打开 `Completions Panel` | `ctrl+enter`| `ctrl+enter` +`github.copilot.acceptCursorPanelSolution`| 接受`Completions Panel`光标所在的建议 | `ctrl+/` | `ctrl+/` +`github.copilot.previousPanelSolution`| 查看上一个建议 | `alt+[`| `alt+[` +`github.copilot.nextPanelSolution`| 查看下一个建议 | `alt+]`| `alt+]` + + +#### Copilot 中 其他命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`github.copilot.toggleCopilot`| 启用/禁用 Copilot 补全提示 | -| - +`github.copilot.collectDiagnostics`| 收集诊断信息 | -| - +`github.copilot.openLogs`| 打开日志窗口 | -| - +`github.copilot.sendFeedback`| 打开社区网站 | -| - +`github.copilot.signIn`| 登陆 | -| - + + +### Github Copilot Chat + + +#### Copilot Chat 中 Chat 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`github.copilot.interactiveEditor.explain`|进行解释(选中内容或光标所在的文件)|-|- +`github.copilot.terminal.explainTerminalSelection`|对此进行解释(需要在终端中使用)|-|- +`github.copilot.terminal.explainTerminalSelectionContextMenu`|Copilot: 对此进行解释(需要在终端中使用)|鼠标右键菜单|鼠标右键菜单 +`github.copilot.terminal.explainTerminalLastCommand`|对终端中最后一个命令进行解释(需要在终端中使用)|-|- + + +#### Copilot Chat 中 Inline Chat 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`inlineChat.start`|代码内聊天| - | - +`github.copilot.interactiveEditor.generate`|在此生成(在光标所在位置唤起inline chat的`/generate`功能)| - | - +`github.copilot.interactiveEditor.generateDocs`|生成文档| - | - +`github.copilot.interactiveEditor.generateTests`|生成测试| - | - +`github.copilot.interactiveEditor.fix`|修复此| - | - + + +#### Copilot Chat 中 Quick Chat 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`workbench.action.quickchat.toggle`|开启/关闭 Quick Chat|`shift+cmd+i`|`shift+cmd+i` +`github.copilot.terminal.suggestCommand`|建议终端命令|`ctrl+i`(仅在终端起作用)|`cmd+i` + + +#### Copilot Chat 中 Editor Chat 相关命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`workbench.action.openChat.copilot`|打开编辑器聊天|-|- + + +#### Copilot Chat 其他命令 + +| 命令 |说明 | 快捷键 | Mac 快捷键 | +|-|:-|:-|:-| +`github.copilot.interactiveSession.feedback`|打开github Issues|-|- +`github.copilot.debug.workbenchState`|日志工作台状态|-|- +`github.copilot.ghpr.applySuggestion`|为Github Pull Request提供代码建议|-|- + + +四、Copilot Chat 的 Slash Commands 使用技巧 +---- + +> 在聊天对话框中可以通过`/`开头的命令来与Copilot Chat进行交互。 + +### Slash Commands 示例 + + +#### Slash Commands 由四部分构成 + +|元素|说明| +|-|-| +|- Agent | 指定Agent, 符号为 `@`, 可选 +|- Commands | 指定命令, 符号为 `/`, 可选 +|- 变量 | 引用内容, 符号为 `#`, 可选 +|- 用户输入的指令 | 可选 + +#### 例子 + +``` +/explain def helloworld():... + +@vscode /api 请解释 inlineChat.start 的作用 + +@workspace /explain def helloworld():... + +在每一行代码末尾添加注释进行解释 +``` + +#### Agent + +| Agent |说明 | +|- |:-| +@vscode |vscode命令与插件的问题 +@workspace|项目workspace相关的问题 + +### Inline Chat 的 Slash Commands + + +--- + +> 通过命令 `inlineChat.start` 触发 `inline chat` 后使用 + +|命令 |说明 | +|- |:-| +/doc |在此添加文档注释 +/explain |对选中的代码进行解释 +/fix |修复此选中的代码 +/tests |为选中的代码生成单元测试 + +--- + +> 通过命令 `github.copilot.interactiveEditor.generate` 触发 + +|命令 |说明 | +|- |:-| +/generate |在此生成, 该命令无法由用户输入 + +--- + +> 当然也可以直接选中区域,然后在inline chat中输入指令执行 copilot会对选中区域进行指令操作 + +|常用指令| +| - | +|在每一行代码末尾添加注释进行解释| +|使代码满足PEP484要求| + + +### Silde Chat 的 Slash Commands + + +> 通过命令 `workbench.action.chat.openInSidebar` 触发 `chat` 后使用 +> 或点击侧边栏上的Copilot聊天按钮 +> 在Chat输入框中还允许指定Agent(即环境) + +#### Slash Commands + +|命令 |说明 | +|- |:-| +/api |回答vscode扩展插件开发的问题 +/explain |对选中的代码进行解释 +/fix |修复此选中的代码 +/new |创建新项目workspace +/newNotebook |创建新的Jupyter Notebook +/terminal |解释命令行里的命令 +/tests |为选中的代码生成单元测试 +/help |帮助说明 +/clear |清除会话 + +### `/terminal`特有的变量, 以`#`号开头 + +> 仅在`/terminal`命令中可用 + +| 变量 |说明 | +|-|:-| +`#terminalLastCommand`|最后一次执行的终端命令 +`#terminalSelection`|选中的终端命令 + +### 的 Slash Commands + + +- Quick Chat 与 Chat 的 Slash Commands相同 +- Editor Chat 与 Chat 的 Slash Commands相同 + +五、参数设置 +---- + +打开vscode 命令面板, 输入`Preferences:Open Settings` 打开配置文件,在文件模式下配置相关参数. + +完整参数说明可以查看 `copilot` 与 `copilot chat` 两个[插件目录](https://code.visualstudio.com/docs/editor/extension-marketplace#_where-are-extensions-installed)下的 `package.json` 文件获知。 + +### 完整配置参考 + +```json +// settings.json +{ + // ... + "github.copilot.chat.welcomeMessage": "always", + "github.copilot.chat.localeOverride": "zh-CN", + "github.copilot.editor.enableCodeActions": true, + "github.copilot.editor.iterativeFixing": true, + "github.copilot.editor.enableAutoCompletions": true, + "github.copilot.enable": { + "plaintext": false, + "ini": false, + "markdown": true, + "*": true + }, + "github.copilot.advanced": { + "length": 4000, + "inlineSuggestCount": 5, + "top_p": 1, + "temperature": "0.8", + "listCount": 10, + "stops": { + "*": [ + "\n\n\n" + ], + "python": [ + "\ndef ", + "\nclass ", + "\nif ", + "\n\n#" + ] + }, + "debug.showScores": true, + "indentationMode": { + "python": false, + "javascript": false, + "javascriptreact": false, + "jsx": false, + "typescript": false, + "typescriptreact": false, + "go": false, + "ruby": false, + "*": true + } + } + // ... +} +``` + +### 参数说明 + +#### 代理参数 + +|设置参数 |值类型|说明 | +|:--|:--|:--| +`"http.proxy"`| string |配置网络代理地址 + +#### Copilot Chat 参数 + +|设置参数 |值类型|说明 | +|:--|:--|:--| +`"github.copilot.chat.localeOverride"`| string | 设置Copilot本地语言 +`"github.copilot.chat.welcomeMessage"`| string |Copilot Chat 是否显示欢迎语
`first`: 仅第一次启动时, `always`: 总是, `never`: 从不 + +#### Copilot 基本参数 + +|设置参数 |值类型|说明 | +|:--|:--|:--| +`"editor.inlineSuggest.enabled"`| boolean |启用内联建议 +`"github.copilot.editor.iterativeFixing"`| boolean| 允许 Copilot 提供迭代修复建议 +`"github.copilot.editor.enableAutoCompletions"`| boolean |允许 Copilot 提供自动补全 +`"github.copilot.editor.enableCodeActions"`| boolean|允许 Copilot 代码操作建议,这些操作可能包括重构代码、优化代码结构、修复可错误等 + +#### 设置 Copilot 生效的文件类型 + +|设置参数 |值类型|说明 | +|:--|:--|:--| +`"github.copilot.enable"`| json |请将 `"*": true` 放到末尾
[语言](https://code.visualstudio.com/docs/languages/identifiers)后设置 `false` 表示禁用copilot, 设置 `true` 表示启用 + +#### Copilot 高级参数 + +> github.copilot.advanced 可以控制模型参数,最终影响到代码生成. 其值为json + +|设置参数 |值类型|说明 | +|:--|:--|:--| +`"length"`| integer | 生成的代码字数, 默认为 `500` +`"top_p"`| number | 控制模型候选范围,默认值为 `1`,值范围为`0.0~1.0` +`"temperature"`| string | 控制模型的创造性,默认值为 `""`,值越大越不可预测,值范围为`0.0~1.0` +`"inlineSuggestCount"`| integer | 内联提示的个数, 默认为`3` +`"listCount"`| integer | 控制`Completions Panel`中建议个数,默认为 `10` +`"stops"`| json | 控制模型代码生成时停止的标志,可以按[语言](https://code.visualstudio.com/docs/languages/identifiers)来控制 +`"indentationMode"`| json | 指定[语言](https://code.visualstudio.com/docs/languages/identifiers)是否采用该语言的缩近模式,由此可能会与stops冲突,比如采用`\{\}`缩近时,设置该参数时需要综合考虑 +`"debug.showScores"`| boolean | 在代码建议列表中显示每个建议的分数 + + +END... ENJOY YOURSELF +---- + +> 欢迎大家添加新内容,校对、错误请指正。📮邮箱: jussker@outlook.com + +参考来源 +---- + +\[1\]: [GitHub Copilot in VS Code](https://code.visualstudio.com/docs/editor/github-copilot) +\[2\]: [How to use GitHub Copilot: Prompts, tips, and use cases](https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/) +\[3\]: [GitHub Copilot Official Website](https://github.com/features/copilot) +\[4\]: [GitHub Copilot Series (Youtube)](https://www.youtube.com/playlist?list=PLj6YeMhvp2S5_hvBl2SE-7YCHYlLQ0bPt) +\[5\]: [Pragmatic techniques to get the most out of GitHub Copilot (Youtube)](https://www.youtube.com/watch?v=CwAzIpc4AnA) +\[6\]: [How I used GitHub Copilot to build a browser extension](https://github.blog/2023-05-12-how-i-used-github-copilot-to-build-a-browser-extension) +\[7\]: [Visual Studio Code, Where are extensions installed?](https://code.visualstudio.com/docs/editor/extension-marketplace#_where-are-extensions-installed) +\[8\]: [Visual Studio Code, Language Identifiers](https://code.visualstudio.com/docs/languages/identifiers)