我是如何借助 AI 大模型快速开发 naive UI vscode 插件的

151 阅读2分钟

很早之前就接触过 element-ui 的 vscode 插件,感觉他们的实现思路是对的,但是要使 naive-ui 也实现类似的功能,需要耗费大量的精力,将 naive-ui 的所有组件数据都整理到 vscode 插件的代码里,最近又有了开发这个项目的冲动,我想了想,这个工作可以利用大模型来帮我处理。

我的处理思路是这样的,下载 naive-ui 的源码,找到每个组件的文档文件,将里面的数据投喂给大模型,让他输出出来我需要的格式,这样省了我大量的处理数据的时间,具体方式如下:

我跟大模型说:接下来我要给你一份 markdown 格式的文档和一段 js 代码,你要分析出来他们之间的关系,稍后我再给你一份 markdown 文件,你需要返回对应的 js 代码片段

然后我给大模型如下数据

|属性 | 参数 | 说明 | 版本 |

| --- | --- | --- | --- |

| clear-icon | () | 自定义清除图标 | 2.29.0 |

| count | (props: { value: string }) | 字数统计 |  |

| password-invisible-icon | () | 密码关闭时的密码开关图标 | 2.27.0 |

| password-visible-icon | () | 密码显示时的密码开关图标 | 2.27.0 |

| prefix | () | 输入框头部内容 |  |

| separator | () | 成对输入框之间分隔符,仅 pair = true 生效且优先级高于 separator 属性 |  |

| suffix | () | 输入框尾部内容| |

然后我再给大模型另外一个数据

[

  {

    name: 'clear-icon',

    description: '自定义清除图标',

    params: '()',

    version: '2.29.0'

  },

  {

    name: 'count',

    description: '字数统计',

    params: '(props: { value: string })',

    version: ''

  },

  {

    name: 'password-invisible-icon',

    description: ' 密码关闭时的密码开关图标',

    params: '()',

    version: '2.27.0'

  },

  {

    name: 'password-visible-icon',

    description: '密码显示时的密码开关图标',

    params: '()',

    version: '2.27.0'

  },

  {

    name: 'prefix',

    description: '输入框头部内容',

    params: '()',

    version: ''

  },

  {

    name: 'separator',

    description: '成对输入框之间分隔符,仅 pair = true 生效且优先级高于 separator 属性',

    params: '()',

    version: ''

  },

  {

    name: 'suffix',

    description: '输入框尾部内容',

    params: '()',

    version: ''

  }

]

这样大模型就知道我的意思了,当我再投喂给大模型其他组件的 slots 数据的时候,他就会给我相应的 vscode 插件需要的数据格式了,于是借助大模型,我快速开发出了 naive-ui-IntelliSense

marketplace.visualstudio.com/items?itemN…