是什么样的vscode插件能让你提升数倍的开发效率？

分享下最近前端圈特别好用的vscode插件：（插件根据个人喜好选择，希望能帮助到大家😊）

• vscode icones
  • 将icones的网站页面以webview的方式直接在vscode中打开，这样你就不用脱离vscode去粘贴icones的代码和下载icon了

• vscode yesicon
  • 同样是一个icon网站，阮一峰老师推荐过，里面聚合了icones，并且里面的icon已经超过了18w

• vscode tailwind magic
  • 针对tailwindcss中自定义的样式需要用w-[10px]包裹，为了实现和unocss一样舒适的写法w10px,才产出的插件，并且他甚至超越了unocss的写法，更加灵活简单，结合官方的Tailwind CSS Intellisense效果更好哦～，另外推荐Vscode Tailwind CSS Highlight，针对一些tailwindcss提供高亮背景色，还是会更加醒目的看出一些特殊样式，针对代码修改是用处挺大的

• to tailwindcss
  • 提供了css转换成tailwindcss的能力，可以hover到css显示对用tailwindcss的写法，对于初次使用tailwindcss是绝佳哦

• Unot
  • 提供了unocss的代码提示和将css转换成unocss的能力和更加简化unocss写法的转换能力,比如默认从原型图粘贴背景色#ffff，或者rgba，你需要自己特殊处理缩紧和用[#fff]包裹，然后这个插件开启后，可以直接写bg#fff 和 bg-rgba(10, 20, 30, .1)，他在保存后会转换成unocss可识别的语法，大大提高了开发效率

• common intellisense
  • 他提供了大量频繁使用的组件库的代码提示，他会让你在使用这个ui组件时，享受到丝滑的体验，你的一个空格就能提示这个组件上的属性，并且处理过滤了已经写好的属性，包括vue中的事件@xxx，当你输入@，就会提示组件上暴露的事件，并且你如果用到组件实例的ref，他会在你使用xxx.value.的时候提供实力的方法和对应的描述和参数，如果你不知道这个组件该怎么使用，他在属性上敲击空格会有一个vscode内部打开的官方文档，直接在vscode上查文档粘贴代码，带给你最舒适的开发体验

• vscode emoji
  • 当你书写md文档时候，你可能想加入一些emoji，这个插件在你输入:,会提供emoji搜索的功能

• log
  • ctrl+l，生成log日志，展示log位置和行数，并且可以选中变量，直接输出，另外他是直接go和rust中使用

• vscode json structure
  • 针对json格式的数据，嵌套层级比较深时，不利于查找对应父节点，他会hover到该层级时候，提供顶层如何能够获取到该层级的对象形式

• Vitesse Theme Colorful X
  • 基于vitesse theme调整的样式，可以尝试换换主题

• Material Icon Theme Simon
  • 基于Material Icon按照自己的喜好调整了个别icon图标和对比度

• vscode script
  • 一个仓库代码脚本执行选择器，如果终端已经执行过该条命了，再次点击会复用，可以直接跳转到对应路径，支持monorepo和learn模式