专栏首页Vue开发社区10 款 提升工作效率的VSCode 扩展

10 款 提升工作效率的VSCode 扩展

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

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

在本文中,我们将介绍每一位开发人员都应该了解的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/

文章分享自微信公众号:
前端开发社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2022-03-29
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 干货:用好VSCode这13款插件和8个快捷键,工作效率提升10倍

    Visual Studio Code(简称VS Code)是一个由微软开发,同时支持Windows 、Linux 和 macOS 等操作系统的免费代码编辑器,在...

    灵魂画师牧码
  • 25 个提升开发幸福感的 VSCode 扩展

    我认为它如此受欢迎的原因很简单,因为 VSCode 提供了每个开发者想要的功能,包括他们甚至不知道自己需要的功能。这就是 VSCode 的秘密魅力——它总能让你...

    一只图雀
  • VScode - 10个提高工作效率的快捷键

    全部收起展开 ctrl + k ctrl + 0 ctrl + k ctrl + j

    WahFung
  • 从零开发一款基于 webview 的 vscode 扩展

    在团队降本提效的基建中,洛竹开发了一款 vscode 插件,第一版我使用的是 vscode 内置 UI,虽说也能用,但是用户体验欠佳。由于 vscode 内置 ...

    用户1250838
  • 10 个省时间的 PyCharm 技巧,提升工作效率,杠杠滴!

    写 Python 代码时,你会严格遵守 pep8 规范么?还是要遵守的,不然代码传到 github 或者知乎上被人怼就不好了。但是如果靠肉眼去检查和注意的话,太...

    昱良
  • 10个提升工作效率的Secure CRT小窍门 - 你玩转了几个?

    SecureCRT是一款支持 SSH2、SSH1、Telnet、Telnet/SSH、Relogin、Serial、TAPI、RAW 等协议的终端仿真程序,最...

    用户8611941
  • 17 款程序员必备的 Chrome 扩展插件! 提升开发效率!

    下载链接:https://www.chajianxw.com/themes/18893.html

    用户4710816
  • ​WebStorm 超好用的10款插件,效率提升了好多!

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器...

    程序IT圈
  • 10 个web前端开发者都应该知道的提升工作效率的网站

    英文 | https://medium.com/geekculture/10-killer-website-that-every-programmer-shou...

    winty
  • 推荐给 Mac 新手准备的工具套餐!

    本文主要记录Mac开发环境的设置,以及一些优秀软件,使用技巧等。所有的设置 、软件 以及技巧 都追求极致简洁和极致效率,最大可能提升工具效率,提升生产力。当然大...

    Java技术江湖
  • 推荐给 Mac 新手准备的工具套餐!

    本文主要记录Mac开发环境的设置,以及一些优秀软件,使用技巧等。所有的设置 、软件 以及技巧 都追求极致简洁和极致效率,最大可能提升工具效率,提升生产力。当然大...

    芋道源码
  • 2020,建议搞个 Mac 玩玩!

    本文主要记录Mac开发环境的设置,以及一些优秀软件,使用技巧等。所有的设置、软件以及技巧都追求极致简洁和极致效率,最大可能提升工具效率,提升生产力。当然大家如果...

    逆锋起笔
  • 2020 搞个 Mac 玩玩吧!

    本文主要记录Mac开发环境的设置,以及一些优秀软件,使用技巧等。所有的设置 、软件 以及技巧 都追求极致简洁和极致效率,最大可能提升工具效率,提升生产力。当然大...

    芋道源码
  • 萌新看过来,你还学不懂VScode插件吗?

    VSCode是微软家一个非常轻量化的编辑器,体量虽轻,但是却有异常强大的功能。原因在于VSCode许多强大功能都是基于插件实现的,IDE只提供一个最基本的框架和...

    葡萄城控件
  • Android Studio 自定义快捷键调用外部程序

    记得刚工作的时候,同事教了我一些做事的方式和方法,至今印象深刻,“当一件事情重复做三次,就要尝试开发一个工具提升去效率”、“当一个错误出现三次时,必须要设法解决...

    字节流动
  • Android Studio 还能这样提升工作效率,你不知道嘛?

    记得刚工作的时候,同事教了我一些做事的方式和方法,至今印象深刻,“当一件事情重复做三次,就要尝试开发一个工具提升去效率”、“当一个错误出现三次时,必须要设法解决...

    字节流动
  • 我发现VSCode有个bug,微软工程师凌晨这样回复...

    最近遇到一个有意思的bug,是关于VSCode编辑器插件的,赶项目时间非常紧,说实话在这时平常用的顺手的IDE出问题非常影响心情。「这就像是你开在高速路上,吃着...

    程序IT圈
  • 我常用的精品插件之VScode插件分享原创

    日常工作中,我们会借助各种工具来辅助我们高效地完成工作,而这些工具里边的插件,就是我们提高效率的一个有力支撑,这里记录我使用过程中遇到的好用插件,做一个汇总集合...

    二丫讲梵

扫码关注腾讯云开发者

领取腾讯云代金券