Quokka.js

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

Quokka.js类似的扩展 –

eclipseemmetjsp进步 JavaScript 开辟效力的高等 VSCode 扩大 React

Code Runner – 支持多种措辞，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
Runner括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)

花括号和圆括号是许多编程措辞不可分割的部分，在 JavaScript 等措辞中，在一屏代码中花括号和园括号可能有多层嵌套，有些括号不太随意马虎识别哪个对应哪个，然而却没有大略的方法来识别这些括号前后的对应关系。

括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。
这是两个不同的扩展。
然而，他们就像是一对情侣，可以完美的合营利用。
这些扩展将为你的编辑器添加一系列颜色，并使代码块易于辨别，一旦你习气了它们，如果 VSCode 没有它们就会让人以为很平淡。

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

不该用括号配对着色

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

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

snippets(代码片段)

代码片段是编辑器中的短代码。
因此，可以输入 imr 并按 Tab 来展开该代码片段，而不是' import React from '。
类似地，clg 变成了 console.log。

各种各样的框架和类库都有很多代码片段：Javascript，React，Redux，Angular，Vue，Jest。
我个人认为 Javascript 代码片段非常有用，由于我紧张利用 JS 。

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

JavaScript (ES6) code snippetsReact-Native/React/Redux snippets for es6/es7React Standard Style code snippetsTODO高亮

常日在进行编码时，你认为可能有更好的方法来实行相同的操作。
这时你留下注释// TODO: 须要重构 或其他干系的东西。
但是你很随意马虎忘却了这个注释，并将你的代码推送到主版本库(master) 或者生产环境(production)。
但是你如果利用 Todo Highlighter（高亮），它会高亮的显示并让你随意马虎看到这个注释。

它以通亮的颜色突出代码中的 “TODO/FIXME” 或代码任何其他注释，以便始终清晰可见。
其余还有一个很好的功能是 List Highlighted annotations ，它会在掌握台中列出了所有 TODO。

TODO高亮

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

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

该扩展许可您查看导入模块的大小，它对 Webpack 中的 bundlers 有很大帮助，你可以查看是导入全体库还是只导入特定的实用程序。

Import Cost

REST Client

作为 web 开拓职员，我们常常须要利用 REST api。
为了检讨url和检讨相应，利用了 Postman 之类的工具。
但是，既然编辑器可以轻松地完成相同的任务，为什么还要利用不同的运用程序呢? REST Client 它许可你发送 HTTP 要求并直接在 Visual Studio 代码中查看相应。

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

自从React的涌现以及它在过去几年得到的吸引力以来，以 JSX 形式涌现的类似 html 的语法现在非常盛行。
我们还必须利用 JavaScript 标签进行编码。
任何web开拓职员都会见告你，输入标签是一件痛楚的事情。
在大多数情形下，我们须要一个能够快速、轻松地天生标签及其子标签的工具。
Emmet 是 VSCode 中一个很好的例子，然而，有时候，你只是想要一些大略明了的东西。
例如自动更新标签，它在你输入开始标签时自动天生结束标签。
当你变动相同的标签时，关闭标记会自动变动，这两个扩展便是这样做的。

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

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

自动重命名标记

自动闭合标记

类似的扩展 –

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

正如其作者所说，GitLens 增强了 Visual Studio Code 中内置的 Git 功能，它包含了许多强大的功能，例如通过跟踪代码显示的代码作者，提交搜索，历史记录和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列表。
例如：

Git项目管理器

Git项目管理器

类似的扩展 –

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

Beautify (代码格式化)

Beautify 可以格式化html css js

Beautify效果

Vue文件可以在设置中添加一下配置 轻松格式代码!

Beautify

Indenticator(缩进指示器)

它在视觉上突出显示当前的缩进个数，因此，你可以轻松区分在不同级别缩进的各种代码块。

Indenticator

VSCode Icons

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

VSCode Icons

类似的扩展 –

VSCode Great IconsStudio IconsEVA (Theme)

EVA 是我最喜好的主题。

EVA-light

EVA-dark

我们可以利用快捷键来快速的选择改换主题；

首先：按下 Ctrl + k

然后再按下：Ctrl + t

其它推举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 – 它可以帮助您在代码中导航，轻松快速地在主要位置之间移动。
不再须要搜索代码，它还支持一组选择命令，许可您选择书签线和书签线之间的区域，它对日志文件剖析非常有用。
Path Intellisense — Visual Studio Code插件，可自动添补文件名。
Version Lens — 在Visual Studio代码编辑器中显示npm，jspm，bower，dub和dotnet核心的软件包版本信息。