8 个给前端的顶级 VS Code 扩展插件

翻译：疯狂的技术宅
原文：https://1stwebdesigner.com/to...

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

微软的 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 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。

更多详情：https://marketplace.visualstu...

语法高亮：Beautify

Beautify

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

更多详情：https://marketplace.visualstu...

代码检查：ESLint

ESLint

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

更多详情：https://marketplace.visualstu...

调试器：Debugger for Chrome

Debugger for Chrome

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

更多信息：https://marketplace.visualstu...

环境增强：React Native Tools

React Native Tools

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

更多信息：https://marketplace.visualstu...