撰写 于 资讯

Visual Studio Code是开发人员社区中使用最广泛的代码编辑器之一。 VS Code受欢迎的原因之一是它有大量的扩展，从而加快了开发过程。

在本指南中，我们将探讨2021年每个Web开发人员应该知道的10个VS Code扩展。这些工具旨在改善开发人员的体验，并通过各种方式简化您的工作。

我们将介绍以下VS Code扩展：

  1. Auto Rename Tag
  2. Bracket Pair Colorizer
  3. Snippets
  4. Better Comments
  5. Markdown All in One
  6. Icons
  7. Prettier
  8. Import Cost
  9. Profile Switcher
  10. GitLens

1、Auto Rename Tag

Auto Rename Tag（自动重命名标签）是针对Web开发人员的超级有用的VS Code扩展。 顾名思义，Auto Rename Tag会在第一个标签更新时重命名配对的第二个标签，反之亦然：

你会发现这个扩展不仅对HTML有帮助，而且也可以在 JSX 中使用。

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

2、Bracket Pair Colorizer

Bracket Pair Colorizer这个扩展将相应的方括号与相同的颜色匹配。在一个文件中有嵌套的组件、函数、对象等，可能会因为使用多个括号、方括号等而引起混淆。

例如，考虑以下代码片段：

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

3、Snippets

Snippets是节省时间和提高生产率的最佳方法。 这不是单个扩展，而是具有针对不同编程语言的各种摘要的扩展的集合。

以下是一些流行的代码Snippets扩展：

例如，每次创建新组件时，在React中重复功能组件的语法可能很繁琐。 使用ES7 React/Redux/GraphQL/React-Native snippets扩展，您可以使用快捷键rfc来表示功能组件，然后按Enter键。

4、Better Comments

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

清晰易懂的注释不仅有益于遍历您代码的人，而且也对您有益。 一段时间后，开发人员在访问自己的代码时会迷路，这很普遍。 进行描述性评论可以为您和您的团队节省大量时间。

使用“Better Comments VS Code”扩展，您可以将注释分类为警报，查询，待办事项，高亮显示等。

您可以在双斜杠（//）后使用以下任一字符：

  • * 用于高亮显示的文本
  • ! 错误和警告
  • ? 查询及问题
  • // 删除线
  • TODO 待办事项

5、Markdown All in One

Markdown All in One这个扩展可满足您所有Markdown需求，例如自动预览，快捷方式，自动完成等。

自2004年发布以来，Markdown已成为最受欢迎和首选的标记语言之一。 由于Markdown的轻量级简单性和跨平台使用，全球的技术作家广泛使用Markdown来撰写文章，博客，文档等。 它的流行引起了Markdown的其他变体，例如GitHub Flavored Markdown，MDX等。

例如，要在Markdown中加粗一些文本，可以选择该文本，然后使用快捷键Ctrl + B来提高工作效率。

6、Icons

具有描述性的图标（Icons）可以帮助您区分文件和文件夹。 Icons还使开发更有趣。

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

7、Prettier

Prettier是一个代码格式化程序。 GitHub上的星标超过38.8k，是目前最受欢迎的代码格式化程序之一。 在代码中采用一致的格式和样式可以节省大量时间，尤其是在与其他开发人员合作时。

看看以下代码块：

您可能会注意到此代码的一些格式问题，包括：

  • 单引号和双引号的混合
  • 不规则使用分号（;）
  • 第6行的console语句缩进不正确

这是Prettier格式化和修复以上代码的方式：

当您使用本地解析的Prettier版本时，此扩展程序支持Prettier插件。

您可以进一步配置此扩展程序以适合您的格式需求，甚至可以通过自动保存触发它。

8、Import Cost

Import Cost这个扩展可以显示代码中导入包的估计大小。 在进行项目时，重要的是不要通过导入大型程序包来损害用户体验。 避免这种情况的一种方法是跟踪代码中其他依赖项的大小。

导入太大时，“Import Cost”会以红色显示尺寸来警告您。 您可以配置应将大小视为小，中或大。

9、Profile Switcher

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

此扩展名对内容创建者（例如技术博客）特别有用。您无需每次都显示VS Code屏幕时更改设置/配置，而是可以设置配置文件所需的设置。

以下是在两个配置文件之间进行切换的方法：Default 和 Content Creation。

10、GitLens

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

GitLens插件可以直接在光标处显示代码编写人以及时间；方便共同开发时候git做版本控制时候的相关代码管理。GitLens 可以增强 VSCode 内置 Git 的功能。例如 commits 搜索，历史记录和显示的代码作者身份具体功能可以查看Feature list

结论

在本指南中，我们回顾了10个VS Code扩展，它们可以帮助您成为一个更好的程序员，并提高您的生产效率。

发表评论