是什么样的vscode插件能让你提升数倍的开发效率？ 点击关注公众号，回复”福利”即可参与文末抽奖分享下最近前端圈特别好用的vscode插件：（插件根据个人喜好选择，希望能帮助到大家??，如果有好的建议或者遇到的问题可以提一下issue，作者会在空闲之余极力的给予解决的） vscode icones将icones的网站页面以webview的方式直接在vscode中打开，这样你就不用脱离vscode去粘贴icones的代码和下载icon了image.pngvscode yesicon同样是一个icon网站，阮一峰老师推荐过，里面聚合了icones，并且里面的icon已经超过了18wimage.pngvscode tailwind magic针对tailwindcss中自定义的样式需要用w-[10px]包裹，为了实现和unocss一样舒适的写法w10px,才产出的插件，并且他甚至超越了unocss的写法，更加灵活简单，结合官方的Tailwind CSS Intellisense效果更好哦～，另外推荐Vscode Tailwind CSS Highlight，针对一些tailwindcss提供高亮背景色，还是会更加醒目的看出一些特殊样式，针对代码修改是用处挺大的image.pngto tailwindcss提供了css转换成tailwindcss的能力，可以hover到css显示对用tailwindcss的写法，对于初次使用tailwindcss是绝佳哦image.pngUnot提供了unocss的代码提示和将css转换成unocss的能力和更加简化unocss写法的转换能力,比如默认从原型图粘贴背景色#ffff，或者rgba，你需要自己特殊处理缩紧和用[#fff]包裹，然后这个插件开启后，可以直接写bg#fff 和 bg-rgba(10, 20, 30, .1)，他在保存后会转换成unocss可识别的语法，大大提高了开发效率image.pngcommon intellisense他提供了大量频繁使用的组件库的代码提示，他会让你在使用这个ui组件时，享受到丝滑的体验，你的一个空格就能提示这个组件上的属性，并且处理过滤了已经写好的属性，包括vue中的事件@xxx，当你输入@，就会提示组件上暴露的事件，并且你如果用到组件实例的ref，他会在你使用xxx.value.的时候提供实力的方法和对应的描述和参数，如果你不知道这个组件该怎么使用，他在属性上敲击空格会有一个vscode内部打开的官方文档，直接在vscode上查文档粘贴代码，带给你最舒适的开发体验，目前已经支持了 「vant、element、antd、antdv、varlet、naive、primevue、quasar、 @nextui-org/react」image.pngvscode emoji当你书写md文档时候，你可能想加入一些emoji，这个插件在你输入:,会提供emoji搜索的功能image.pnglogctrl+l，生成log日志，展示log位置和行数，并且可以选中变量，直接输出，另外他是直接go和rust中使用image.pngvscode json structure针对json格式的数据，嵌套层级比较深时，不利于查找对应父节点，他会hover到该层级时候，提供顶层如何能够获取到该层级的对象形式image.pngVitesse Theme Colorful X基于vitesse theme调整的样式，可以尝试换换主题image.pngMaterial Icon Theme Simon基于Material Icon按照自己的喜好调整了个别icon图标和对比度image.pngvscode script一个仓库代码脚本执行选择器，如果终端已经执行过该条命了，再次点击会复用，可以直接跳转到对应路径，支持monorepo和learn模式image.pngfunction-quick-locking最近在推上看到有人在卖这个类似功能的vscode插件，我觉得对于vue2的export default使用的话确实是能带来一定的便捷，就简单实现了一个，能够列出当前的methods、computed等等的数据，当然是支持setup的，目前支持了vue、js、ts，可以体验一下，对于老项目几千行代码，去查找一个函数可能搜索能搜到一大片，使用这个快捷跳转到指定方法，能带来一定的便利image.png点击小卡片，参与粉丝专属福利！！ 如果文章对你有帮助的话欢迎「关注+点赞+收藏」 阅读原文