我在 vscode 插件里接入了 ChatGPT，解決了代碼變量命名的難題

我在 vscode 插件里接入了 ChatGPT，解決了代碼變量命名的難題

lowcode 插件 已經(jīng)迭代了差不多3年。作為我的生產(chǎn)力工具，平常一些不需要動腦的搬磚活基本上都是用 lowcode 去完成，比如管理腳手架，生成 CURD 頁面，根據(jù)接口文檔生成 TS 類型，生成 mock 等等。

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

同事提了一嘴 &34;變量命名讓 ChatGPT 去做&34;，然后我就開始去研究 ChatGPT 命名:

看起來問題不大，之后就是在 lowcode 插件里接入 ChatGPT API 了。

開發(fā)過程中研究了幾個 vscode 上下載量比較多的 ChatGPT 插件，基本上大同小異，都是在右鍵菜單里加了分析代碼，重構(gòu)代碼，給代碼寫單元測試，給代碼找缺陷的固定選項。假如我想要 ChatGPT 將我選中的代碼的里的中文變量翻譯成英文，需要每次復(fù)制粘貼代碼，寫 Prompt。

借助 lowcode 原有的代碼片段的功能，幾乎毫不費勁的就實現(xiàn)了預(yù)置 Prompt 的功能，如下：

目前 lowcode 已經(jīng)支持接入 openai 官方的 api，也可以使用國內(nèi)的一些收費的中轉(zhuǎn)服務(wù)，下面介紹使用方法。

配置 ChatGPT

預(yù)置 Prompt 模板

使用 lowcode 原有代碼片段功能，可以隨意預(yù)置 Prompt，支持 EJS 模板語法，可快速創(chuàng)建分析代碼、重構(gòu)代碼、代碼添加注釋等 Prompt。

拉到最底部，配置 chatGPT 字段：

commandPrompt 既右鍵菜單選擇模板后發(fā)送的內(nèi)容，支持 EJS 模板語法。

viewPrompt 為 代碼片段或者區(qū)塊物料可視化詳情頁點 Ask ChatGPT 按鈕后發(fā)送的內(nèi)容。

lowcode 代碼生成功能結(jié)合 ChatGPT

配置生成 CURD 界面的時候，如果全部使用中文命名，根據(jù)模板會生成如下的代碼：

import { reactive, ref } from &34;vue&34;;interface ITableListItem {  id: string;  成本中心編碼: string;  成本中心名稱: string;  賬套編碼: string;  銀行核算編碼: string;  訂單號: string;  訂單金額: string;  確收時間: string;  &34;勞務(wù)成本不含稅&34;: string;}interface IFormData {  成本中心編碼?: string;  成本中心名稱?: string;  賬套編碼?: string;  銀行核算編碼?: string;  訂單號?: string;  訂單金額?: string;  確收時間?: string;  &34;勞務(wù)成本不含稅&34;?: string;}const defaultFormData: IFormData = {  成本中心編碼: undefined,  成本中心名稱: undefined,  賬套編碼: undefined,  銀行核算編碼: undefined,  訂單號: undefined,  訂單金額: undefined,  確收時間: undefined,  &34;勞務(wù)成本不含稅&34;: 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 &34;vue&34;;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>;

原文鏈接：https://juejin.cn/post/7243263236623450170