超强VS Code，8个顶级扩展插件让前端开发如虎添翼！

2019-05-05 本文已影响6人 deb302cd70dd

微软的 VS (Visual Studio) Code 是一个免费的开源代码编辑器，最近越来越受欢迎。它非常轻巧、灵活，同时也提供了很多强大的功能。它支持绝大多数流行的编程语言，包括PHP、JavaScript、C++ 等。

VS Code 是跨平台的。它不仅能用于 Windows 平台，同时也提供 Linux 和 Mac 版本。下载地址：https://code.visualstudio.com/。

但也许最酷的是 VS Code 提供了规模超大的扩展插件，在扩展商店有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器，更好地满足日常开发的需要。

下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。

Git增强：GitLens

GitLens

虽然Git功能已内置于 VS Code 中，但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。

语法高亮：Beautify

Beautify

你是否非常依赖语法高亮显示？如果是的话，Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier，允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。

代码检查：ESLint

ESLint

JavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。

调试器：Debugger for Chrome

Debugger for Chrome

对于在运行时期间对代码进行调试的开发人员，Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能，包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例，或把调试器附加到单独运行的浏览器实例。

环境增强：React Native Tools

React Native Tools

React 是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器（又名 Gutenberg）是基于它建立的。如果你是众多的 React 程序员之一，那么React Native Tools是必不可少的扩展。它增加了运行 react-native 命令的功能，还能帮助你调试自己的代码。

界面主题：One Dark Pro

One Dark Pro

在敲代码时，有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。

代码增强：Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 是一个简单的扩展，可以使代码更容易阅读。它可以对匹配括号的对代码着色，使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

视觉增强：vscode-icons

vscode-icons

也许 vscode-icons 是 VS Code 最有效的视觉调整扩展之一。它能够处理你项目中平淡的文件列表，并添加丰富多彩、表示特定语言的图标。这样可以很容易地让你知道代码文件的类型。能够给工作区添加个性化设置是非常受欢迎的功能。

按自己的方式编写代码

VS Code 提供的扩展插件数量惊人，这使其成极具吸引力的编辑器。你可以自由的进行设置，来匹配自己使用的语言和设置喜欢的工作区视觉效果。

此外，它还提供了企业和开源文化的有趣组合。 VS Code 得到了微软的支持，能够确保未来会得到更好的维护。开源社区围绕软件创建了一个欣欣向荣的生态系统，可以称作是企业与开源文化相结合的典范。

这里推荐一下我的前端学习交流扣qun：767273102，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击：前端学习圈