全文共1689字,预计学习时长5分钟
![93eebec98937de7837520176770101be.png](https://i-blog.csdnimg.cn/blog_migrate/834c4212272cc4d9c61e833f9ed4a966.jpeg)
图源:Unsplash
在2017年,VSCode有260万月活跃用户(这是我找到的最新官方数据,现在肯定更多),可以说是目前最好的代码编辑器。
它最大的一个特点是,插件多可自定义。
MarketPlace(插件商店)提供了大量扩展插件,开发人员完全可以根据需求进行自定义设置,这也有助于编写高质量的代码。
本文将为编写HTML,CSS,JavaScript以及使用VueJS或ReactJS等框架的前端工程师推荐10个VS Code扩展插件。
1. CSS Peek
![784cc031fdfa4170adb7a9bbc4d663cc.png](https://i-blog.csdnimg.cn/blog_migrate/03b3d87c3c6a6a1a30d4b133c13c278e.jpeg)
CSSPeak通过识别和枚举已应用的不同样式以帮助开发者处理标记语言的类字符串和ID。这很方便,因为开发者不再需要在HTML和CSS文件之间频繁跳转。
2. ESLint
![095ae2646807d5533e0d452c7557681d.png](https://i-blog.csdnimg.cn/blog_migrate/26f56bffd2fd5453d7044e917714440f.jpeg)
我难以评价该插件,因为它有很多追随者,但也有很多开发者不喜欢它。而毋庸置疑的是,该插件有助于编写简洁代码,如果你是JavaScript开发者,那这个下载量达2400万次的扩展插件是最好的选择。
3. NPM
![a8a4c077b0016e761677d0488192b5d8.png](https://i-blog.csdnimg.cn/blog_migrate/41a3a651c2b6c1ac10c0e27698349498.jpeg)
所有开发者应该都认识NPM,其全称是Node Package Manager(node包管理器)。该扩展插件有助于管理Package.json,当生产环境依赖包未安装时会发出警告,并确保安装的版本正确。
4. Live Sass Compiler
![937b2bbdad5f4373e5a047ff465fa9e1.png](https://i-blog.csdnimg.cn/blog_migrate/bc05d2c5cda0a66858ed55272691036a.jpeg)
LiveSass Compiler虽然很小,但功能极其强大,它可以将SASS /SCSS文件实时编译为CSS文件,并在浏览器中展示已编译样式的实时预览。
5. Debugger for Chrome
![52dc6f6f2535b43be1b0b30638442eba.png](https://i-blog.csdnimg.cn/blog_migrate/2bcf86b71c8d12136e5ac77a036aa1e5.jpeg)
对许多开发者而言,Chrome是开发、测试和调试代码的首选浏览器。通过这个VS Code的官方扩展插件,开发者可以直接在VS Code中进行以上操作——没什么能比这更棒了!
6. JavaScript Code Snippets
![3c405702d62476ae89ab0d7d9549f10d.png](https://i-blog.csdnimg.cn/blog_migrate/98b9999a5513fc770dc49cfec62b144e.jpeg)
此扩展插件的创建者是Charalampos Karypidis,下载量达450万次。它提供用于编写JavaScript,Typescript,React,Vue,HHTML等的代码片段,以及ES6语法支持。
7. Prettier
![0bd88d82c2e6217cbd236411d5c70488.png](https://i-blog.csdnimg.cn/blog_migrate/8f0fbe8fd6aa29967b2be33b631c91fa.jpeg)
该插件十分简洁,编写者为Esben Petersen,下载量近1400万次。它帮助开发者格式化代码,并提供颜色关键字以使代码更具可读性。
8. Beautify
![eafd21d4ad9501a84e75ada228911efb.png](https://i-blog.csdnimg.cn/blog_migrate/c1317f3da0ae2e2f4edc2afecd54da3a.jpeg)
它同Prettier十分类似,是一种出色的代码格式化扩展插件,近1200万的下载量足以说明一切。可以用它格式化以JavaScript,JSON,CSS,Sass和HTML编写的代码。
9. Vetur
![6d5ad7aca6bee155c57a9cfe6eca4c44.png](https://i-blog.csdnimg.cn/blog_migrate/b72c85a1e884aa0b39a3991da13fdaa4.jpeg)
Vetur是官方的VueJS扩展插件,下载量逾2000万次。其功能包括:错误检查、自动补全及提供Vue代码片段。如果你也是一名Vue开发者,就能切身体会到这个插件的优秀之处!
10. Live Server
![3cf16503c4c14be350ad93f72c9fb8c0.png](https://i-blog.csdnimg.cn/blog_migrate/16f50d3dd9db511193a15ea86d7da9d1.jpeg)
LiveServer和LiveSass Compiler的创建者是同一个人——RitwickDey。在VS Code中,LiveServer能开启一个本地开发服务器,为静态网页和动态网页提供服务。使用编辑器中的go-live按钮,开发者可以立即把代码放到服务器上,该扩展插件还支持实时刷新页面——真是太棒了!
结论
![1b5c4ff3c523b6899cf3c7386c4f907c.png](https://i-blog.csdnimg.cn/blog_migrate/18703ccff25a61c8aeeeff8032c5a4a6.jpeg)
本文推荐的扩展插件并不完整,也不一定是最好的,但我希望它能为开发者提供一些好的工具来编写高质量的代码,让网页开发者如虎添翼。
如果大家发现了一些有用的工具,或其他你认为是顶级的扩展插件,记得在评论区里和大家一起分享哦。
![58d403905080c7f19e966996f7ed9773.png](https://i-blog.csdnimg.cn/blog_migrate/585e345b00402252330e881d5bcc2c31.jpeg)
![2b0d8294a31f3faeccdc9e3e08c4b3a2.png](https://i-blog.csdnimg.cn/blog_migrate/c7120479b30c96636bfaf3428a732686.jpeg)
留言点赞关注
我们一起分享AI学习与发展的干货
如转载,请后台留言,遵守转载规范