學習 GitHub Copilot
GitHub CopilotGitHub Copilot X
  • 1 課程簡介
  • 2 講師簡介
  • 3 Copilot 簡介
    • 3.1 什麼是 GitHub Copilot?
    • 3.2 訓練資料集
    • 3.3 收費機制
    • 3.4 安裝套件於 VS Code 編輯器
  • 4 Copilot 使用方式
    • 4.1 撰寫程式邊產生建議原始碼
    • 4.2 撰寫註解邊產生建議原始碼
    • 4.3 微調部份原始碼
  • 5 Copilot 未來發展
    • 5.1 簡介 GitHub Copilot X
    • 5.2 簡介 GitHub Copilot Labs
  • 6 實作:建立縣市區域 JSON 檔
    • 6.1 縣市區域資料來源
    • 6.2 引導 Copilot 撰寫縣市區域 JSON 檔
  • 7 實作:樂透開獎
  • 8 參考資料
Powered by GitBook
On this page
  • 註解的快捷鍵
  • 取得「建議」的原始碼方式
  • 第一步:撰寫 HTML
  • 第二步:撰寫 CSS
  • 第三步:撰寫 JS
  • 完成結果示意
  • 參考資料
  1. 4 Copilot 使用方式

4.2 撰寫註解邊產生建議原始碼

請在 practice 資料夾下建立 write_comment.html 網頁檔,然後撰寫以下各步驟的註解試試。

註解的快捷鍵

Mac 快捷鍵: Command + / 。

Windows 快捷鍵:Ctrl + / 。

取得「建議」的原始碼方式

  • 輸入註解(提示語 prompt) → 取得「建議」的原始碼。

  • 想瀏覽更多「建議」的原始碼。可看以下兩個方式:

方式一:切換其它建議的原始碼,註解如下

Mac 快捷鍵:Option + ] 或 Option + [ 。

Windows 快捷鍵:Alt + ] 及 Alt + [ 。

方式二:將「建議」的原始碼,顯示在新的分頁(最多 10 筆)

快捷鍵(Mac 與 Windows 相同):Ctrl + Enter。

第一步:撰寫 HTML

撰寫第 10 行的註解,然後在註解的最右邊,按 Enter 鍵來產生建議的原始碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
  
    <!-- 放一個 type 為 button,id 是 the_button 的按鈕 -->

  </body>
</html>

第二步:撰寫 CSS

在 head 的結尾標籤之前,撰寫以下原始碼,然後在註解的最右邊,按 Enter 鍵來產生建議的原始碼:

<style>
  /* 將 the_button 按鈕,變得彩色些 */
</style>

也請試試用快捷鍵(Ctrl + Enter)取得「其它建議的原始碼」。

第三步:撰寫 JS

在 body 的結尾標籤之前,撰寫以下原始碼,然後在註解的最右邊,按 Enter 鍵來產生建議的原始碼:

<script>
  // 將 the_button 按鈕,綁定 click 事件
</script>

也請試試用快捷鍵(Ctrl + Enter)取得「其它建議的原始碼」。

完成結果示意

參考資料

Previous4.1 撰寫程式邊產生建議原始碼Next4.3 微調部份原始碼

https://docs.github.com/en/copilot/getting-started-with-github-copilot