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

待我称王封你为后i 2022-03-10 15:19 259阅读 0赞

> 翻译：疯狂的技术宅  
> 原文：[https://1stwebdesigner.com/top-free-extensions-for-vs-code/][https_1stwebdesigner.com_top-free-extensions-for-vs-code]

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

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

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

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

## Git增强：[GitLens][] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]

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

更多详情：[https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens][GitLens]

--------------------

## 语法高亮：[Beautify][] ##

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

更多详情：[https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify][Beautify]

--------------------

## 代码检查：[ESLint][] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]

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

更多详情：[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint][ESLint]

--------------------

## 调试器：[Debugger for Chrome][] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]

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

更多信息：[https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome][Debugger for Chrome]

--------------------

## 环境增强：[React Native Tools][] ##

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

更多信息：[https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native][React Native Tools]

--------------------

## 界面主题：[One Dark Pro][] ##

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

更多信息：[https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme][One Dark Pro]

--------------------

## 代码增强：[Bracket Pair Colorizer 2][] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 6]  
Bracket Pair Colorizer 2 是一个简单的扩展，可以使代码更容易阅读。它可以对匹配括号的对代码着色，使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

更多信息：[https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2][Bracket Pair Colorizer 2]

--------------------

## 视觉增强：[vscode-icons][] ##

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

更多信息：[https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons][vscode-icons]

--------------------

## 按自己的方式编写代码 ##

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

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

--------------------

欢迎关注微信公众号：jingchengyideng，每天第一时间阅读最新技术文章。

![SouthEast][]

[https_1stwebdesigner.com_top-free-extensions-for-vs-code]: https://1stwebdesigner.com/top-free-extensions-for-vs-code/
[https_code.visualstudio.com]: https://code.visualstudio.com/%E3%80%82
[Link 1]: https://marketplace.visualstudio.com/
[GitLens]: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]: /images/20220310/da57f5d0ad9f48d4900094c0d9658cf8.png
[Beautify]: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]: /images/20220310/73858b3ea84f44f5bc6f61a039a79a98.png
[Online JavaScript Beautifier]: https://beautifier.io/
[ESLint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]: /images/20220310/ca6f045bacf540718ad2137a9a80a4e2.png
[Debugger for Chrome]: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]: /images/20220310/1e464d9042d84db2a3707da30e9e55c0.png
[React Native Tools]: https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]: /images/20220310/595db619e46b4d30a6304b4efbfd96ea.png
[Gutenberg]: https://1stwebdesigner.com/how-will-gutenberg-change-your-wordpress-workflow/
[One Dark Pro]: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 5]: /images/20220310/dbdf739f19dd40a6b5f9e9926be0200e.png
[Bracket Pair Colorizer 2]: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 6]: /images/20220310/4dfa52e530ce471abbf54da577fe2562.png
[vscode-icons]: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 7]: /images/20220310/d1c8f37baa59430a9f9d04052d106444.png
[SouthEast]: /images/20220310/f1b6a7d7bd7844ed8ca857eef93e1bee.png