2021 年最流行的 10 款 VSCode 扩展

た入场券 2022-08-28 10:58 195阅读 0赞

点击下方“逆锋起笔”，[公众号][Link 1]回复 编程资源

领取大佬们推荐的学习资料

由于扩展可以很大程度提高开发的效率，VisualStudio Code 俨然成为开发者社区最流行的一款编辑器。本文就为大家介绍下 2021 年最流行的 10 款 VisualStudio Code 扩展。

作者 | Ashutosh Singh

译者 | 弯月

出品 | CSDN(ID:CSDNnews)

VisualStudio Code是开发者社区最流行的一款编辑器。理由之一就是VSCode有许多扩展，可以提高开发的效率。

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

#     #

![2404a14276752360845c9dbf70574c00.png][]

# **Auto Rename Tag**    #

AutoRename Tag是一款面向Web开发人员的VSCode扩展。顾名思义，Auto Rename Tag可以在一个标签更改时自动更新另一个标签：

![8570face9f788f4ec4a69f0d3e99559e.gif][]

这款扩展不仅可以在HTML中使用，也可用于React，因为React使用了JSX：

![ad084a1d35103116229de1f8e9b630b9.gif][]

上述示例中标签内只有一个文本，但是在真正的应用程序中，大量的标签和元素嵌套在一起，手工更新非常困难且麻烦。

#     #

![605a198f16a1639b059ea1b8f0ff807b.png][]

# **Bracket Pair Colorizer**    #

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

![e6c68cb295578abb58edf996667776a4.gif][]

例如下述代码示例：

![1e24cfa98ba970fe213f20a3b47fb459.png][]

第一眼看上去，区分不同的代码块很困难，但是Bracket Pair Colorizer扩展可以将对应的括号着色，方便浏览代码和阅读：

![6b587e377611a4f06df02cb9985cb118.png][]

![af0c90b607e4aa22a9160ac93bbd001b.png][]

**代码片段**

代码片段是节约时间提高生产力的最好办法。这并不是一个扩展，而是多种语言的各种扩展。

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

*  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并按回车即可创建函数式组件。

![fd9635d87ee4a74a992da39ba3edf48b.gif][]

#     #

![60a8096b5e6449c83924acf61b0a8126.png][]

# **Better Comments**    #

BetterComments可以帮助你编写便于阅读的注释。

清晰、方便理解的注释不仅对阅读代码的人有好处，对自己也非常有用。开发人员经常会遇到这种情况：过一段时间之后，阅读自己的代码都有困难。而编写描述性的注释对于自己和团队都有好处。

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

在双斜线后面使用下述字符做标记：

*  \* 表示重点
 *  ! 表示错误和警告
 *  ? 表示询问和问题
 *  // 表示删除
 *  TODO 表示待办事项

![5198912f3f39c377b6c577ea7460d484.png][]

#     #

![44ba99c520a27c9887c22883d902d5a1.png][]

# **Markdown All in One**    #

MarkdownAll in One可以处理所有的markdown需求，例如自动预览、快捷键、自动完成等。

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

例如，要在Markdown中加粗字体，只需要选中文字按快捷键Ctrl+B即可，这样可以提高生产力。

![1557a0090ed4bad395a3a874a52c511e.png][]

**图标**

描述性的图标可以帮你区分不同的文件和文件夹。图标也让开发过程更有趣。

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

![592510d42eb1526b00364167b5b4f80d.png][]

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

*  vscode-icons
 *  Material Icon Theme
 *  Material Theme Icons
 *  Simple icons

![5ba8bd8ec8c2bbb3cdbce7a2aebff58b.png][]

**Prettier**

Prettier是一款有倾向的代码格式化程序。它在GitHub上获得了38500多个标星，是最流行的代码格式化器之一。一致的代码格式和风格可以节省不少时间，特别是在与其他开发人员协作的时候。

考虑下述代码：

![72bd389935dbc77c99e86f7dfd399fcd.png][]

这段代码有许多格式问题，例如：

*  单引号和双引号混用
 *  不规则的分号用法
 *  第6行的console语句缩进不恰当

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

![82d2684b0acba61a3663bb098c10747b.gif][]

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

你还可以进一步配置该扩展，甚至可以配置成保存时自动执行。

#     #

![b02efa53348a1e00c3848afc23809462.png][]

# **Import Cost**    #

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

![4dbb384b6afbd148388f6cf320781324.png][]

如果导入过大，Import Cost就会用红色显示大小，以示警告。你可以自行配置小、中、大分别对应的大小。

#     #

![df774aacdf94be96c9d0e34be11c44db.png][]

# **Profile Switcher**    #

ProfileSwitcher可以在多个用户配置中切换。

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

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

![64f408b23b0a9b8eec79e9e37df4e48c.gif][]

#     #

![aa516459c6c950fb8cd39fda56271cc6.png][]

# **GitLens** #

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

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

![44ce6ed5e1164bd5845d2f22f9543597.png][]

下面是更详细的代码作者的信息：

![23b32fce4ff5085c019f5ccb7b7691e4.png][]

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

*  遍历某个文件的历史版本
 *  在行尾显示当前行的作者信息，而不会对工作造成干扰
 *  自定义状态栏，显示当前行的上次修改者和修改日期

#     #

![0ff7e79a63e2d7c85e4b9fb47c52d23a.png][]

# **总结**    #

本文介绍了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/

**推荐阅读**

*  [卧槽！VSCode 竟然可以找对象了！][VSCode]
 *  [从 VSCode 看大型 IDE 技术架构][Link 1]
 *  [VS Code 上那些沙雕插件][VS Code]
 *  [这样设置 VS Code，每天少加班 1 小时][VS Code_ 1]
 *  [用好这 7 个 VS Code 插件，前端编程效率蹭蹭涨][7 _ VS Code]  
    
 *  [PyCharm vs VSCode，是时候改变你的 IDE 了！][PyCharm vs VSCode_ IDE]

点个『在看』支持下

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247486686&idx=2&sn=933d397b439183a2a6f9eafa57be3ce7&chksm=fa3ced85cd4b64931689f321afb4aa88cf5bb668e0052136fa725c99c119aedef1607eb4f231&scene=21#wechat_redirect
[2404a14276752360845c9dbf70574c00.png]: /images/20220828/62c1f5a07aa94af7abe3e2ed3862404f.png
[8570face9f788f4ec4a69f0d3e99559e.gif]: /images/20220828/d25f59420ab64583a5577b7ef405d238.png
[ad084a1d35103116229de1f8e9b630b9.gif]: /images/20220828/60372424924944ec94b9cc70e5ba0b83.png
[605a198f16a1639b059ea1b8f0ff807b.png]: /images/20220828/733c98c487fb4e49a8b74ca2142ebd29.png
[e6c68cb295578abb58edf996667776a4.gif]: /images/20220828/fe8d5b879a3e43fb9de8e8a421020727.png
[1e24cfa98ba970fe213f20a3b47fb459.png]: /images/20220828/8bbaf24a0f8043aeb794d92ebce33f78.png
[6b587e377611a4f06df02cb9985cb118.png]: /images/20220828/210d906464044db5a37cc1e6de7731a0.png
[af0c90b607e4aa22a9160ac93bbd001b.png]: /images/20220828/d66404395d504bb380e0bca182e6da6f.png
[fd9635d87ee4a74a992da39ba3edf48b.gif]: /images/20220828/f11fa2cf868642719e7a1514c65af8ae.png
[60a8096b5e6449c83924acf61b0a8126.png]: /images/20220828/33fc3f4f40ad4633ab242fea4366da50.png
[5198912f3f39c377b6c577ea7460d484.png]: /images/20220828/c502eedb229e4067a3f0c48b2993c102.png
[44ba99c520a27c9887c22883d902d5a1.png]: /images/20220828/0a35af948f5549c39a7fbab02e554f86.png
[1557a0090ed4bad395a3a874a52c511e.png]: /images/20220828/f7a74d0374054806b4de68e65baeadba.png
[592510d42eb1526b00364167b5b4f80d.png]: /images/20220828/4be549a9c22449edbe59ebe4f5d0f1ba.png
[5ba8bd8ec8c2bbb3cdbce7a2aebff58b.png]: /images/20220828/1de58b8865cb40e9b4b57f15c1a2fa94.png
[72bd389935dbc77c99e86f7dfd399fcd.png]: /images/20220828/8d5918d0a59043b9aee229f91ea8000e.png
[82d2684b0acba61a3663bb098c10747b.gif]: /images/20220828/789345ebb0d04fa5bf3ee10023596433.png
[b02efa53348a1e00c3848afc23809462.png]: /images/20220828/d16e6546ed9d499cbba7194cb099b57f.png
[4dbb384b6afbd148388f6cf320781324.png]: /images/20220828/61f7666d26104ceaa9cf1f0b88f113aa.png
[df774aacdf94be96c9d0e34be11c44db.png]: /images/20220828/e8cca8fb13074660a26d8be23a21b6da.png
[64f408b23b0a9b8eec79e9e37df4e48c.gif]: /images/20220828/2df79abc06a24c4498599977cac76184.png
[aa516459c6c950fb8cd39fda56271cc6.png]: /images/20220828/6bc480f6f9684099a808f98a473783a3.png
[44ce6ed5e1164bd5845d2f22f9543597.png]: /images/20220828/74588213e9bc4499a0ec2b394cfc5861.png
[23b32fce4ff5085c019f5ccb7b7691e4.png]: /images/20220828/d135d756c687420792c10bd3760c3965.png
[0ff7e79a63e2d7c85e4b9fb47c52d23a.png]: /images/20220828/e6b8f6de6bfd473eb56bd06bfe9e9068.png
[VSCode]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247490125&idx=1&sn=6fd97c4dbb1095de0b2944f5b84228d3&chksm=fa3cfb16cd4b7200eb87930b169afca7f8df37c142e2296c6a25375c838562335375e1cf49c8&scene=21#wechat_redirect
[VS Code]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247485836&idx=1&sn=f258029e35ea429c6ee879f225e7605f&chksm=fa3ce8d7cd4b61c18aeba3cf04d3ea6722832a9cfb3bb3d7907418bb7cfaa855fe18de6a01ca&scene=21#wechat_redirect
[VS Code_ 1]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247488875&idx=2&sn=aba512ad1593d26240597a764d16198a&chksm=fa3cf430cd4b7d261be7b44e2f5b455d4dca3b0f0a23680888dc5c1130c33227a62ed678b824&scene=21#wechat_redirect
[7 _ VS Code]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247487219&idx=1&sn=3f08e8675a22f24f093a9b4a28116504&chksm=fa3cefa8cd4b66bea7d91f9e840e2dd55dad782240ed4bf87f54d5a13b3690464778b195cace&scene=21#wechat_redirect
[PyCharm vs VSCode_ IDE]: http://mp.weixin.qq.com/s?__biz=MzUyMzM2ODUwMA==&mid=2247489909&idx=2&sn=5bb5837a36fbac8ee73a089407298243&chksm=fa3cf82ecd4b7138f422535e68a62a60e7b537c25975efd65434b69e1f01d41ebd38148ca8d0&scene=21#wechat_redirect