vscode 插件显示缩进_vscode插件收集

Quokka.js

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

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

类似的扩展 –

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)扩展为每个缩进层级用四种不同颜色交替着色。

TODO高亮

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

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

注释高亮 Better Comments

支持各种语言

Import Cost(花销)

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

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

REST Client

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

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

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

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

GitLens

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

Indenticator(缩进指示器)

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

VSCode Icons

Beautify

代码美化/格式化插件

备选,Prettier — 一个代码格式化工具