<div class="wp-block-cover has-background-dim" style="background-image:url(https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-15-56.png)">
<div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size">10 个必备的 VsCode 插件</p>
</div>
</div>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><a href="https://code.visualstudio.com/" target="_blank"  rel="nofollow">Visual Studio Code</a>是开发人员社区中使用最广泛的代码编辑器之一，本文将分享给大家 2021 年每个开发人员都应该知道的 10 个<a href="https://code.visualstudio.com/docs/editor/extension-gallery" target="_blank"  rel="nofollow">VS Code 扩展</a>，每个都堪称是黑科技。这些工具旨在改善开发人员体验并以各种方式提高你的工作效率。</p>
</blockquote>
<p>本文将介绍以下 VS Code 扩展和每一个 vscode 插件的使用教程：</p>
<ol class="wp-block-list">
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#autorenametag" target="_blank"  rel="nofollow">自动重命名标签</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#bracketpaircolorizer" target="_blank"  rel="nofollow">支架对着色器</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#snippets" target="_blank"  rel="nofollow">片段</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#bettercomments" target="_blank"  rel="nofollow">更好的评论</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#markdownallinone" target="_blank"  rel="nofollow">Markdown 多合一</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#Icons" target="_blank"  rel="nofollow">图标</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#prettier" target="_blank"  rel="nofollow">更漂亮</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#importcost" target="_blank"  rel="nofollow">进口成本</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#profileswitcher" target="_blank"  rel="nofollow">配置文件切换器</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#GitLens" target="_blank"  rel="nofollow">GitLens</a></li>
</ol>
<h2 class="wp-block-heading" id="autorenametag">1. 自动重命名标签</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" target="_blank"  rel="nofollow">Auto Rename Tag</a>是一个对 Web 开发人员来说非常有用的 VS Code 扩展。顾名思义，自动重命名标签会在第一个标签更新时重命名第二个标签，反之亦然；你会发现这个扩展不仅对 HTML 很有帮助，而且由于 <a href="https://reactjs.org/docs/introducing-jsx.html" target="_blank"  rel="nofollow">JSX</a> 对 React 也很有帮助。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="319" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/JSX.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-933"/><figcaption>自动重命名标签示例</figcaption></figure>
</div/>
<p>在上面的例子中，标签内只有文本，但在实际应用中，可能有嵌套的标签和元素，使得手动更新变得困难和乏味。</p>
<h2 class="wp-block-heading" id="bracketpaircolorizer">2. 支架对着色器</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" target="_blank"  rel="nofollow">Bracket Pair Colorizer</a>是一个扩展，匹配具有相同颜色的相应括号，翻译过来可以叫做支架对着色器。在文件中嵌套组件、函数、对象等可能会因多个圆括号、方括号等而变得混乱。</p>
<p>例如，对于以下代码，乍一看，很难区分代码中的不同代码块，但是 Bracket Pair Colorizer 扩展为相应的括号和括号着色，以便于导航和访问。</p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="812" height="502" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-934"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06.png 812w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06-300x185.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06-768x475.png 768w"sizes="(max-width: 812px) 100vw, 812px"/><figcaption><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer"target="_blank"rel="nofollow">Bracket Pair Colorizer</a>工具示例</figcaption></figure/>
<h2 class="wp-block-heading" id="snippets">3. 代码片段工具</h2>
<p><a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets" target="_blank"  rel="nofollow">片段 </a> 是节省时间和提高工作效率的最佳方式。这不是单个扩展，而是具有不同编程语言的各种片段的扩展集合。</p>
<p>下面是一些流行的代码片段扩展：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2" target="_blank"  rel="nofollow">Angular 片段（版本 11）</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" target="_blank"  rel="nofollow">Python</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" target="_blank"  rel="nofollow">JavaScript (ES6) 代码片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets" target="_blank"  rel="nofollow">HTML 片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" target="_blank"  rel="nofollow">ES7 React/Redux/GraphQL/React-Native 片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" target="_blank"  rel="nofollow">Vue 3 片段</a></li>
</ul>
<p>例如，每次创建新组件时，在 React 中重复函数式组件的语法可能会非常乏味。使用 <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" target="_blank"  rel="nofollow">ES7 React/Redux/GraphQL/React-Native 片段</a> 扩展，您可以使用 <code>rfc</code> 功能组件的简写并按 Enter。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="425" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/React-Redux-GraphQL-Extension.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-935"/><figcaption>代码片段工具</figcaption></figure>
</div/>
<h2 class="wp-block-heading" id="bettercomments">4. 更好的代码注释</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" target="_blank"  rel="nofollow">Better Comments</a>旨在帮助您在代码中编写更人性化的注释。</p>
<p>清晰易懂的注释不仅对浏览您的代码的人有益，而且对您也有益。一段时间后，开发人员在访问自己的代码时迷失在自己的代码中是很常见的。拥有描述性评论可以为您和您的团队节省大量时间。</p>
<p>使用 Better Comments VS Code 扩展，您可以将注释分类为警报、查询、待办事项、突出显示等。</p>
<p>您可以在双正斜杠 (&nbsp;<code>//</code>)后使用以下任一字符：</p>
<ul class="wp-block-list">
<li><code>*</code>&nbsp; 对于突出显示的文本</li>
<li><code>!</code>&nbsp; 对于错误和警告</li>
<li><code>?</code>&nbsp; 查询和问题</li>
<li><code>//</code>&nbsp; 删除线</li>
<li><code>TODO</code>&nbsp; 待办事项</li>
</ul>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="801" height="552" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-936"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14.png 801w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14-300x207.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14-768x529.png 768w"sizes="(max-width: 801px) 100vw, 801px" /><figcaption>代码注释工具</figcaption></figure>
</div/>
<h2 class="wp-block-heading" id="markdownallinone">5. Markdown 多合一</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank"  rel="nofollow">Markdown All in One</a>是一个单一的扩展，可以满足您 <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank"  rel="nofollow"> 所有的 Markdown</a>需求，例如自动预览、快捷方式、自动完成等。</p>
<p>自 2004 年发布以来，Markdown 已成为最受欢迎和首选的标记语言之一。世界各地的技术作家广泛使用 Markdown 来撰写文章、博客、文档等，因为其轻量级的简单性和跨平台使用。它的流行催生了 Markdown 的其他变体，例如 <a href="https://github.github.com/gfm/" target="_blank"  rel="nofollow">GitHub Flavored Markdown</a>、<a href="https://mdxjs.com/" target="_blank"  rel="nofollow">MDX</a> 等。</p>
<p>例如，要在 Markdown 中加粗某些文本，您可以选择该文本并使用快捷方式来提高您的工作效率。<code>Ctrl&nbsp;+&nbsp;B</code></p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="391" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Markdown-All-In-One-Extension.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-938"/><figcaption>Markdown 预览工具</figcaption></figure/>
<h2 class="wp-block-heading" id="icons">6. 图标</h2>
<p>拥有描述性图标可以帮助您区分文件和文件夹。图标也让开发变得更有趣。</p>
<p>这是两个 VS Code 选项卡之间的比较。一个有图标，另一个没有。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="805" height="495" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-939"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41.png 805w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41-300x184.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41-768x472.png 768w"sizes="(max-width: 805px) 100vw, 805px" /><figcaption>图标扩展插件</figcaption></figure>
</div/>
<p>您可以选择许多图标扩展。流行的图标集合包括：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank"  rel="nofollow">vscode-icons</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" target="_blank"  rel="nofollow">材质图标主题</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons" target="_blank"  rel="nofollow">材质主题图标</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=LaurentTreguier.vscode-simple-icons" target="_blank"  rel="nofollow">简单的图标</a></li>
</ul>
<h2 class="wp-block-heading" id="prettier">7. 更漂亮的代码</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank"  rel="nofollow">Prettier</a>是一个固执的代码格式化程序。它在 GitHub 上拥有超过 38.5 万颗星，是最流行的代码格式化程序之一。在您的代码中使用一致的格式和样式可以节省大量时间，尤其是在与其他开发人员协作时。</p>
<p>以下是 Prettier 如何格式化代码的过程：</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="411" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Prettier-Formatted-Code-Example.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-940"/><figcaption>Prettier 格式化代码</figcaption></figure>
</div/>
<p>当您使用本地解析版本的 Prettier 时，此扩展支持 <a href="https://prettier.io/docs/en/plugins.html" target="_blank"  rel="nofollow">Prettier 插件</a>。<br /> 您可以进一步配置此扩展以满足您的格式需求，甚至可以通过自动保存触发它。</p>
<h2 class="wp-block-heading" id="importcost">8. 进口成本</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost" target="_blank"  rel="nofollow">导入成本 </a> 是一个扩展，它向您显示代码中导入包的估计大小。在处理项目时，重要的是不要通过导入重包来损害用户体验。避免这种情况的一种方法是跟踪代码中附加依赖项的大小。</p>
<div class="wp-block-image">
<figure class="aligncenter"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" decoding="async" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Import-Cost-Extension-Example.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt="导入成本扩展示例" class="wp-image-33140"/></figure>
</div/>
<p>当导入过大时，导入成本会通过以红色显示大小来警告您。您可以配置应视为小、中或大的大小。</p>
<h2 class="wp-block-heading" id="profileswitcher">9. 配置文件切换器</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher" target="_blank"  rel="nofollow">Profile Switcher</a>使您能够在 VS Code 中使用各种配置和设置在多个配置文件之间 <a href="https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher" target="_blank"  rel="nofollow"> 切换 </a> 和设置。</p>
<p>此扩展对技术博主、YouTubers 等内容创建者特别有用。无需在每次需要显示 VS Code 屏幕时更改设置 / 配置，您可以设置配置文件所需的设置。</p>
<p>两个配置文件之间切换的方法：<code>Default</code>和。<code>Content&nbsp;Creation</code></p>
<h2 class="wp-block-heading" id="gitlens">10. GitLens</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank"  rel="nofollow">GitLens</a>是由 <a href="https://www.amod.io/" target="_blank"  rel="nofollow">Eric Amodio</a> 创建、开发和维护的 Visual Studio Code<a href="https://github.com/eamodio/vscode-gitlens" target="_blank"  rel="nofollow">的开源 </a> 扩展。它结合了 Git 和 VS Code 的功能。<a href="https://www.amod.io/" target="_blank"  rel="nofollow"></a></p>
<p>此扩展的最佳功能之一是能够通过 Git 责备注释和代码镜头可视化代码作者身份。</p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="807" height="144" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-941"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41.png 807w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41-300x54.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41-768x137.png 768w"sizes="(max-width: 807px) 100vw, 807px" /><figcaption>GitLens 扩展插件</figcaption></figure/>
<p>这只是 <a href="https://gitlens.amod.io/#features" target="_blank"  rel="nofollow">GitLens 扩展</a> 的众多 <a href="https://gitlens.amod.io/#features" target="_blank"  rel="nofollow"> 功能之一</a>。其他显着特点包括：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#revision-navigation-" target="_blank"  rel="nofollow">ř</a><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#revision-navigation-" target="_blank"  rel="nofollow">时空视点导航 </a> 通过一个文件的历史记录（向后和向前）</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#current-line-blame-" target="_blank"  rel="nofollow">行 </a> 尾的不显眼的 <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#current-line-blame-" target="_blank"  rel="nofollow"> 当前行责任 </a> 注释显示提交</li>
<li>一个 <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#status-bar-blame-" target="_blank"  rel="nofollow"> 状态栏怪 </a> 注释显示提交和作家谁最后修改了当前行</li>
</ul>
<h2 class="wp-block-heading" id="conclusion">总结</h2>
<p>以上就是高热度网分享给大家 2021 年每个开发人员都应该知道的 10 个 <a href="https://code.visualstudio.com/docs/editor/extension-gallery" target="_blank"  rel="nofollow">VS Code 扩展</a> 插件和 vscode 使用教程，每个都堪称是黑科技，希望每个人都可以通过这些工具提高自己的工作效率。</p>


<p>Visual Studio Code是开发人员社区中使用最广泛的代码编辑器之一，本文将分享给大家 2021 年&#8230;</p>


2022程序员必备的10大VS Code扩展插件推荐