直接拿来用！VS Code 最强插件指南

作为一款优秀的代码编辑器，Visual Studio Code 中最常用的插件有哪些？

作者 | Adrian Hajdin，JavaScript 开发者

译者 | 虎说

责编 | 屠敏

出品 | CSDN（ID：CSDNNews）

以下为译文：

这是一篇关于我个人认为是很好的 Visual Studio Code 插件的简短文章。文中所有出现的插件都是我的最爱，如果你也有使用其他插件但我没有提及到的，欢迎在评论区推荐出来。

 

Code Time

Code Time（https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode）是一个开源插件，它可以在代码编辑器中提供编程度量。安装扩展插件程序后，系统将提示你登录其登陆界面。在代码编辑器内部，你可以按下 command + shift + P。这时将显示一个可以键入的窗口 Code Time，然后你可以选择在代码编辑器内或浏览器中显示数据。

在浏览器上，所有信息都将如下所示：

在浏览器内部，情况会更加丰富多彩：

如果你想知道或者你需要知道实际花费了多少时间编码，这个插件就会显得非常有用。

 

One Dark Pro

One Dark Pro 是 Atom最受欢迎的主题，它是有史以来 Visual Studio Code 下载次数最多的主题之一。

One Dark Pro图标主题

正如你在此示例中所看到的，我们为客户端和服务器等目录以及 .eslintrc .gitignore 和 package.json 等文件提供了图标。

One Dark Pro 一直使用 React、Angular、Redux 和许多不同的框架和库，为组件，工具，样式以及 reducer，actions 和 store 提供不同的目录图标。

Bracket Pair Colorize

此扩展插件允许使用颜色标识匹配的括号。当你拥有深层嵌套的对象或函数时，这个插件就会变的非常有用，如下所示：     

Bracket Pair Colorizer

 

Color Highlight

“颜色突出显示”显示任何颜色代码的直观表示。例如，如果你键入 RGB，RGBa，十六进制或任何其他颜色代码，你将能够在视觉上看到颜色，如下例所示：

颜色突出显示

 

Path Intellisense

Path Intellisense 是一个 Visual Studio Code 插件，可自动补全文件名。它对于在 React 中导入组件非常有用，因为你不必手动输入要查找的文件的路径。     

路径智能感知

ES7 React/Redux/GraphQL/React-Native片段

列表中的下一个扩展名是 ES7 React/Redux/GraphQL/React-Native 代码段。相当长的名字，但相信我，它会节省你很多时间，特别是如果你在 React 使用它的时候。此扩展程序为你提供了 ES7 中的 JavaScript 和 React/Redux 代码段以及 VS 代码的 Babel 插件功能。

在你的代码编辑器里面你可以按 command + shift + P，然后 ES7 Snippet Search 你会看到一长串的短命令，你可以运行这些命令以获得更长的代码片段。     

ES7 React/Redux/GraphQL/React-Native片段

你也可以在上面执行搜索，以便你可以轻松找到功能组件片段的命令。只需在编辑器中键入命令并按Enter即可运行命令。就这么简单，就像魔术一样。

 

GitLens — Git supercharged

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。

它可以帮助你通过 git-blame 注释和代码注释一目了然地查看代码作者身份，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解等等。

你只需要单击代码行，就可以看到编辑它的人、编辑它的时间以及提交的内容。     

GitLens

如果你还有其他的好的插件欢迎评论推荐！

原文链接：https://medium.freecodecamp.org/visual-studio-code-extensions-ff7f29b71341

本文为 CSDN 翻译，如需转载，请注明来源出处。