2021 年最流行的 10 款 VSCode 扩展

2022年05月14日 阅读数:4
这篇文章主要向大家介绍2021 年最流行的 10 款 VSCode 扩展,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
点击⬆️方“逆锋起笔”,公众号回复 编程资源
领取大佬们推荐的学习资料

因为扩展能够很大程度提升开发的效率,VisualStudio Code 俨然成为开发者社区最流行的一款编辑器。本文就为你们介绍下 2021 年最流行的 10 款 VisualStudio Code 扩展。php

做者 | Ashutosh Singh前端

译者 | 弯月
编程

出品 | CSDN(ID:CSDNnews)微信

VisualStudio Code是开发者社区最流行的一款编辑器。理由之一就是VSCode有许多扩展,能够提升开发的效率。markdown

在本文中,咱们将介绍每一位开发人员都应该了解的10款VSCode扩展。架构


Auto Rename Tag

AutoRename Tag是一款面向Web开发人员的VSCode扩展。顾名思义,Auto Rename Tag能够在一个标签更改时自动更新另外一个标签:编辑器

这款扩展不只能够在HTML中使用,也可用于React,由于React使用了JSX:函数

上述示例中标签内只有一个文本,可是在真正的应用程序中,大量的标签和元素嵌套在一块儿,手工更新很是困难且麻烦。学习


Bracket Pair Colorizer

这款扩展能够将匹配的括号染成相同的颜色。同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人摸不着头脑:字体

例以下述代码示例:

第一眼看上去,区分不一样的代码块很困难,可是Bracket Pair Colorizer扩展能够将对应的括号着色,方便浏览代码和阅读:

代码片断

 

代码片断是节约时间提升生产力的最好办法。这并非一个扩展,而是多种语言的各类扩展。

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

  • Angular Snippts (version 11)

  • Python

  • JavaScript (ES6) code snippets

  • HTML Snippets

  • ES7 React/Redux/GraphQL/React-Native snippets

  • Vue 3 Snippets

例如,在React中建立新组建时,输入函数式组件的语法很是繁琐。使用ES7React/Redux/GraphQL/React-Native snippets扩展,只须要输入rfc并按回车便可建立函数式组件。


Better Comments

BetterComments能够帮助你编写便于阅读的注释。

清晰、方便理解的注释不只对阅读代码的人有好处,对本身也很是有用。开发人员常常会遇到这种状况:过一段时间以后,阅读本身的代码都有困难。而编写描述性的注释对于本身和团队都有好处。

使用Better Comments扩展,你能够将注释分为警告、询问、待办、重点等几大类。

在双斜线后面使用下述字符作标记:

  • * 表示重点

  • ! 表示错误和警告

  • ? 表示询问和问题

  • // 表示删除

  • TODO 表示待办事项


Markdown All in One

MarkdownAll in One能够处理全部的markdown需求,例如自动预览、快捷键、自动完成等。

从2004年发布以来,Markdown已成为最流行的标记语言之一。技术做者普遍使用Markdown转写文章、博客、文档等,由于它十分轻便、简单,并且能够在多个平台上使用。它的流行带动了许多Markdown变体的出现,如GitHub Flavored markdown、MDX等。微信搜索公众号 逆锋起笔,关注后回复 编程资源,领取各类经典学习资料。

例如,要在Markdown中加粗字体,只须要选中文字按快捷键Ctrl+B便可,这样能够提升生产力。

图标

 

描述性的图标能够帮你区分不一样的文件和文件夹。图标也让开发过程更有趣。

下面是两个VSCode标签页的比较。一个有图标,另外一个没有。

有许多图标扩展可供选择。流行的图标扩展有:

  • vscode-icons

  • Material Icon Theme

  • Material Theme Icons

  • Simple icons

Prettier

 

Prettier是一款有倾向的代码格式化程序。它在GitHub上得到了38500多个标星,是最流行的代码格式化器之一。一致的代码格式和风格能够节省很多时间,特别是在与其余开发人员协做的时候。

考虑下述代码:

这段代码有许多格式问题,例如:

  • 单引号和双引号混用

  • 不规则的分号用法

  • 第6行的console语句缩进不恰当

下图演示了如何使用Prettier来格式化并修复以上错误:

该扩展支持Prettier插件,这样你就可使用本地定制过的Perttier。

你还能够进一步配置该扩展,甚至能够配置成保存时自动执行。


Import Cost

 

Importcost能够在代码中显示导入的估计大小。编写项目时,很重要的一点就是不要导入过大的软件包,以避免损害用户体验。避免导入过大软件包的方法之一就是随时跟踪软件包的大小。

若是导入过大,Import Cost就会用红色显示大小,以示警告。你能够自行配置小、中、大分别对应的大小。


Profile Switcher

ProfileSwitcher能够在多个用户配置中切换。

该扩展特别适合内容创做者,如技术博客做者、YouTube主播等。你不须要每次共享VSCode屏幕时更改设置,只须要建立新的用户配置便可。

下图演示了怎样在两个用户配置Default和Content Creation之间切换:


GitLens

GitLens是一款开源扩展。它给VSCode添加了Git的功能。

该扩展最好的一点就是能经过Git blame和code lens的功能,将代码的做者可视化。

下面是更详细的代码做者的信息:

这只是GitLens的诸多功能之一。其余值得一提的功能有:

  • 遍历某个文件的历史版本

  • 在行尾显示当前行的做者信息,而不会对工做形成干扰

  • 自定义状态栏,显示当前行的上次修改者和修改日期


总结

 

本文介绍了10款VSCode扩展,帮助你成为更好的开发者并提升生产力。

还有许多其余的VSCode扩展,好比:

  • Live Server

  • Path Intellisense

  • Code Spell Checker

  • Better Align

  • Quokka.js

  • indent-rainbow

原文连接:

https://blog.logrocket.com/top-10-vs-code-extensions-2021/

推荐阅读




点个『在看』支持下