很早之前就接触过 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