![gpt1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c30eede4784e4f81a61102c3e85ed06c~tplv-k3u1fbpfcp-zoom-1.image?) [lowcode 插件](https://marketplace.visualstudio.com/items?itemName=wjkang.lowcode) 已经迭代了差不多3年。作为我的生产力工具，平常一些不需要动脑的搬砖活基本上都是用 lowcode 去完成，比如管理脚手架，生成 CURD 页面，根据接口文档生成 TS 类型，生成 mock 等等。借助 lowcode 的区块物料的功能，能快速生成 CURD 页面，但是前一段时间在做一些财务相关的需求时，变量的命名成了一个难题，一个列表十几二十个字段，而且大部分是那种看着中文都不知道是什么意思的抽象名词。做着做着我简单粗暴的使用 column1 ~ column20 去命名（反正一个个去翻译出来我也不认识）。同事提了一嘴 "变量命名让 ChatGPT 去做"，然后我就开始去研究 ChatGPT 命名: ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3605f9768b945829fad84a6dbbd29d4~tplv-k3u1fbpfcp-zoom-1.image?) 看起来问题不大，之后就是在 lowcode 插件里接入 ChatGPT API 了。开发过程中研究了几个 vscode 上下载量比较多的 ChatGPT 插件，基本上大同小异，都是在右键菜单里加了分析代码，重构代码，给代码写单元测试，给代码找缺陷的固定选项。假如我想要 ChatGPT 将我选中的代码的里的中文变量翻译成英文，需要每次复制粘贴代码，写 Prompt。借助 lowcode 原有的代码片段的功能，几乎毫不费劲的就实现了预置 Prompt 的功能，如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9d428ad68ef4c739aeced4330fd4c8e~tplv-k3u1fbpfcp-zoom-1.image?) 目前 lowcode 已经支持接入 openai 官方的 api，也可以使用国内的一些收费的中转服务，下面介绍使用方法。 ### 配置 ChatGPT ![gpt.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/647980a8dddd403bab7fd15194ee16f2~tplv-k3u1fbpfcp-zoom-1.image?) ### 预置 Prompt 模板使用 lowcode 原有代码片段功能，可以随意预置 Prompt，支持 EJS 模板语法，可快速创建分析代码、重构代码、代码添加注释等 Prompt。 ![gpt1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c121c1cf260e4f96b2b68bbcdc3cd5d4~tplv-k3u1fbpfcp-zoom-1.image?) 拉到最底部，配置 chatGPT 字段： ![gpt2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9366c6928c445eb984e9eb036c3d55d~tplv-k3u1fbpfcp-zoom-1.image?) commandPrompt 既右键菜单选择模板后发送的内容，支持 EJS 模板语法。 viewPrompt 为代码片段或者区块物料可视化详情页点 Ask ChatGPT 按钮后发送的内容。 ### lowcode 代码生成功能结合 ChatGPT 配置生成 CURD 界面的时候，如果全部使用中文命名，根据模板会生成如下的代码： ```ts 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({ ...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; ``` ChatGPT 处理之后： ```ts 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({ ...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; ``` ![gpt.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e74e5ce7c3c4462e8ad7ff099b3dca80~tplv-k3u1fbpfcp-zoom-1.image?)