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

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

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

實作新功能

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

例如,實作一個找朋友生日的函式 findFriendBirthday,打出 const findFriendBirthday… Copilot 就顯示完整的函式內容了,花不到一分鐘打完收工。

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 functionimplement test codes for findFriendBirthdayrefactor 會出現一樣的結果,但 Copilot 結合編輯器(例如 VSCode)讓產出速度更快。

學習

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

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

Copilot explain this

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

ChatGPT explain this

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

CS50.ai

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

CS50.ai

v0

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

v0

結論

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

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


GitHub Copilot ChatGPT VSCode AI 學不動了 CS50 ESLint GitHub code review