vscode前端必备扩展有哪些? 25个提升开发幸福感的VSCode扩展分享

通过该扩展可为文件列表选择漂亮可爱的图标。如果文件是JavaScript，那么在文件名旁边的material样式中会有一个JavaScript图标。若是从事视觉开发，那么该扩展就再适合不过了。

12.Javascript (ES6) Code Snippets

若你是JavaScript开发人员，Javascript (ES6) Code Snippets将是你最好的帮手。无论使用什么JavaScript框架，此扩展都将有所帮助。如果只是一遍又一遍地输入相同的通用代码，效果倒不是很明显。

该代码片段十分方便，是一个轻量级的库扩展，它可以绑定任何标准的JavaScript调用，因此只需键入快捷代码，即可看到整个通用代码自动输入到编辑器中。该扩展不仅支持Javascript ES6，还支持Typescript、Reactjs、Vue和HTML。

13.LiveServer

在使用Live Server时，该VSCode扩展将有助于打开当前项目的Live web服务器。一般这项工作用像Webpack这样的构建器完成即可，但是该扩展显然更为有效。只需右击并打开运行live server，便会自动完成剩余的工作。

14.Github 扩展

若正在使用Github作为项目存储库，或者希望使用其他开发人员的源代码存储库，那么这个扩展就是为您量身定做。

顺便一提，Github现在由微软所有和管理，所以Github和VSCode现在都是微软产品之一。

使用Github扩展，可以轻松地连接其他开发人员的存储库、喜欢的开发人员的存储库，甚至自己的存储库。经常使用Github的话，切换存储库将极为顺手。

15.GitLens

Gitlens是另一个好用的扩展。它扩充了当前的VSCode Git功能，能够从以前所作的提交和更改中同时执行代码比较，还拥有其他一些很厉害的特性。

16.NPM

所有现代开发人员都知道NPM是什么，以及它为什么这么重要。Node包管理器是一个可管理Package .json文件的扩展。如果需要的依赖项以及NPM包的版本控制尚未安装，它会给出警告。

笔者所处理的大多数bug和错误都来自于使用的NPM包、函数和特性，因为它们与其他包不兼容，所以无法运行。如果没有它所要求的依赖项没有兼容的版本那可真是鸭梨山大！

17.Beautify

Beautify是另一用于代码格式化的良好扩展，与前文提到的Prettier几乎一样，但是效果更漂亮。到目前为止，它已有将近1200万的下载量了，还用笔者再多说什么吗。它可以格式化用Javascript、JSON、Sass、CSS和HTML编写的代码。

18.Live Sass Compiler

如果您喜好Sass风格，或者只是因为它是项目应用程序需求的一部分而恰好正在使用Sass，那么这个VSCode扩展就是为您而生的!

它会实时将SASS/SCSS文件编译成CSS文件，并自动提供应用程序或浏览器中已编译样式的实时预览。

19.Emmet

自笔者开始使用VSCode以来，就一直在使用Emmet。它可以帮助开发人员提高编写代码的速度。使用该扩展不久之后就再也离不开它了。

20.VSCode Icons

这是为前端开发人员打造的VSCode扩展。与前文提到的material图标很相似，但是设计不同。前端开发人员通常都喜欢可视化，对吧。这个图标有助于查看文件类型，不管它们是HTML,CSS, Javascript还是其他类型。

21.颜色选择器

颜色选择器扩展有助于轻松选择CSS文件中的颜色。它将立即反映或应用到当前正在处理的属性。若喜欢使用RGBA颜色，也可以使用。

22.Quokka

Quokka被称为JavaScript开发人员的现代便签板。其构建旨在帮助开发人员进行代码检查。这是一个完美的解决方案。

与其他VSCode扩展相比，它非常轻量级、高效且强大，有助于加快工作进程。同时，它又是实时的，可以给出即时反馈。

它可以为每个结果匹配一个固定的颜色类型，以便开发人员更容易理解代码。

23.Live Share

Live Share是VSCode文本编辑器中最先进的特性之一。当与团队成员一起工作时，它无可挑剔。LiveShare的功能之一是允许每个开发人员实时地与其他开发人员共享代码片段。

这一点堪称完美，且有助于实现更加高效和多产团队协作。LiveShare允许即时共享当前的项目，即使在调试时也是如此。

协作者不需要安装任何存储库、sdk或任何东西来连接其他开发人员的当前代码。团队中的每个人都可以通过协作来远程探索和修复问题。

24.ES7, React, Redux & GraphQL Snippets

高级开发人员目前使用的多是JavaScript框架(如React)，以及其他与生产和复杂应用程序兼容的技术，这项扩展是为他们量身定做的。

反复输入标准代码效率低下。在该代码片段的帮助下，可以轻松创建基于类的组件、功能组件、输入项、生命周期方法等，只需键入快捷代码，这是笔者使用最多的扩展之一，因为笔者一直使用的是Reactjs和React Native。

25.REST 客户端

另一个高级工具是Rest客户端扩展，在使用其他第三方工具和APIs时，它将大有帮助。另外也有助于轻松发出HTTP请求。

通过此扩展可轻松地在代码编辑器中直接调用和结束，大大节省了时间——你可以使用这个方法，而不是只为实现一个请求而来回切换浏览器或邮箱。

以上就是25个提升开发幸福感的VSCode扩展分享，希望大家喜欢，请继续关注脚本之家。

相关推荐：

vscode怎么设置键映射扩展? vscode键映射的教程

vscode怎么新建一个窗口? vscode打开新窗口的技巧

VSCode怎么添加IntelliJ IDEA的快捷键? VSCode新增快捷键扩展的技巧

最新评论