VS代码扩展将提高您的开发效率

2020年12月30日10:58:21 发表评论 48 次浏览

本文概述

拥有适合你工作流程的良好文本或代码编辑器对于开发人员的工作效率至关重要。 VS Code默认提供许多功能, 但是这里有7个扩展, 可以帮助你将工作流程提升到另一个层次。

  • 什么是VS代码?
  • VS代码扩展
  • Sublime Text键映射和设置导入器
  • 进口费用
  • 缩进彩虹
  • 彩虹括号
  • 设置同步
  • 配置文件切换器
  • 更好的评论
  • 重复动作

什么是VS代码?

如果你不熟悉, 请快速注意。VS代码, 是Visual Studio Code的缩写, 是Microsoft团队维护的一种流行的文本或代码编辑器。

在过去的一两年中, 它在开发人员市场中增长了巨大的份额, 使其成为Web开发人员的首选编辑器。

加上Microsoft投入大量时间, 而独立开发人员正在开发大量扩展, 再加上一试便无可厚非。

VS代码扩展

VS Code出色的部分原因在于它的可扩展性。它允许开发人员通过实现Microsoft可能不希望支持的功能, 甚至在其基础上构建完整的笔记体验, 从而创造性地将编辑器带入另一个层次。泡沫.

虽然在VS代码市场, 这对于我作为一名积极的开发人员的工作流程至关重要。

Sublime Text键映射和设置导入器

在转到VS Code之前, 我是Sublime Text 3用户。它仍然是一个很棒的文本编辑器, 但是当转向VS Code时, 许多快捷键和键映射是不一样的。

Sublime Text键映射和设置导入器让我首先从Sublime文本导入设置, 但它也设置了默认的键映射。这使得Sublime中可用的快捷方式在VS Code中立即可用。

VS代码扩展将提高您的开发效率1

VS Code中的Sublime Text键映射

这包括我的两个收藏夹, 例如多选(选择某项然后按CMD + D / Ctrl + D)和复制一行(在一行上添加光标并按CMD + Shift + D / Ctrl + Shift + D)。

Sublime Text键映射和设置导入器(marketplace.visualstudio.com)

进口费用

现代开发人员必须不断处理来自各种来源的依赖关系。当我们引入许多不同的代码来构建我们的项目时, 这些额外的代码是有代价的。

VS代码扩展将提高您的开发效率2

在VS Code中显示导入大小

进口费用计算进口量的估算值, 从而使我们能够看到要增加的附加权重(加上该依存关系)给项目规模。

这有助于我们识别依赖项的大小, 防止意外的大型库过载而影响性能并损害客户的用户体验。

进口费用(marketplace.visualstudio.com)

缩进彩虹

样式是使我们的代码具有可读性的重要因素。该样式的一部分是我们缩进代码的方式, 因此我们了解不同代码块的嵌套。

问题是有时嵌套会变得非常大, 很难找到哪个开始标签属于哪个结束标签。

VS代码扩展将提高您的开发效率3

VS Code中的彩虹色缩进间距

缩进彩虹在缩进空间中添加颜色, 使我们可以轻松地对齐并查看哪些标签属于彼此。

缩进彩虹(marketplace.visualstudio.com)

彩虹括号

与缩进类似, 复杂的代码(尤其是在使用数学时)可以在同一条语句中多次使用括号的情况下创建容易混淆的代码行。

例如, 如果我们要应用一些简单的数学运算:

const value = (((1+1)*2)+1)*2;

尽管这是一个简单的示例, 但很容易失控并且难以跟踪。

VS代码扩展将提高您的开发效率4

VS Code中的彩虹色括号

彩虹括号用不同的颜色突出显示括号, 使我们可以更好地了解方程式的哪个右括号。

彩虹括号(marketplace.visualstudio.com)

设置同步

如果你通常会在两台笔记本电脑或两个不同的环境之间工作, 那么你可能需要手动保持文本编辑器不变, 如果你对设置有所保留(例如我)。

VS代码扩展将提高您的开发效率5

VS Code中的设置同步配置

设置同步允许你将VS Code设置保存在GitHub Gist中。这使你可以在不同的VS Code安装之间同步这些设置

设置同步(marketplace.visualstudio.com)

注意:如果你想了解更多信息, 我写了一个教程引导你逐步进行设置!

配置文件切换器

作为内容创建者, 我需要确保在向他人展示屏幕时, 我正在使用可访问的颜色和字体大小, 以使人们可以轻松地看到我正在演示的内容。

问题是, 当我开始编码时, 这些设置不是我每天喜欢使用的设置。

VS代码扩展将提高您的开发效率6

VS Code中的切换配置文件

配置文件切换器允许你设置多个VS Code配置文件, 每个配置文件都有各自的配置, 从而可以轻松在不同的设置之间进行切换。

配置文件切换器(marketplace.visualstudio.com)

尽管在编写代码时它们似乎并不重要, 但是注释对于帮助其他人理解该代码至关重要。当你在未来的一年中查看它们时, 它们通常还会帮助你理解它。

这些评论很有用, 但是很难读懂, 因为它们通常都是一种灰色, 不一定能脱颖而出。

VS代码扩展将提高您的开发效率7

VS Code中注释块的关键字高亮显示

那边更好的评论进来, 它为注释添加了一种语法突出显示, 为关键字和语句添加了颜色, 从而有助于代码注释的可读性。

更好的评论(marketplace.visualstudio.com)

重复动作

这最后一个似乎很小, 但是由于某种原因, VS Code不能右键单击文件并默认复制它。

当我沉迷于代码时, 通常会复制一个文件(例如现有模板), 这样我只能更改内容。这使创建新页面的工作效率更高。

VS代码扩展将提高您的开发效率8

VS Code中的重复文件或目录选项

重复动作只需在右键单击文件或文件夹时将"复制文件或文件夹"选项添加到上下文菜单。

重复动作(marketplace.visualstudio.com)

你最喜欢的扩展程序是什么?

有大量的扩展程序可以完成令人惊奇的事情-你最喜欢什么?让我知道在Twitter上与我分享!

跟我来了解更多Javascript,UX和其他有趣的东西!
  • Twitter在Twitter上关注我
  • 📺订阅我的YouTube
  • 📫订阅我的时事通讯
  • 💝赞助我
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: