推荐几个实用的前端编辑工具 VSCode 插件,让你开发事半功倍,告别加班烦恼
![推荐几个实用的前端编辑工具VSCode插件,让你开发事半功倍,告别加班烦恼](https://static001.geekbang.org/infoq/5e/5edc83d1dd42e6daa9a73afe3af3a40e.gif)
Visual Studio Code是由Microsoft开发的免费的跨平台文本编辑器。凭借其出色的性能和丰富的功能,它迅速成为了人群的最爱。
与大多数IDE一样,VSCode拥有一个扩展市场,其中包含成千上万个质量各异的插件。为了帮助您挑选值得下载的扩展程序,我们收集了最有用和有趣的扩展程序集。希望能帮助你快速完成项目的开发,如果对你有帮助,记得点个赞转发给身边的朋友哦!
直接在浏览器中打开
VSCode没有提供任何内置接口来直接在浏览器中打开文件。此扩展将“ 使用默认浏览器打开”项添加到上下文菜单中,并在您选择的客户端(Firefox,Chrome,IE)中打开命令选项板选项。
![](https://static001.geekbang.org/infoq/16/16f0ed144a08f024a9461eb95f85636e.gif)
Quokka
Quokka是一个调试工具,可为您正在编写的代码提供实时反馈。它显示了函数结果和变量的计算值的预览。该扩展易于配置,可与JSX或TypeScript项目一起使用。
![](https://static001.geekbang.org/infoq/f3/f383af3230ab54b27bf5638aee6dd1c3.gif)
CSS速览
通过此扩展,您可以在样式表中跟踪CSS类和ID的定义。在HTML文件中的选择器上单击鼠标右键时,选择“ 转到定义”和“ 窥视”定义选项会将您转到为其设置样式的CSS代码。
![](https://static001.geekbang.org/infoq/a5/a50ab9e458dd6231a3d33bbdecbb82f6.gif)
HTML样板
HTML样板扩展名将使您不必手动编写新HTML文档的head和body标记。只需键入html一个空文件,然后按Tab键,就会生成一个干净的文档结构。
![](https://static001.geekbang.org/infoq/82/825569d8c8a7e0587ad9e72506f1ba56.gif)
更漂亮
目前,prettier是Web开发人员中最流行的代码格式化程序。不管是谁编写的,它都使您团队的代码看起来一样。此扩展使自动应用Prettier并快速格式化整个JS和CSS文档成为可能。如果您还想把ESLint混在一起,可以使用Prettier-Eslint。
![](https://static001.geekbang.org/infoq/c1/c100fe49abd07eb8893f942e669be3f0.gif)
颜色信息
小插件,可为您提供有关CSS中所用颜色的各种信息。通过将鼠标悬停在颜色上,您可以查看其外观的较大预览,以及有关将其转换为所有格式(十六进制,rgb,hsl和cmyk)的信息。
![](https://static001.geekbang.org/infoq/68/6821b52034b9eb9c7055a4479603595b.gif)
图标字体
微小的代码片段,用于在项目中添加图标字体(来自CDN),然后添加图标本身。该扩展程序支持20多种流行的图标集,包括“真棒字体”,“ Ionicons”,“ Glyphicons”和“ Material Design”图标。
![](https://static001.geekbang.org/infoq/7c/7c03dc5b3c304bdda7be80aeb42dc78c.gif)
正则表达式预览
实时测试正则表达式的有用工具。通过将正则表达式模式应用到在侧面打开的任何文本文件,并突出显示所有匹配项,即可工作。Kinda喜欢RegExr但就在您的编辑器内!
![](https://static001.geekbang.org/infoq/eb/eb4f2727c2025a41376947d7c98a89f1.gif)
好了,今天的分享就到这里,如果你是一个正准备学习前端或者正在学习前端的小伙伴,有什么问题可以前端学习交流群里提问,会有大咖为大家答疑,最后希望分享的所有内容能让你们喜欢。码字不易,方便的话请点赞转发,你的转发和点赞将是我继续分享的动力......
![](https://static001.geekbang.org/infoq/38/38c3a2d7b90e7eaaa263a0ae37711502.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
版权声明: 本文为 InfoQ 作者【web前端程序猿】的原创文章。
原文链接:【http://xie.infoq.cn/article/73083891e0378c2951d05c1c1】。文章转载请联系作者。
评论 (6 条评论)