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

用户头像
web前端程序猿
关注
发布于: 2020 年 08 月 20 日
推荐几个实用的前端编辑工具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但就在您的编辑器内!





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





发布于: 2020 年 08 月 20 日 阅读数: 2033
用户头像

web前端程序猿

关注

分享才是最大的价值 2020.08.03 加入

不定时分享前端技术干货,你值得拥有,前端学习交流群:109029339

评论 (6 条评论)

发布
用户头像
这文章怎么过审的?
2020 年 08 月 28 日 16:47
回复
你这是心里不平衡?
2020 年 08 月 29 日 13:28
回复
用户头像
"CSS速览" 这名字在VSCode的extension里根本没法搜出来啊
2020 年 08 月 27 日 16:28
回复
可能作者忘记写插件名字
2020 年 08 月 31 日 10:46
回复
我找到了,css peak :)
2020 年 09 月 01 日 12:29
回复
我搜了一下,我竟然安装了
2020 年 09 月 01 日 19:59
回复
没有更多了
推荐几个实用的前端编辑工具VSCode插件,让你开发事半功倍,告别加班烦恼