V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ruoxie
V2EX  ›  分享创造

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

  •  1
     
  •   ruoxie ·
    wjkang · 2023-06-11 20:58:18 +08:00 · 2835 次点击
    这是一个创建于 531 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    10 条回复    2023-06-15 00:33:57 +08:00
    metalvest
        1
    metalvest  
       2023-06-11 23:04:47 +08:00 via Android
    可以加一句把原中文命名作为注释保留
    ruoxie
        2
    ruoxie  
    OP
       2023-06-12 09:15:07 +08:00
    @metalvest 其实已经加了,GPT 3.5 太迷了
    lizhian
        3
    lizhian  
       2023-06-12 10:16:33 +08:00
    可以搞一个 idea 插件吗
    ruoxie
        4
    ruoxie  
    OP
       2023-06-12 13:54:41 +08:00
    @lizhian 我不会哈,而且我也不用 idea ,没太大兴趣去搞
    star7th
        5
    star7th  
       2023-06-12 15:26:25 +08:00
    总算有个人也是头疼变量命名了。

    我也是头疼变量命名,所以自己开发了一个变量命名模块

    https://www.aiznx.com/#/detail/varRem
    kaedei
        6
    kaedei  
       2023-06-13 00:02:39 +08:00
    试了下 Github Copilot Chat ,跟他讲“把字段名换成英文写法”也可以
    llmice
        7
    llmice  
       2023-06-14 16:51:16 +08:00
    直接使用 Github Copilot 打注释不就行了.
    llmice
        8
    llmice  
       2023-06-14 17:05:19 +08:00
    llmice
        9
    llmice  
       2023-06-14 17:05:41 +08:00
    dragontx4g
        10
    dragontx4g  
       2023-06-15 00:33:57 +08:00
    外语辅导班,我觉得要给娃停了……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1216 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:26 · PVG 02:26 · LAX 10:26 · JFK 13:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.