活用 GitHub Copilot 開發 Web 應用程式

活用 GitHub Copilot 開發 Web 應用程式

Pros And Cons

• Pros

  • 節省開發的時間與精力

  • 根據上下文提供建議與提示

  • 提高程式碼品質與開發效率

• Cons

  程式碼的不確定性，因此需要有經驗來判斷正確性跟 debug

備註寫程式

有使用過 copilot 寫程式的話，那麼可以應該就知道他可以透過寫備註來寫程式。

Copilot Chat & Copilot Lab

這個功能基本上就會像是使用 chatGPT 一樣，用聊天問答的方式幫助你完成你所需的程式碼

修正錯誤提示

• 範例

  

  

  

轉換程式語言

• 範例

  

  // 產生一個 function 將傳進來的 number array 加總
  const sum = (numbers) => numbers.reduce((a, b) => a + b, 0);

  function sum($numbers) {
    return array_reduce(
      $numbers,
      function ($a, $b) {
        return $a + $b;
      },
      0,
    );
  }

  sum := func(numbers []int) int {
    sum := 0
    for _, number := range numbers {
      sum += number
    }
    return sum
  }

Add Type

將 js 加上 type

• 範例

  

  • Code

    const isInViewport = (dom) => {
      const rect = dom.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        unusedVariable
      );
    };

  https://gitlab.com/dnihacker/wp_cornerstone/-/merge_requests/5395/diffs

產生測試 (js、ts)

const isInViewport = (dom) => {
  const rect = dom.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

使用熱鍵 command + i

• copilot chat

  describe('isInViewport', () => {
    it('returns true if element is fully in viewport', () => {
      const element = document.createElement('div');
      element.style.width = '100px';
      element.style.height = '100px';
      element.style.position = 'absolute';
      element.style.top = '0';
      element.style.left = '0';
      document.body.appendChild(element);
   
      const result = isInViewport(element);
   
      expect(result).toBe(true);
    });
   
    it('returns false if element is not in viewport', () => {
      const element = document.createElement('div');
      element.style.width = '100px';
      element.style.height = '100px';
      element.style.position = 'absolute';
      element.style.top = '10000px';
      element.style.left = '10000px';
      document.body.appendChild(element);
   
      const result = isInViewport(element);
   
      expect(result).toBe(false);
    });
  });

Copilot VSCode Extensions

• GitHub Copilot Labs

• GitHub Copilot Chat

Tips

• 據講者所說使用時開著專案的其他程式碼可以讓 copilot 產出同樣 coding style 的程式。

• 告訴 copilot chat 使用正體中文 的話就會將結果以繁體中文產出。

• 透過良好的命名讓 copilot 知道你的意圖

• 依照你的習慣下去撰寫程式碼

  • 然而原本的 Code 就寫得很爛，Copilot產生的 Code也會很爛

Refs

共筆 @ HackMD

簡報 @ google doc