推荐几个实用的前端编辑工具 VSCode 插件,让你开发事半功倍,告别加班烦恼

Visual Studio Code是由Microsoft开发的免费的跨平台文本编辑器。凭借其出色的性能和丰富的功能,它迅速成为了人群的最爱。
与大多数IDE一样,VSCode拥有一个扩展市场,其中包含成千上万个质量各异的插件。为了帮助您挑选值得下载的扩展程序,我们收集了最有用和有趣的扩展程序集。希望能帮助你快速完成项目的开发,如果对你有帮助,记得点个赞转发给身边的朋友哦!
直接在浏览器中打开
VSCode没有提供任何内置接口来直接在浏览器中打开文件。此扩展将“ 使用默认浏览器打开”项添加到上下文菜单中,并在您选择的客户端(Firefox,Chrome,IE)中打开命令选项板选项。

Quokka
Quokka是一个调试工具,可为您正在编写的代码提供实时反馈。它显示了函数结果和变量的计算值的预览。该扩展易于配置,可与JSX或TypeScript项目一起使用。

CSS速览
通过此扩展,您可以在样式表中跟踪CSS类和ID的定义。在HTML文件中的选择器上单击鼠标右键时,选择“ 转到定义”和“ 窥视”定义选项会将您转到为其设置样式的CSS代码。

HTML样板
HTML样板扩展名将使您不必手动编写新HTML文档的head和body标记。只需键入html一个空文件,然后按Tab键,就会生成一个干净的文档结构。

更漂亮
目前,prettier是Web开发人员中最流行的代码格式化程序。不管是谁编写的,它都使您团队的代码看起来一样。此扩展使自动应用Prettier并快速格式化整个JS和CSS文档成为可能。如果您还想把ESLint混在一起,可以使用Prettier-Eslint。

颜色信息
小插件,可为您提供有关CSS中所用颜色的各种信息。通过将鼠标悬停在颜色上,您可以查看其外观的较大预览,以及有关将其转换为所有格式(十六进制,rgb,hsl和cmyk)的信息。

图标字体
微小的代码片段,用于在项目中添加图标字体(来自CDN),然后添加图标本身。该扩展程序支持20多种流行的图标集,包括“真棒字体”,“ Ionicons”,“ Glyphicons”和“ Material Design”图标。

正则表达式预览
实时测试正则表达式的有用工具。通过将正则表达式模式应用到在侧面打开的任何文本文件,并突出显示所有匹配项,即可工作。Kinda喜欢RegExr但就在您的编辑器内!

好了,今天的分享就到这里,如果你是一个正准备学习前端或者正在学习前端的小伙伴,有什么问题可以前端学习交流群里提问,会有大咖为大家答疑,最后希望分享的所有内容能让你们喜欢。码字不易,方便的话请点赞转发,你的转发和点赞将是我继续分享的动力......

版权声明: 本文为 InfoQ 作者【web前端程序猿】的原创文章。
原文链接:【http://xie.infoq.cn/article/73083891e0378c2951d05c1c1】。文章转载请联系作者。
评论 (6 条评论)