本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，我的很多文档和教程资料也已收录有组织的。双1111加群低至85元，一起来学习如何搭建自己的博客服务器如何搭建博客1.Quokka.jsQuokka.js是一个JavaScript和TypeScript的实时运行代码平台。这意味着它会实时运行你输入的代码，并在编辑器中显示各种执行结果。建议自己尝试一下。安装此扩展后，您可以按Ctrl/Cmd(?)+Shift+P显示编辑器的命令面板，然后键入Quokka以查看可用命令列表。选择并运行“新建JavaScript文件”命令。您也可以按(?+K+J)直接打开文件。在此文件中输入的任何内容都会立即执行。Quokka.js类似扩展–CodeRunner–支持多种语言likeC,C++,Java,JavaScript,PHP,Python,Perl,Perl6,etc.Runner2.BracketPairColorizer和IndentRainbow花括号和圆括号是许多编程语言不可或缺的一部分。在JavaScript等语言中，花括号和圆括号可能有多层嵌套，有些括号不太容易识别哪个对应哪个，但也没有简单的方法来识别这些括号前后的对应关系。括号对着色器和缩进彩虹。这是两个不同的扩展。然而，他们就像一对夫妻，合作得天衣无缝。这些扩展将为您的编辑器添加一系列颜色，并使代码块易于辨认，一旦您习惯了它们，没有它们，VSCode就会感觉很乏味。DonotuseBracketPairColorizerandRainbowIndent(IndentRainbow)在使用BracketPairColorizer和RainbowIndent(IndentRainbow)3.snippets(代码片段)代码片段在编辑器shortcode中。因此，您可以输入imr并按Tab键展开该代码段，而不是“从importReact”。同样，clg变为console.log。各种框架和库有许多代码片段：Javascript、React、Redux、Angular、Vue、Jest。就我个人而言，我发现Javascript片段非常有用，因为我主要使用JS。一些好的代码片段扩展–JavaScript(ES6)代码片段es6/es7React标准样式代码片段的React-Native/React/Redux片段4。TODO突出显示通常在编码时，您认为可能有更好的方法来执行相同的操作。此时您发表评论//TODO:需要重构或其他。但是你可以很容易地忘记这个注释并将你的代码推送到主存储库（master）或生产环境（production）。但是如果你使用TodoHighlighter（突出显示），它会突出显示并让你很容易看到笔记。它用鲜艳的颜色突出显示“TODO/FIXME”或代码中的任何其他注释，以便它们始终清晰可见。另一个不错的功能是ListHighlightedannotations，它在控制台中列出了所有TODO。使用与TodoHighlighter类似的扩展–Todo+—功能更强大的Todo荧光笔扩展。Todo解析器5.导入成本这个扩展允许你查看导入模块的大小，它对Webpack中的打包器有很大帮助，你可以看到你是导入了整个库还是只导入了一个特定的实用程序。6.RESTClient作为Web开发者，我们经常需要用到RESTapi。为了检查url和检查响应，使用了像Postman这样的工具。但是，既然编辑人员可以轻松完成相同的任务，为什么还要使用不同的应用程序呢？RESTClient它允许您发送HTTP请求并直接在VisualStudioCode中查看响应。7.自动关闭标签和自动重命名标签自从React的出现及其在过去几年中获得的关注以来，JSX形式的类似html的语法现在非常流行。我们还必须使用JavaScript标签进行编码。任何Web开发人员都会告诉您输入标签很痛苦。在大多数情况下，我们需要一种能够快速轻松地生成标签及其子标签的工具。Emmet是VSCode中的一个很好的例子，但是，有时候，您只需要简单明了的东西。例如，自动更新标签，它会在您键入开始标签时自动生成结束标签。当您更改同一个选项卡时，关闭标签会自动更改，这两个扩展程序就是这样做的。它还适用于JSX和许多其他语言，如XML、PHP、Vue、JavaScript、TypeScript、TSX。在此处获取两个扩展-自动关闭标签和自动重命名标签。类似的扩展–AutoCompleteTag—结合了自动重命名和自动关闭标签功能。关闭HTML/XML标签8.GitLens正如其作者所说，GitLens增强了VisualStudioCode中内置的Git功能，它包括许多强大的功能，例如通过跟踪代码进行代码创作、提交搜索、历史记录和GitLens资源管理器。您可以在此处阅读这些功能的完整说明。一个类似的扩展--GitHistory显示了提交历史的漂亮图表等等。推荐。GitBlame—它允许您在状态栏中查看当前选定行的GitBlame信息。GitLens也提供类似的功能。Git指示器——这允许您在状态栏中查看受影响的文件和添加或删除的行数。在GitHub/Bitbucket/Gitlab/VisualStudio.com中打开！-它允许您使用一个命令在浏览器中打开一个repo。9.Git项目管理器（GitProjectManager，GPM）Git项目管理器（GitProjectManager，GPM）允许你直接从VSCode窗口为Git仓库打开一个新窗口。基本上，您可以在不离开VSCode的情况下打开另一个存储库。安装此扩展后，您必须将gitProjectManager.baseProjectsFolders设置为包含repos的URL列表。示例：{"gitProjectManager.baseProjectsFolders":["/home/user/nodeProjects","/home/user/personal/pocs"]}类似的扩展名——ProjectManager——我个人没用过，不过百万+安装。所以我建议你看一看。10.Indenticator（缩进指示器）它直观地突出当前的缩进数，让你很容易区分不同缩进层次的各种代码块。11.VSCodeIcons让你编辑的图标更有魅力！类似的扩展——VSCodeGreatIconsStudioIcons12。Dracula(Theme)德古拉是我最喜欢的主题。我们可以使用快捷键快速选择和更改主题；首先：按Ctrl+k，然后按：Ctrl+t13。其他推荐FiraCode——一种带有编程连字的等宽字体。愚人码头注意：克隆项目后，找到ttf文件夹，然后安装该文件夹下的字体文件。重启VSCode，选择TOOLS->Options->FontsandColors，选择FiraCode。LiveServer—一个本地开发服务器，可以实时重新加载静态和动态页面。VSCode的EditorConfig-此插件尝试使用.editorconfig文件中的设置覆盖用户/工作区设置，不需要其他文件或特定于vscode的文件。与任何EditorConfig插件一样，如果未指定root=true，EditorConfig将继续在项目外部查找.editorconfig文件。PrettierforVSCode——一款代码格式化工具。书签-它可以帮助您在代码中导航，轻松快速地在重要位置之间移动。不用再找代码了，它还支持一组选择命令，可以让你选择书签行和书签行之间的区域，对于日志文件分析非常有用。PathIntellisense—VisualStudioCode插件，可自动填写文件名。VersionLens—在VisualStudio代码编辑器中显示npm、jspm、bower、dub和dotnetcore的包版本信息。14.MaterialTheme&Icons这是VSCode主题中的一个重要作用。作者认为重要的主题是最接近在编辑器中用笔和纸书写的东西（尤其是在使用无对比变体主题时）。从集成工具到文本编辑器，您的编辑器看起来几乎是扁平且无缝的。想象一个史诗主题加上史诗图标。MaterialThemeIcons是替换默认VSCode图标的绝佳选择。设计的大图标目录与主题相结合，使其更加美观，帮助您在资源管理器中轻松找到您的文件。15.ZenModeorDoNotDisturbMode(ZenMode)withacenteredlayout为了让广大勤奋的coder在coding/docing的时候思路清晰，代表广大coder利益的VSCode，还添加了“禅模式”。当你在页面上编辑文件时可以启用该模式，效果是让你的编辑框全屏，然后有淡淡的云朵效果。打开方式：File>Preferences>Settings>UserSettings>Workbench>ZenMode16.Fontswithligatures文本样式使阅读变得简单方便，您可以使用漂亮的连字字体使编辑器看起来更友好。这里有6种支持连字的最佳字体（根据www.slant.co）你可以试试FiraCode，它很棒而且是开源的。以下是在引入FiraCode后如何更改VSCode滚动中的字体。"editor.fontFamily":"FiraCode","editor.fontLigatures":true具体使用方法请参考：在vscode中修改字体、使用FiraCode改进visualstudio、使用强制连字（Fira代码）和多-行编辑（MixEdit）17。彩虹缩进（indent-rainbow）缩进样式，这个扩展为文本前面的缩进着色，每一步交替使用四种不同的颜色。当然，如果您需要自定义自己喜欢的颜色，请将以下代码段复制粘贴到settings.json"indentRainbow.colors":["rgba(16,16,16,0.1)","rgba(16,16,16,0.2)","rgba(16,16,16,0.3)","rgba(16,16,16,0.4)","rgba(16,16,16,0.5)","rgba(16),16,16,0.6)","rgba(16,16,16,0.7)","rgba(16,16,16,0.8)","rgba(16,16,16,0.9)","rgba(16,16,16,1.0)"],18。自定义标题栏这是一个很棒的视觉调整，可以更改不同项目的标题栏颜色，使它们易于识别。如果您正在处理可能具有相同代码或文件名的应用程序（例如react-native应用程序和Reactweb应用程序），这将很有用如何设置它：打开方式：文件>首选项>设置>工作区设置19.标记包装如果你不认识Emmet，那你可能是个爱打字的人。Emmet允许您编写缩写代码并返回相应的标记。VSCode目前是内置的，所以不需要配置。如果你想了解更多关于Emmet的速记，你可以查看EmmetCheatsheet20。这个内外平衡的建议来自https://vscodecandothat.com/，作者极力推荐。您可以使用向内平衡和向外平衡Emmet命令在VSCode中选择整个标记。将这些命令绑定到键盘快捷键很有帮助，例如Ctrl+Shift+向上箭头用于向外平衡，Ctrl+Shift+向下箭头用于向内平衡。21.TurboConsole.log()没有人喜欢输入像console.log()这样很长的语句。这真的很烦人，尤其是当你只想快速输出一些东西，看看它的价值，然后继续编码的时候。如果我告诉您您可以像LuckyLuke一样快速地控制台记录任何内容，您会怎么办？这是通过名为TurboConsoleLog的扩展完成的。它支持记录下一行中的任何变量，并自动在代码结构之后添加前缀。您还可以为此扩展添加的所有console.log()取消注释/注释alt+shift+u/alt+shift+c。另外，你也可以通过alt+shift+d删除所有：22.Liveserver这是一个很棒的扩展，可以帮助你启动一个本地开发服务器，提供静态和动态页面的实时重新加载，它支持HTTPS，主要功能如下作为CORS，自定义本地主机地址和端口提供了强大的支持。如果与VSCodeLiveShare一起使用，它甚至可以让您共享本地主机。23.使用多个光标复制/粘贴Mac：opt+cmd+up或opt+cmd+downWindows：ctrl+alt+up或ctrl+alt+downLinux：alt+shift+up或alt+shift+down24。BreadcrumbsCrumbs）在编辑器的内容上方现在有一个名为Breadcrumbs的导航栏，它显示您的当前位置并允许在符号和文件之间快速导航。要使用此功能，请使用View>ToggleBreadcrumbs命令或通过breadcrumbs.enabled设置启用它。要与之交互，请使用FocusBreadcrumbs命令或按Ctrl+Shift+。25.CodeCLICode有一个强大的命令行界面，可以让你控制编辑器的启动方式。您可以通过命令行选项打开文件、安装扩展、更改显示语言和输出诊断信息。想象一下，您通过gitclone
