为了账号安全,请及时绑定邮箱和手机立即绑定

VSCode最强助攻

标签:
Html5

VSCode最强助攻

VS Code是前端界必备的开发工具。页面仔小杨简单介绍几款高效、好用的插件,让原本单薄的VS Code如虎添翼,开发效率倍增。

vscode-icons

https://img1.sycdn.imooc.com/5eb533710001bbf008980188.jpg

vscode-icons不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标,例如,git、Markdown、配置项、工具类等


Better Comments

https://img1.sycdn.imooc.com/5eb53372000168fb08830195.jpg

一款让注释会说话的插件,注释前加 * ! ? todo //  就可以显示不同的样式

https://img3.sycdn.imooc.com/5eb533730001784908000136.jpg


HTML Snippets

https://img2.sycdn.imooc.com/5eb533730001a48b10030196.jpg

代码自动填充,让你编程飞起来


Auto Close Tag

https://img2.sycdn.imooc.com/5eb5337400019a4d09980192.jpg

自动添加HTML / XML关闭标签,对前端小伙伴伴儿们相当友好


Auto Rename Tag

https://img1.sycdn.imooc.com/5eb533740001646909530190.jpg

自动修改对应的标签


Trailing Spaces

https://img1.sycdn.imooc.com/5eb53375000184da09830196.jpg

结尾空格高亮显示,可以手动删除或配置快捷键删除


ESLint

https://img3.sycdn.imooc.com/5eb53376000166e411010201.jpg

EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你遗漏的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性


Prettier - Code formatter

https://img1.sycdn.imooc.com/5eb5337600010db410250194.jpg

在vs code -> settings中设置,在保存文件时vscode会自动优化代码

https://img3.sycdn.imooc.com/5eb5337700019d3f09910440.jpg



Bracket Pair Colorizer

https://img2.sycdn.imooc.com/5eb5337c0001d5d510490192.jpg

这个插件能够快速地找到大括号的另一半,特别是在阅读别人的代码时,有利于快速理解


Color Info

https://img1.sycdn.imooc.com/5eb5337c0001239b10010192.jpg

在颜色光标上悬停即可出现色彩模型,并且点击颜色值可更换样式值格式。


还有许多优秀的插件如codelf、Vetur、minapp、Simple React Snippets、Live Server等,灵活运用这些插件,让自己的开发效率和质量更上一个台阶。



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消