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

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

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

同事提了一嘴 "變量命名讓 ChatGPT 去做"，然后我就開(kāi)始去研究 ChatGPT 命名:

看起來(lái)問(wèn)題不大，之后就是在 lowcode 插件里接入 ChatGPT API 了。

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

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

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

配置 ChatGPT

預(yù)置 Prompt 模板

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

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

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

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

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

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

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

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