Categories
程式開發

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


Visual Studio Code是由Microsoft开发的免费的跨平台文本编辑器。凭借其出色的性能和丰富的功能,它迅速成为了人群的最爱。

与大多数IDE一样,VSCode拥有一个扩展市场,其中包含成千上万个质量各异的插件。为了帮助您挑选值得下载的扩展程序,我们收集了最有用和有趣的扩展程序集。希望能帮助你快速完成项目的开发,如果对你有帮助,记得点个赞转发给身边的朋友哦!

直接在浏览器中打开

VSCode没有提供任何内置接口来直接在浏览器中打开文件。此扩展将“ 使用默认浏览器打开”项添加到上下文菜单中,并在您选择的客户端(Firefox,Chrome,IE)中打开命令选项板选项。

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

Quokka

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

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

CSS速览

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

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

HTML样板

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

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

更漂亮

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

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

颜色信息

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

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

图标字体

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

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

正则表达式预览

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

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

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

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