Vue3 组件库 | VSCode 插件为组件库赋能，全新的 Varlet VSCode 插件发布了 🎉🎉🎉

写在前面

• Varlet Vue3 组件库官方文档: varlet.gitee.io/varlet-ui
• Varlet Vue3 组件库 Github 仓库: github.com/varletjs/va…
• Varlet VSCode Extension Github 位置: github.com/varletjs/va…

欢迎同学们分享，Star，Issue，PR，作者在此感谢。

背景介绍

在之前的版本中，我们的插件只能做到一些类似悬停组件提示文档，组件名称的提示、自动补全这样的小功能，算是试试水吧～。为了更优秀的开发体验，我们决定对插件进行重写。

新版本特性

• 🛠️  支持全组件的语法提示、快速补全。
• 🛠️  支持全组件的文档地址预览、快速跳转。
• 🛠️  支持框选代码片段，快速打开 Playground。
• 🛠️  支持图标组件的全图标预览。
• 🌍  支持中英文切换。

开发环境升级

在之前的版本中我们使用 VSCode 官方推荐的脚手架生成的项目模板进行开发，它是基于 webpack 的，并且有着自己的一套配置。在现在的版本中，我们将VSCode 插件开发的能力 加入到了我们自己开发的 Varlet Cli中， 现在我们使用基于 Vite 的 Varlet Cli 进行构建插件项目。项目从代码结构上干净了许多，编译速度也有明显的提升，同时也更容易维护了。

安装

VsCode 插件市场搜索 varlet-vscode-extension。

如何使用

输入组件名称关键字时出现语法提示，选中后进行快速补全。鼠标移动到组件名会显示组件的文档地址，可以点击进行跳转。这些特性和之前版本是一致的。

在标签的属性输入范围按下空格或属性关键字，显示属性补全提示和属性信息。这样有助于我们快速知道组件拥有哪些属性，属性的含义是什么，以及属性是什么类型的，减少用户查阅文档的次数。

输入 Icon 组件的 name 属性时出现图标预览，选中后进行语法补全。方便用户直观的选择图标，而不是每次都需要到官网选取。

框选代码片段，右键菜单中可以快速打开 Playground 对框选的代码进行线上预览。方便快速的跟小伙伴们线上调试代码，分享代码片段。

支持中英文切换，对国际化更加友好。（本来打算直接根据用户的 VSCode 语言环境来区分的，但是考虑到有相当一大部分中国人在使用英文的语言环境，比如作者...，所以还是做成了开关选项）

写在最后

希望能帮助到同学们吧～， 对于插件的源码感兴趣的可以看 Varlet VSCode Extension，同时也希望同学们多多支持 Varlet。 特此声明：本文跟 ChatGPT 没有半毛钱关系，感谢各位～。