我在 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>;