1. 首页
  2. 黑科技教程

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

10个必备的VsCode插件

Visual Studio Code是开发人员社区中使用最广泛的代码编辑器之一,本文将分享给大家2021 年每个开发人员都应该知道的 10 个VS Code 扩展,每个都堪称是黑科技。这些工具旨在改善开发人员体验并以各种方式提高你的工作效率。

本文将介绍以下 VS Code 扩展和每一个vscode插件的使用教程:

  1. 自动重命名标签
  2. 支架对着色器
  3. 片段
  4. 更好的评论
  5. Markdown 多合一
  6. 图标
  7. 更漂亮
  8. 进口成本
  9. 配置文件切换器
  10. GitLens

1. 自动重命名标签

Auto Rename Tag是一个对 Web 开发人员来说非常有用的 VS Code 扩展。顾名思义,自动重命名标签会在第一个标签更新时重命名第二个标签,反之亦然;你会发现这个扩展不仅对 HTML 很有帮助,而且由于JSX对 React 也很有帮助。

021程序员必备的10大VS
自动重命名标签示例

在上面的例子中,标签内只有文本,但在实际应用中,可能有嵌套的标签和元素,使得手动更新变得困难和乏味。

2. 支架对着色器

Bracket Pair Colorizer是一个扩展,匹配具有相同颜色的相应括号,翻译过来可以叫做支架对着色器。在文件中嵌套组件、函数、对象等可能会因多个圆括号、方括号等而变得混乱。

例如,对于以下代码,乍一看,很难区分代码中的不同代码块,但是 Bracket Pair Colorizer 扩展为相应的括号和括号着色,以便于导航和访问。

021程序员必备的10大VS
Bracket Pair Colorizer工具示例

3. 代码片段工具

片段是节省时间和提高工作效率的最佳方式。这不是单个扩展,而是具有不同编程语言的各种片段的扩展集合。

下面是一些流行的代码片段扩展:

例如,每次创建新组件时,在 React 中重复函数式组件的语法可能会非常乏味。使用ES7 React/Redux/GraphQL/React-Native 片段扩展,您可以使用rfc功能组件的简写并按 Enter。

021程序员必备的10大VS
代码片段工具

4.更好的代码注释

Better Comments旨在帮助您在代码中编写更人性化的注释。

清晰易懂的注释不仅对浏览您的代码的人有益,而且对您也有益。一段时间后,开发人员在访问自己的代码时迷失在自己的代码中是很常见的。拥有描述性评论可以为您和您的团队节省大量时间。

使用 Better Comments VS Code 扩展,您可以将注释分类为警报、查询、待办事项、突出显示等。

您可以在双正斜杠 ( //)后使用以下任一字符:

  • * 对于突出显示的文本
  • ! 对于错误和警告
  • ? 查询和问题
  • // 删除线
  • TODO 待办事项
021程序员必备的10大VS
代码注释工具

5. Markdown 多合一

Markdown All in One是一个单一的扩展,可以满足您所有的 Markdown需求,例如自动预览、快捷方式、自动完成等。

自 2004 年发布以来,Markdown 已成为最受欢迎和首选的标记语言之一。世界各地的技术作家广泛使用 Markdown 来撰写文章、博客、文档等,因为其轻量级的简单性和跨平台使用。它的流行催生了 Markdown 的其他变体,例如GitHub Flavored MarkdownMDX等。

例如,要在 Markdown 中加粗某些文本,您可以选择该文本并使用快捷方式来提高您的工作效率。Ctrl + B

021程序员必备的10大VS
Markdown预览工具

6. 图标

拥有描述性图标可以帮助您区分文件和文件夹。图标也让开发变得更有趣。

这是两个 VS Code 选项卡之间的比较。一个有图标,另一个没有。

021程序员必备的10大VS
图标扩展插件

您可以选择许多图标扩展。流行的图标集合包括:

7. 更漂亮的代码

Prettier是一个固执的代码格式化程序。它在 GitHub 上拥有超过 38.5 万颗星,是最流行的代码格式化程序之一。在您的代码中使用一致的格式和样式可以节省大量时间,尤其是在与其他开发人员协作时。

以下是 Prettier 如何格式化代码的过程:

021程序员必备的10大VS
Prettier格式化代码

当您使用本地解析版本的 Prettier 时,此扩展支持Prettier 插件
您可以进一步配置此扩展以满足您的格式需求,甚至可以通过自动保存触发它。

8. 进口成本

导入成本是一个扩展,它向您显示代码中导入包的估计大小。在处理项目时,重要的是不要通过导入重包来损害用户体验。避免这种情况的一种方法是跟踪代码中附加依赖项的大小。

导入成本扩展示例

当导入过大时,导入成本会通过以红色显示大小来警告您。您可以配置应视为小、中或大的大小。

9. 配置文件切换器

Profile Switcher使您能够在 VS Code 中使用各种配置和设置在多个配置文件之间切换和设置。

此扩展对技术博主、YouTubers 等内容创建者特别有用。无需在每次需要显示 VS Code 屏幕时更改设置/配置,您可以设置配置文件所需的设置。

两个配置文件之间切换的方法:Default和。Content Creation

10. GitLens

GitLens是由Eric Amodio创建、开发和维护的 Visual Studio Code的开源扩展。它结合了 Git 和 VS Code 的功能。

此扩展的最佳功能之一是能够通过 Git 责备注释和代码镜头可视化代码作者身份。

021程序员必备的10大VS
GitLens扩展插件

这只是GitLens 扩展的众多功能之一。其他显着特点包括:

总结

以上就是高热度网分享给大家2021 年每个开发人员都应该知道的 10 个VS Code 扩展插件和vscode使用教程,每个都堪称是黑科技,希望每个人都可以通过这些工具提高自己的工作效率。

3 1 投票
文章评分

原创文章,作者:高热度网,如若转载,请注明出处:https://www.gaoredu.com/software/top-10-vs-code-extensions.html

订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论

联系我们

QQ群:78925824

在线咨询:点击这里给我发消息

电子邮件:admin@gaoredu.com

QR code
0
希望看到您的想法,请发表评论。x
()
x