1. 首页

让开发效率“飞起”的 5 个 VS Code 插件

本文作者介绍了 VS Code 上 5 个不错的插件,希望让你更好更快地写代码。

这些插件可以让你敲代码时“笑口常开”。

SCSS IntelliSense

在 SCSS 中创建变量,这是很棒的体验。但创建后,你还记得它们吗?可能没记住太多吧。

让开发效率“飞起”的 5 个 VS Code 插件

也许你也会像我一样弄一个 _variables.scss,里面有几百个 $ 符号,还有一大堆名称,都是你前天凌晨 3 点才搞出来的。有了这个插件,你就能在应用的任何位置快速获取你发明的那些 SCSS 变量名。再也用不着记住那些名称,也无需进行文件搜索。

获取地址:

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss

Auto Rename Tag

无论你选择哪种框架,当开始和结束标签间的代码有 50 多行时,前端 HTML(或 JSX)编程都会成为一件令人精疲力尽的工作。也许你想将一个 H2 更改为 H3,也许你想将一个 div 更改为 span,不管是要做什么,结束标签都会很难找,这时候就该用这个插件了。

让开发效率“飞起”的 5 个 VS Code 插件

何不省掉这些麻烦,让更改自动为你执行呢?Auto Rename Tag 就是干这个事情的。无论你在开始标签中做了什么更改,更改都会自动复制到结束标签中,反之亦然。

获取地址:

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Duplicate Action

VS Code 真应该自带 右键单击复制文件 的功能,不过考虑到他们产品已经很出色,我觉得有一些小缺陷也是合理的。

让开发效率“飞起”的 5 个 VS Code 插件

而且你需要的只是一个 Duplicate Action 扩展就够了,它恰恰能提供你想要的东西。

获取地址:

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate

CodeStream

简单来说,这就是打了“兴奋剂”的 //comments。

你离不开自己的 IDE 吗?你在使用 Trello、Slack、Asana、Bitbucket 和 Microsoft Teams 吗?CodeStream 支持一大堆工具和 IDE,因此你无需离开自己的编程环境即可跟踪问题。

让开发效率“飞起”的 5 个 VS Code 插件

这意味着你能有更多时间“呆”在自己的编程世界里,无需花太多功夫向同事解释今天遇到的问题。

获取地址:

https://marketplace.visualstudio.com/items?itemName=CodeStream.codestream

Night Owl

对一款 IDE 来说,这是有史以来最出色的主题之一,并且,它是我过去三年中工作的日常标配(下面正是我的工作屏幕截图)。

让开发效率“飞起”的 5 个 VS Code 插件

大晚上,你要对自己的眼睛好一些,这样你的心情也会更舒坦。

获取地址:

https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

荣誉提名:

Synthwave ‘84

这个编程主题是银翼杀手风格。它很适合与真皮风衣、兰博基尼 Countach 经典跑车和烟雾缭绕的气氛相搭配。放点蒸汽风格的背景音乐,开始写代码吧。

让开发效率“飞起”的 5 个 VS Code 插件

与其他主题不同,Synthwave ’84 需要一些额外操作才能激活文本发光效果,但一切搞定后,你会觉得物有所值。

获取地址:

https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

原文链接

作者 | Titus Decali
译者 | 王强

https://medium.com/better-programming/5-vs-code-extensions-thatll-change-your-dev-life-9786756a8121

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:让开发效率“飞起”的 5 个 VS Code 插件

链接:https://www.javascriptc.com/3340.html

« 【前端基础】JavaScript 引擎运行原理
Webpack 模块机制»
Flutter 中文教程资源

相关推荐

QR code