## 使用Copilot提高生產力 --- ### 目錄 - 介紹copilot原理及運作方式 - 使用copilot - CDD - inline suggestion - 使用copilot chat --- ### 什麼是copilot - 基於AI/LLM技術的程式碼助手，用於改善開發者體驗 - 基於**OpenAI**的**GPT-4 Turbo**模型 - 具有一定的推理能力 - 幾乎支援任何語言 Java、PHP、Python、JavaScript、Ruby、Go、C#、C++... - github open source找的到的code幾乎都看得懂 - 越少公開的語言程式範例，產出的程式碼越爛 --- ### 什麼是copilot - 專注在解決問題 - 協助開發人員花更少的時間在重複性的工作上並且保持品質 - Flow - 強調寫code的「心流」不被破壞 --- ### How Does Github Copilot Work  --- ### copilot限制以及潛在問題 - 可能存**版權**或**隱私**問題 - 產出的程式碼可能來自於github上的open source專案 - 可能產出不合理或不安全的code - 因為他不見得理解你的上下文 - 對開發人員的技能產生影響 --- ### 事前準備 - 訂閱copilot  --- ### 事前準備 - vscode extension - github copilot - github copilot chat - vscode 17.6 or later --- ### vscode中enable/disable - vscode右下角有copilot的icon，點擊即可開啟/關閉  --- ### vscode中enable/disable - inline suggestion  --- ### 使用copilot的方式 - CDD (Comment Driven Development) - 在**註解**中寫下你的需求，copilot會根據需求給出建議 - The Flow - 順著**開發流程**自動產生程式碼 --- #### CDD (Comment Driven Development) - 描述目標 - 建立新檔案或功能時，先寫一些註解，讓copilot知道你的目的 - 靈活描述需求 - 適時修改註解可以讓copilot知道你的需求(ex: 看到他產出的程式碼不是你想要的，換個方式再說一次) - 提供良好範例 - 有時候需要處理資料，可以提供一些範例讓他知道如撰寫 --- #### Prompting - 提示要具體 - 他們更擅長一步一步接受命令 --- #### 透過註解寫code  --- #### 提供範例得到你要的結果  --- #### The Flow - 命名很重要  - 滑鼠移到灰底程式碼建議處，可以顯示工具列，可選取更多不同版本的程式碼  --- #### copilot如何分析你的程式碼 - 在提問時的主要來源 - 當前的檔案 - 已經開啟的分頁 --- #### copilot如何分析你的程式碼 - 上下文(context)包含哪些 - 目前**正在編輯的程式** - 鍵盤游標的**前幾行**與**後幾行** - 包含所有**已經開啟的程式碼檔案** - **註解**、**檔案名稱**、**類別名稱**、**函式名稱**、**參數名稱**... --- #### 使用copilot的編寫程式 - **alt+\\** 觸發inline suggestion - **ctrl+enter** 提供額外10組程式碼建議 --- ### Github Copilot Chat簡介 - 以**對話**為基礎的工具 - 對於**對話內容**有一定程度的**短期記憶**能力 - 提問會跟當前的游標所在程式碼自動關聯 - vscode**1.79.0**以上版本使用 - 支援繁體中文 --- #### 三種不同聊天視窗 - 一般聊天室窗(ctrl+alt+i)  --- #### 三種不同聊天視窗 - 快速聊天室窗(ctrl+shift+i)  - 內嵌聊天式窗(ctrl+i)  --- #### 可以跟chatGPT一樣提問 自動產生更完整的程式碼  --- #### 與選取的程式碼進行對話 建立typescript的interface  --- #### 與選取的程式碼進行對話  --- #### 與選取的程式碼進行對話 插入程式碼騙隊到編輯器視窗的游標位置  --- #### 與選取的程式碼進行對話 插入程式碼騙隊到編輯器視窗的游標位置  --- #### 將html轉換成javascript產生dom的程式碼  --- #### 聊天室窗中的slash命令 - **@workspace** 關於當前工作區中的檔案或專案提出問題 - `/explain`: 解釋所選程式碼的工作原理 - `/tests`: 為所選程式碼產生單元測試程式碼 - `/fix`: 提出解決所選程式碼問題的建議 - `/new`: 為新的工作區建立專案架構 - `/newNotebook`: 建立新的Jupyter筆記本 --- #### 聊天室窗中的slash命令 - **@terminal** 如何在終端機執行某些操作 - **@vscode** 提問關於vscode的問題 - `/api`: 有關於vs code擴充套件開發問題 - `/search`: 詢問有關如何在vs code裡面搜尋檔案 --- #### 內嵌聊天的slash命令 - `/doc`: 替游標所在的程式碼**加上文件** - `/explain`: 替目前所選取的程式碼**進行解釋** - `/fix`: 替目前所選取的程式碼**提出修正建議** - `/tests`: 替目前所選取的程式碼**產生單元測試程式碼** --- #### 自動生成commit message vscode v1.84+  --- #### GitHub Copilot Chat可以完成哪些工作 - 撰寫各種常見的程式邏輯 - 撰寫複雜的正則表示式 --- #### GitHub Copilot Chat可以完成哪些工作 - 撰寫特定演算法的程式碼 - 撰寫各種SQL與句 - 撰寫openAPI spec - 自動生成測試資料 - 產生單元測試程式碼 - 刪除不要的程式碼 - 自動補齊程式碼 --- ### Reference - [GitHub Copilot](https://github.com/features/copilot) - [GitHub Copilot: All you need to know](https://medium.com/analytics-vidhya/github-copilot-all-you-need-to-know-8e6fc1d5ccc) - [Will 保哥的技術交流中心](https://www.facebook.com/will.fans) - [ Code in the Flow with VS Code’s GitHub Copilot Chat ](https://www.youtube.com/watch?v=UqX2hCpgUJ0) --- # Q&A --- # Thank you for being here! ---