我在 vscode 外掛裡接入了 ChatGPT，解決了程式碼變數命名的難題

lowcode 外掛已經迭代了差不多3年。作為我的生產力工具，平常一些不需要動腦的搬磚活基本上都是用 lowcode 去完成，比如管理腳手架，生成 CURD 頁面，根據介面檔案生成 TS 型別，生成 mock 等等。

藉助 lowcode 的區塊物料的功能，能快速生成 CURD 頁面，但是前一段時間在做一些財務相關的需求時，變數的命名成了一個難題，一個列表十幾二十個欄位，而且大部分是那種看著中文都不知道是什麼意思的抽象名詞。做著做著我簡單粗暴的使用 column1 ~ column20 去命名（反正一個個去翻譯出來我也不認識）。

同事提了一嘴 "變數命名讓 ChatGPT 去做"，然後我就開始去研究 ChatGPT 命名:

看起來問題不大，之後就是在 lowcode 外掛裡接入 ChatGPT API 了。

開發過程中研究了幾個 vscode 上下載量比較多的 ChatGPT 外掛，基本上大同小異，都是在右鍵選單里加了分析程式碼，重構程式碼，給程式碼寫單元測試，給程式碼找缺陷的固定選項。假如我想要 ChatGPT 將我選中的程式碼的裡的中文變數翻譯成英文，需要每次複製貼上程式碼，寫 Prompt。

藉助 lowcode 原有的程式碼片段的功能，幾乎毫不費勁的就實現了預置 Prompt 的功能，如下：

目前 lowcode 已經支援接入 openai 官方的 api，也可以使用國內的一些收費的中轉服務，下面介紹使用方法。

設定 ChatGPT

預置 Prompt 模板

使用 lowcode 原有程式碼片段功能，可以隨意預置 Prompt，支援 EJS 模板語法，可快速建立分析程式碼、重構程式碼、程式碼新增註釋等 Prompt。

拉到最底部，設定 chatGPT 欄位：

commandPrompt 既右鍵選單選擇模板後傳送的內容，支援 EJS 模板語法。

viewPrompt 為程式碼片段或者區塊物料視覺化詳情頁點 Ask ChatGPT 按鈕後傳送的內容。

lowcode 程式碼生成功能結合 ChatGPT

設定生成 CURD 介面的時候，如果全部使用中文命名，根據模板會生成如下的程式碼：

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  成本中心編碼: string;
  成本中心名稱: string;
  賬套編碼: string;
  銀行核算編碼: string;
  訂單號: string;
  訂單金額: string;
  確收時間: string;
  "勞務成本-不含稅": string;
}

interface IFormData {
  成本中心編碼?: string;
  成本中心名稱?: string;
  賬套編碼?: string;
  銀行核算編碼?: string;
  訂單號?: string;
  訂單金額?: string;
  確收時間?: string;
  "勞務成本-不含稅"?: string;
}

const defaultFormData: IFormData = {
  成本中心編碼: undefined,
  成本中心名稱: undefined,
  賬套編碼: undefined,
  銀行核算編碼: undefined,
  訂單號: undefined,
  訂單金額: undefined,
  確收時間: undefined,
  "勞務成本-不含稅": undefined,
};

export const useModel = () => {
  const filterForm = reactive<IFormData>({ ...defaultFormData });

  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>(
    [],
  );

  const pagination = reactive<{
    page: number;
    pageSize: number;
    total: number;
  }>({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const loading = reactive<{ list: boolean }>({
    list: false,
  });

  return {
    filterForm,
    tableList,
    pagination,
    loading,
  };
};

export type Model = ReturnType<typeof useModel>;

ChatGPT 處理之後：

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  costCenterCode: string;
  costCenterName: string;
  accountingCode: string;
  bankAccountingCode: string;
  orderNumber: string;
  orderAmount: string;
  confirmedTime: string;
  laborCostExcludingTax: string;
}

interface IFormData {
  costCenterCode?: string;
  costCenterName?: string;
  accountingCode?: string;
  bankAccountingCode?: string;
  orderNumber?: string;
  orderAmount?: string;
  confirmedTime?: string;
  laborCostExcludingTax?: string;
}

const defaultFormData: IFormData = {
  costCenterCode: undefined,
  costCenterName: undefined,
  accountingCode: undefined,
  bankAccountingCode: undefined,
  orderNumber: undefined,
  orderAmount: undefined,
  confirmedTime: undefined,
  laborCostExcludingTax: undefined,
};

export const useModel = () => {
  const filterForm = reactive<IFormData>({ ...defaultFormData });

  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>(
    [],
  );

  const pagination = reactive<{
    page: number;
    pageSize: number;
    total: number;
  }>({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const loading = reactive<{ list: boolean }>({
    list: false,
  });

  return {
    filterForm,
    tableList,
    pagination,
    loading,
  };
};

export type Model = ReturnType<typeof useModel>;