关于前端:我在-vscode-插件里接入了-ChatGPT解决了代码变量命名的难题

33次阅读

共计 2797 个字符，预计需要花费 7 分钟才能阅读完成。

lowcode 插件曾经迭代了差不多 3 年。作为我的生产力工具，平时一些不须要动脑的搬砖活基本上都是用 lowcode 去实现，比方治理脚手架，生成 CURD 页面，依据接口文档生成 TS 类型，生成 mock 等等。

借助 lowcode 的区块物料的性能，能疾速生成 CURD 页面，然而前一段时间在做一些财务相干的需要时，变量的命名成了一个难题，一个列表十几二十个字段，而且大部分是那种看着中文都不晓得是什么意思的抽象名词。做着做着我简略粗犷的应用 column1 ~ column20 去命名（反正一个个去翻译进去我也不意识）。

共事提了一嘴 “ 变量命名让 ChatGPT 去做 ”，而后我就开始去钻研 ChatGPT 命名:

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

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

借助 lowcode 原有的代码片段的性能，简直毫不吃力的就实现了预置 Prompt 的性能，如下：

目前 lowcode 曾经反对接入 openai 官网的 api，也能够应用国内的一些免费的直达服务，上面介绍应用办法。

应用 lowcode 原有代码片段性能，能够随便预置 Prompt，反对 EJS 模板语法，可疾速创立剖析代码、重构代码、代码增加正文等 Prompt。

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

commandPrompt 既右键菜单抉择模板后发送的内容，反对 EJS 模板语法。

viewPrompt 为代码片段或者区块物料可视化详情页点 Ask 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>;

正文完