我在 vscode 插件里接入了 ChatGPT,解决了代码变量命名的难题

gpt1.gif

lowcode 插件 已经迭代了差不多3年。作为我的生产力工具,平常一些不需要动脑的搬砖活基本上都是用 lowcode 去完成,比如管理脚手架,生成 CURD 页面,根据接口文档生成 TS 类型,生成 mock 等等。

借助 lowcode 的区块物料的功能,能快速生成 CURD 页面,但是前一段时间在做一些财务相关的需求时,变量的命名成了一个难题,一个列表十几二十个字段,而且大部分是那种看着中文都不知道是什么意思的抽象名词。做着做着我简单粗暴的使用 column1 ~ column20 去命名(反正一个个去翻译出来我也不认识)。

同事提了一嘴 "变量命名让 ChatGPT 去做",然后我就开始去研究 ChatGPT 命名:

image.png

看起来问题不大,之后就是在 lowcode 插件里接入 ChatGPT API 了。

开发过程中研究了几个 vscode 上下载量比较多的 ChatGPT 插件,基本上大同小异,都是在右键菜单里加了分析代码,重构代码,给代码写单元测试,给代码找缺陷的固定选项。假如我想要 ChatGPT 将我选中的代码的里的中文变量翻译成英文,需要每次复制粘贴代码,写 Prompt。

借助 lowcode 原有的代码片段的功能,几乎毫不费劲的就实现了预置 Prompt 的功能,如下:

image.png

目前 lowcode 已经支持接入 openai 官方的 api,也可以使用国内的一些收费的中转服务,下面介绍使用方法。

配置 ChatGPT

gpt.png

预置 Prompt 模板

使用 lowcode 原有代码片段功能,可以随意预置 Prompt,支持 EJS 模板语法,可快速创建分析代码、重构代码、代码添加注释等 Prompt。

gpt1.png

拉到最底部,配置 chatGPT 字段:

gpt2.png

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

gpt.gif

posted @ 2023-06-12 21:47  若邪  阅读(1056)  评论(1编辑  收藏  举报