阮一峰老师推荐的vscode的插件 vscode-common-intellisense

1,023 阅读2分钟

大家好,我是 Simon,一个开源爱好者,分享下一个很实用的搬砖插件,记得点赞👍

vscode-common-intellisense 是一个针对 vscode 中使用 UI 组件库时的一个增强,提供了组件的属性方法事件提示类型

先来聊一下它的创作缘由吧,工作中多多少少都需要借助 UI 库来快速开发,首选就是 star 数和维护比较活跃的 UI 库吧,然后你需要查文档,然后来回切换,再找 demo

  1. 这个插件内置了文档,解决了来回查文档的问题,另外在你对组件有了一定的掌握后,你可能也不需要查文档了,因为组件库都大大小小类似,你关心的是他的属性,比如一个 button 组件,你需要的是知道他的改变大小的属性,和预设的几种颜色,比如 A 组件库中,他叫 size,B 组件库中他叫 measurement,这只是随便的举例,另外即使名字相同,可是他需要传入的 value 也可能完全不同,你可能要再次的使用文档大法,这样你使用一个组件的时间基本都在文档之中,这会让我很崩溃,我虽然解决了来会切 ide 和 浏览器 文档的问题(内置文档),但是我来回看文档也是很累的
  2. 所以它能在你使用组件的时候,通过空格提示里面的属性,再你使用 @on 开头的输入时,提供事件,在你用 ref,使用 ref.current.ref.value. 时,提供你 methods, 甚至还会在模板中写到组件名时,上面出现 slotName,提示你内部有哪些可以用的插槽,你点击即可快速常见插槽项
  3. 你可以针对某一个组件 hover 组件名,展示一个使用详情
  4. 他目前支持了绝大多数主流的组件库
  • vant 4
  • element 2
  • element-plus 2
  • antd 1、4、5
  • antdv 1、3、4
  • varlet 2、3
  • naive 2
  • primevue 3
  • quasar 2
  • @nextui-org/react 2
  • @nuxt/ui 2
  • vuetify 3
  • radix-vue 1
  • next-ui 2
  • arco-design/react 2
  • arco-design/vue 2
  • uview-ui 1、2
  • taro 3

demo 效果图

antdv demo

varlet demo

vant demo

antd demo

element-ui demo

naive-ui demo

nuxt-ui demo

vuetify demo

radix-vue demo

next-ui demo

arco-design/react demo

arco-design/vue demo