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