写在前面
大家好呀～掘金的同学们新年过的如何呀？作者在这里给大家拜一个晚年，祝同学们晚年幸福～ 嘻嘻～。 作者最近一段时间忙于工作和利用一些零碎的时间重做 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 没有半毛钱关系，感谢各位～。
