想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！
Quokka.js
Quokka.js 是一个用于 JavaScript 和 TypeScript 的及时运转代码平台。这意味着它会及时运转你输入后的代码，并在编辑器中显现种种实行效果，发起亲身尝试一下。
装置此扩大后，可以按Ctrl / Cmd（⌘）+ Shift + P显现编辑器的敕令选项板，然后键入 Quokka 以检察可用敕令的列表。挑选并运转 “New JavaScript File”敕令。你也可以按（⌘+ 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 没有它们就会让人以为很清淡。
不运用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)
运用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)后
snippets(代码片断)
代码片断是编辑器中的短代码。因而，可以输入 imr 并按Tab 来睁开该代码片断，而不是’import React from ‘。相似地，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
该扩大许可您检察导入模块的大小，它对 Webpack 中的 bundlers 有很大协助，你可以检察是导入全部库照样只导入特定的实用程序。
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 tag
GitLens
正如其作者所说，GitLens 增强了 Visual Studio Code 中内置的 Git 功用，它包括了许多壮大的功用，比方经由过程跟踪代码显现的代码作者，提交搜刮，汗青记录和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列表。比方：
{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}
相似的扩大 –
Project Manager – 我没有亲身运用它，但它有百万+装置。所以发起你肯定要看一下。
Indenticator(缩进指示器)
它在视觉上凸起显现当前的缩进个数，因而，你可以轻松区分在差别级别缩进的种种代码块。
VSCode Icons
使您的编辑更具吸引力的图标！
相似的扩大 –
Dracula (Theme)
Dracula 是我最喜欢的主题。
我们可以运用快捷键来疾速的挑选替换主题；
起首：按下 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中心的软件包版本信息。
编辑中能够存在的bug没法及时晓得，预先为了处理这些bug,花了大批的时候举行log 调试，这边顺便给人人引荐一个好用的BUG监控东西Fundebug。
原文：https://codeburst.io/top-java…
你的点赞是我延续分享好东西的动力，迎接点赞！
交换
干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。
我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！
关注民众号，背景复兴福利，即可看到福利，你懂的。
