善用 GitHub Copilot 和 ChatGPT 提高產能與加速學習

可能由於是演算法實驗室畢業的？AI 對我來說一直都不是什麼新東西，直到 ChatGPT 和 GitHub Copilot 的出現才驚嘆「哇！這是什麼酷東西，一定要好好玩一玩」。

來聊聊我怎麼用 Copilot 和 ChatGPT 提升產能與加速學習好了，分幾種狀況來說明。

實作新功能

第一，實作新功能，只要打個註解、函數或變數名稱後就會出現建議，很方便。

例如，實作一個找朋友生日的函式 findFriendBirthday，打出 const findFriendBirthday… Copilot 就顯示完整的函式內容了，花不到一分鐘打完收工。以前用的 code snippet 工具都可以丟掉了。

const FRIEND_LIST = [
  { name: 'Alice', birthday: '01/01/2000' },
  { name: 'Bob', birthday: '01/02/2000' },
  { name: 'Carol', birthday: '01/03/2000' },
  { name: 'Dave', birthday: '01/04/2000' },
  { name: 'Ellen', birthday: '01/05/2000' },
];

const findFriendBirthday = (friends, name) => {
  const friend = friends.find((friend) => friend.name === name);
  return friend ? friend.birthday : undefined;
};

接著寫測試也是，在 Coliplot Chat 輸入 /tests 加上檔名就會出現測試程式碼，或是在檔案內打下 describe 或 it 就會顯示所有想寫的 test case，我只要負責按 tab 接受建議就好。

describe('findFriendBirthday', () => {
  it('should return birthday when the name is in the list', () => {
    const name = 'Bob';
    const birthday = findFriendBirthday(FRIEND_LIST, name);
    expect(birthday).toEqual('01/02/2000');
  });

  it('should return undefined when the name is not in the list', () => {
    const name = 'Frank';
    const birthday = findFriendBirthday(FRIEND_LIST, name);
    expect(birthday).toEqual();
  });
});

寫新功能的時候，先打好註解、函數命名什麼的，然後讓 Copilot 產程式碼，其實很大的機率是不能直接用的，但是微調一下就好了。如果真的是不能用，調整定義或是自己重寫也是沒有問題的。上面這個例子太簡單了，才能這麼快完工。

重構

第二，重構。寫完是一回事，寫好又是一回事，所以我都會來重構。圈選想改的程式碼，然後按 command + i 進入對話模式輸入「refactor」，Copilot 就會開始重構。

修改後的結果是，原本用 toEqual，請 Copilot 做 refactor 後，改成 toBe 和 toBeUndefined，查了文件才知道 toEqual 會對物件做深比對 (deep comparison)，在這個例子看不出差異，個人是覺得較為精簡，而且 toBeUndefined 則是更符合語意。

describe('findFriendBirthday', () => {
  it('should return birthday when the name is in the list', () => {
    const name = 'Bob';
    const birthday = findFriendBirthday(FRIEND_LIST, name);
    expect(birthday).toBe('01/02/2000');
  });

  it('should return undefined when the name is not in the list', () => {
    const name = 'Frank';
    const birthday = findFriendBirthday(FRIEND_LIST, name);
    expect(birthday).toBeUndefined();
  });
});

關於第一點「實作新功能」與第二點「重構」，在 ChatGPT 輸入 implement findFriendBirthday function、implement test codes for findFriendBirthday、refactor 會出現一樣的結果，但 Copilot 結合編輯器（例如 VSCode）讓產出速度更快。

學習

第三，學習。如果不是實作而是想學習某段程式碼，我就會選取有興趣的程式碼片段，然後在對話模式輸入 explain this 請工具說明。例如，我想知道 findFriendBirthday 這個函式到底在幹嘛，於是選取或貼上這段 code 並輸入 explain this。

Copilot 的說明比較簡短，但也還可以接受。

ChatGPT 通常說明得很詳細，像是架構或語法怎麼設計怎麼用、為什麼要這要用、用了有什麼好處，有時候還會舉更多例子，很適合學習。

就過去學習經驗來說，我曾用工具像是 JSLint、JSHint 和 ESLint 來提高程式碼的品質以及學寫程式，現在有更人性化也更詳細的工具如 Copilot 和 ChatGPT 當然要善加利用摟！code review 的負擔可能也會少一點。

CS50.ai

CS50.ai 是哈佛 CS50 的 AI 程式家教 CS50 ddb，相較 Copilot 和 ChatGPT 是生產力工具，CS50.ai 屬於教學工具，它不直接給答案，而是引導怎麼解決問題，例如，我問了同 Copilot 和 ChatGPT 的問題，而 CS50.ai 讓我從定義輸入輸出開始拆解這個問題…

v0

如果問未來是否能用設計稿直接用 AI 轉為前端程式碼？個人認為是很有機會的，過去曾經看過 Photoshop 可直接產 HTML，雖然不能當成 production code，最多拿來當 EDM，但隨著技術進步，一定是可行的，像是 v0 產前端的 code 感覺是滿厲害的，但僅限於單一元件，與商業邏輯、資料流的整合，還是要靠開發者自己處理。這時候工程師最重要的就是要持續培養自己產品和技術整合的技能，還有軟技能，不要只是會產 code 而已。舉例來說，要做好一個產品，一定是由人來定義做什麼、怎樣才是做到好的品質，如果之後 AI 的技術足夠成熟，人只要能定義這些要做的功能和規格和驗收，其它實作就讓 AI 來做就可以了。

Phind

(2024/03/22 更新)

在 ChatGPT 不能用的日子裡，除了 Copilot 之外，我找到替代品 Phind，一度當成主力工具，速度更快、介面舒服、回覆更精簡、準確性更高，而且較少繁簡中文參雜的狀況。

Codeium 與 Codiumate

(2024/04/11 更新)

Codeium 與 Codiumate 堪稱 Copilot 免費平替版，初步試用似乎功能齊全、應有盡有。

結論

利用這些 AI 工具來寫程式是一定要的，理由是

• 第一，提升工作產能，工作求速度快和準確，如果不是練功或有特殊需求，能不要自己造輪子就不要自己造輪子。
• 第二，當成學習工具，Copilot 和 ChatGPT 蒐集了一定品質的程式碼，這些 code 一定都是 GitHub 上有人寫過又品質還不錯的，AI 幫忙整理一下丟給我們，可以思考一下人家寫這麼棒，自己下次是不是也能寫成這樣？況且還是很好的說明工具，尤其是 ChatGPT 說明尤其詳細，像是架構或語法怎麼設計怎麼用、為什麼要這要用、用了有什麼好處，有時候還會舉更多例子，很適合學習。

不過，換個角度來說，工程師是腦力工作者，一定要訓練思考的能力，所以如果是在練功的時候，我會停用這些工具來練習怎麼解決問題，希望自己能好好思考問題、找資料、分析、寫 code，想好弄好再去參考這些工具都是沒有問題的。