VS Code的5个扩展和主题可以改变前端开发人员的生活

这篇文章的作者(我们今天将要翻译的翻译版)想谈一谈流行的VS Code编辑器的一些扩展和主题,它们可以改善开发人员的生活。



SCSS智能感知


SCSS IntelliSense页面

在SCSS中创建变量既简单又有趣。 如何记住他们? 在此通常会出现困难。

如果您像我一样,则可以使用_variables.scss文件,其中包含成百上千美元的图标和变量名,这些文件和变量名是在凌晨三点出现的。 SCSS扩展IntelliSense在处理项目代码时为变量名称提供提示。 而且您不再需要完全记住这些名称。 无需翻阅带有变量名的文件即可调用它们。

这是SCSS IntelliSense扩展的外观。


IntelliSense SCSS扩展的实际应用

自动重命名标签


自动重命名标签页

无论使用哪种前端框架,编写HTML(或JSX)都是一项繁琐的工作。 尤其是在开始和结束标记之间有大约50行某些代码的情况下。 在工作过程中,可能需要将H2标签更改为H3 。 可能需要用span代替div 。 无论如何,如果您在不使用辅助工具的情况下解决了此类问题,那么在大规模代码片段中,它们将导致难以找到结束标签。

为什么不叫汽车来帮助您自动编辑标签? 为此,只需使用自动重命名标签扩展名即可。 编辑开始标签时,它会自动更改和关闭。 如果更改了结束标签,则会发生相反的事情。

自动重命名标签的工作原理如下。


使用自动重命名标签扩展

重复动作


复制动作页面

使用右键菜单创建重复文件和文件夹的功能非常有用,应将其内置到VS Code中。 但是,没有这样的机会,这位编辑很出色,所以他可以原谅这样的缺陷。

实际上,为了使VS Code具备上述功能,只需安装Duplicate Action扩展即可。 启用后,开发人员将具有“ Duplicate file or directory上下文”菜单命令。


重复操作扩展名和文件上下文菜单更改

码流


CodeStream页面

如果简要描述CodeStream,那么我们可以说此扩展名与将来评论代码的系统相当。

许多程序员不喜欢离开他们的IDE。 但是,为了向同事解释某些内容并自己提出问题,您必须摆脱熟悉的环境,并使用Trello,Slack,Asana,Bitbucket和Microsoft Teams。 CodeStream支持许多工具和一个IDE,使用它可以在不离开代码编辑器熟悉的环境的情况下处理问题。 许多从事工作的人倾向于进入所谓的“流动状态”。 退出编辑器通常会使此人脱离此状态。 感谢CodeStream,无需离开您熟悉的环境就可以解决有关代码的问题。


CodeStream中的代码讨论

夜猫子


夜猫子页面

夜猫子是有史以来为IDE创建的最佳主题之一。 三年来,我每天都在使用它。 下面是我实际工作屏幕的屏幕截图。 本主题的标题表明该主题适用于夜间坐在计算机上的人员。 的确,它非常适合夜间工作,可以防止眼睛过度劳累,并且柔和的蓝色调可以帮助您轻松解决复杂的问题。


夜猫子主题

奖励:Synthwave '84主题


Synthwave '84页面

这个主题来自赛博朋克世界。 它与皮革斗篷,兰博基尼Countach和烟雾发生器搭配得很好。 如果这一切都离您很近,请打开您喜欢的Vaporwave音乐并编写漂亮的代码,直到您的意识已加入Neuromancer数据库。

为了获得发光文字的效果,在安装此主题之后,您必须对其进行一些修改。 但是您一定会同意,这种美丽值得为它的成就付出一些努力。


Synthwave '84主题

亲爱的读者们! 您知道VS Code的任何有趣的扩展和主题吗?

Source: https://habr.com/ru/post/zh-CN482468/


All Articles