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