使用顶级 VSCode 扩展来加快开发 JavaScript

VSCode 是一个开源的跨平台编辑器，已经成为程序员的最爱，特别是在 Web 开发社区。 它快速，可扩展，可定制，并具有大量功能。 如果你还没有使用 VSCode ，你应该了解一下。

VSCode 已经有了数千个扩展。 我将在这篇文章中列出我日常使用的一些扩展。 让我们开始！

Quokka.js

Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。 这意味着它会在你输入后立即运行您的代码，并在您的代码编辑器中显示各种执行结果。 建议你亲自尝试一下。

安装此扩展后，可以按 Ctrl/Cmd(⌘) + Shift + P 显示编辑器的命令选项面板，然后键入 Quokka 以查看可用命令的列表。 选择并运行 “新建JavaScript文件” 命令。 您也可以按（⌘ + K + J）直接打开文件。 您在此文件中键入的任何内容都会立即执行。

Quokka.js类似的扩展 –

 

• Code Runner – 支持多种语言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
• Runner

括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow) 

花括号和园括号是许多编程语言不可分割的部分。在 JavaScript 等语言中，在一屏代码中花括号和园括号可能有多层嵌套，然而缺没有简单的机制来识别这些括号从哪里开始，又在哪里结束对。欢迎使用 括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。这是两个不同的扩展。然而，他们就像是一对情侣，可以完美的配合使用。这些扩展将为您的编辑器添加一系列颜色，并使代码块易于辨别和令人愉悦。一旦你习惯了它们，如果 VSCode 没有它们就会让人觉得很平淡。

愚人码头注：彩虹缩进(Indent Rainbow)扩展为每个缩进层级用四种不同颜色交替着色。

不使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)后

代码片段(Snippets)

代码片段(Snippets)就是在编辑器中使用缩写。 例如，你想在编辑中编写 import React from 'react'; 这样一段代码，通过代码片段(Snippets)，你可以输入 imr 并按 Tab 键来展开此代码段。 同样，clg 会展开为 console.log。

各种各样的框架和类库都有很多代码片段：Javascript（或任何其他语言），React，Redux，Angular，Vue，Jest。 我个人认为 Javascript 代码片段非常有用，因为我主要使用 JS 。

一些很好的代码片段扩展 –

• JavaScript (ES6) code snippets
• React-Native/React/Redux snippets for es6/es7
• React Standard Style code snippets

TODO高亮

通常在进行编码时，你认为可能有更好的方法来执行相同的操作。 这时你留下注释// TODO: 需要重构 或其他相关的东西。 但是你很容易忘记了这个注释，并将你的代码推送到主版本库(master) 或者生产环境(production)。 但是你如果使用 Todo Highlighter（高亮），这钟请客就不会发生。

它以鲜艳的颜色突显您的 “TODO” / “FIXME” 或代码中的任何其他注释，因此它始终清晰可见。 另外还有一个很好的功能是 List Highlighted annotations 。 它会在控制台中列出了所有 TODO 。

使用 Todo Highlighter（高亮）类似的扩展 –

 

• Todo+ —  更强大的 Todo 高亮扩展，具有更多功能。
• Todo Parser

Import Cost(花销)

Import Cost 允许您查看导入模块的大小。 这对 Webpack 等打包工具来说是一个巨大的帮助。 您可以查看是导入整个库还是仅导入特定实用程序。

不足之处是它不显示自定义文件或模块的花销。

使用 Import Cost

REST Client

作为Web开发人员，我们经常需要使用 REST API。为了检查URL并检查响应，使用 Postman 等工具。但是，当编辑器可以轻松完成相同的任务时，为什么还要使用不同的应用程序呢。欢迎使用 REST Client。它允许您在Visual Studio Code中直接发送 HTTP 请求并查看响应。

使用 REST Client

自动闭合标记(Auto Close Tag)和自动重命名标记(Auto Rename Tag)

自从 React 问世以及它在过去几年中获得的关注度，类 HTML 的 JSX 语法现在很风靡。我们再次在 JavaScript 代码中使用使用标记。任何 Web 开发人员都会告诉您输入标记很麻烦。在大多数情况下，我们需要一种能够快速轻松地生成标签及其子代的工具。VSCode 中内置的 Emmet 就是一个非常好的例子。但是，有时候，你只想要一些简单而简洁的东西。例如自动更新标记，它在您键入开始标记时自动生成结束标记。当您更改同一个标记对时，结束标记会自动更改。 这两个扩展就是这样做的。

它还适用于JSX和许多其他语言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。

在这里获取这两个扩展 – 自动闭合标记(Auto Close Tag) 和 自动重命名标记(Auto Rename Tag)

使用 Auto Rename Tag使用 Auto Close Tag类似的扩展 –

 

• Auto Complete Tag —  结合自动重命名和自动闭合标记的功能。
• Close HTML/XML tag

GitLens

正如其作者所说，GitLens增强了Visual Studio Code中内置的Git功能。 它包含了许多强大的功能，例如通过跟踪代码显示的代码作者，提交搜索，历史记录和GitLens资源管理器。 您可以在 此处 阅读这些功能的完整说明。 我只想说你应该安装这个插件，如果你使用git做任何事情的话。

使用GitLens还有其他扩展专注于特定功能。 如果 GitLens 感到臃肿或者你不会使用GitLens 的许多功能，那么你可以安装其他类似的扩展。

 

类似的扩展 –

• Git History — 显示提交历史的精美图表等等。推荐。
• Git Blame — 它允许您在状态栏中查看当前所选行的Git Blame信息。 GitLens也提供了类似的功能。
• Git Indicators — 它允许您查看受影响的文件以及状态栏中添加或删除的行数。
• Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它允许您使用单个命令在浏览器中打开repo。

Git项目管理器(Git Project Manager,GPM)

Git项目管理器(Git Project Manager,GPM)允许您直接从 VSCode 窗口打开一个针对Git存储库的新窗口。 基本上，你可以打开另一个存储库而无需离开VSCode。

安装此扩展后，您必须将 gitProjectManager.baseProjectsFolders 设置为包含 repos 的URL列表。例如：

JavaScript 代码:

1. {
2. "gitProjectManager.baseProjectsFolders": [
3. "/home/user/nodeProjects",
4. "/home/user/personal/pocs"
5. ]
6. }

使用 Git Project Manager类似的扩展 –

 

• Project Manager – 我没有亲自使用它，但它有百万+安装。所以建议你一定要看一下。

Indenticator(缩进指示器)

Indenticator(缩进指示器) 在视觉上突出显示当前的缩进深度。因此，现在您可以轻松区分在不同层次缩进的各种代码块。

使用 Indenticator类似的扩展 –

 

• Guides

VSCode Icons

使您的编辑更具吸引力的图标！

使用 VSCode Icons类似的扩展 –

 

• VSCode Great Icons
• Studio Icons

Dracula (主题)

Dracula 是我最喜欢的主题。

Dracula 主题

---

其它推荐

• Fira Code — 带编程连体字的等宽字体。 愚人码头注：clone 项目后，找到 ttf 文件夹，然后安装该文件夹中的字体文件。重新启动 VSCode ，选择TOOLS -> Options -> Fonts and Colors ，选择 Fira Code 即可
• Live Server — 一个具有静态和动态页面的实时重新加载功能的本地开发服务器。
• EditorConfig for VS Code – 此插件尝试使用.editorconfig文件中的设置覆盖用户/工作区设置。 不需要其他或特定于 vscode 的文件。 与任何EditorConfig插件一样，如果未指定root = true，EditorConfig将继续在项目外部查找.editorconfig文件。
• Prettier for VSCode — 一个代码格式化工具。
• Bookmarks – 它可以帮助您在代码中导航，轻松快速地在重要位置之间移动。不再需要搜索代码。它还支持一组选择命令，允许您选择书签线和书签线之间的区域。它对日志文件分析非常有用。
• Settings Sync — 允许您在 Gist 中保存用户设置，扩展名和快捷键绑定，以便您可以在几分钟内设置新的 VSCode。
• Multiple clipboards for VSCode — 覆盖常规的“复制”和“剪切”命令，以将选择保留在剪贴板中。还增加了将几个文本块复制到单个复制缓冲区的功能。
• Path Intellisense — Visual Studio Code插件，可自动填充文件名。
• Version Lens — 在Visual Studio代码编辑器中显示npm，jspm，bower，dub和dotnet核心的软件包版本信息。

这些是我经常使用的一些VSCode扩展。您还喜欢其他哪些扩展和主题？欢迎留言告诉我，非常感谢！

Visual Studio Code 相关热文

• Visual Studio Code 最好的功能、插件和设置
• 使用顶级 VSCode 扩展来加快开发 JavaScript
• Visual Studio Code 必备插件，主题及语法提示

原文链接：https:///top-javascript-vscode-extensions-for-faster-development-c687c39596f5