WEB前端开发新手有了这几个工具，以后写代码再也不用加班了，赶紧告诉身边的朋友吧

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但就在您的编辑器内！

好了，今天的分享就到这里，如果你是一个正准备学习前端或者正在学习前端的小伙伴，有什么问题可以VX（webmj-yzs）私信我，我这里也还有一些学习资料也可以免费分享给大家，点赞关注私信我即可，也可以加入我的前端学习交流群（109029339），希望分享的所有内容能让你们喜欢。码字不易，方便的话请点赞转发，你的转发和点赞将是我继续分享的动力......