分享几个我日常使用的VS Code插件

在这篇文章中 , 我想介绍一下自己日常使用中最喜欢的Visual Studio Code扩展 。 大多数时候 , 我用VS Code编写的是JavaScript应用程序(标准JavaScript、React、Angular、NodeJS……各式各样) 。
Bracket Pair Colorizer 2
分享几个我日常使用的VS Code插件文章插图
这个扩展很不错 , 可以帮助我搞清楚JavaScript中复杂的嵌套promise 。 顾名思义 , 它可以让方括号对变色 , 帮我弄清楚是否在某个地方搞糊涂了(例如缺少方括号) 。 它默认匹配()、[]和{}等普通括号 , 但如果需要你也可以定义自定义括号 。
它还有其他许多很酷的功能 , 例如定义颜色或为活动括号显示装订线之类 。 值得尝试一波 。
链接:
Marketplace:
NPM Intellisense
分享几个我日常使用的VS Code插件文章插图
如动图所示 , 它能自动完成以NPM包为目标的require import语句 。 这可以提供很多帮助 , 尤其是当你的项目变得很大 , 并且在package.json中包含很多依赖项时 。 我不想再错过这个插件了 , 强烈推荐!
链接:
Marketplace:
Path Intellisense
分享几个我日常使用的VS Code插件文章插图
这是NPM Intellisense的姐妹插件 。 它会执行相同的自动补全 , 不过针对的是你的文件系统 。 这俩插件的维护者是同一人 , 我也不想再错过这个好东西!
链接:
Marketplace:
Quokka.js
分享几个我日常使用的VS Code插件文章插图
如果你只是想尝试一些东西 , 不想费劲先设置项目 , 那么这款工具就是一个很好的辅助 。 通过实时检查输出 , 它会立即将输出显示在JavaScript/TypeScript代码旁边 , 如动图所示 。 这是一个很好的扩展 , 特别适合调试目的 。
链接:
Marketplace:
Docker由于我经常使用NodeJS , 因此习惯了完全使用Docker设置开发环境 。 在找到这个扩展之前 , 我只会用CLI 。
这个扩展是处理多个Docker映像和容器的必备 , 因为你可以用它快速浏览正在运行哪些容器、构建哪些映像以及创建哪些网络 。
如果你每天都在使用Docker , 那么我强烈推荐这个扩展 。
链接:
Marketplace:
Live Server
分享几个我日常使用的VS Code插件文章插图
我仍在不时使用静态网站和标准JavaScript , 而且这样做的时候我不想安装诸如webpack-dev-server之类的东西 。 这个扩展为本地开发服务器提供了热重载功能 , 从而能帮助我解决这个问题 , 也就是说它会在保存对文件所做的任何更改后立即刷新页面 。 它在状态栏中有一个漂亮的“Go Live”按钮 , 你只需单击一下即可启动服务器 。 如果你还没用上的话 , 一定要看看这个扩展 。
链接:
【分享几个我日常使用的VS Code插件】Marketplace:
Auto Close Tag和Auto Rename Tag
分享几个我日常使用的VS Code插件文章插图
它们是VS Code的两个小插件 , 可通过自动重命名和关闭标签来帮助你维护HTML文件 。 这也适用于React自己的JSX语法 。 如果你想节省一些时间 , 请尝试一下 。
Auto Close Tag:://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Markdown Preview Enhanced
分享几个我日常使用的VS Code插件文章插图
我用Markdown做很多事情 。 例如 , 在hashnode.com或dev.to上写文章 , 为我的私人项目写文档 , 或者在markdown中写笔记来理顺自己的想法 。 大多数时候 , 我都是用VS Code来写的 , 在找到Markdown Preview Enhanced插件之前 , 我一直缺乏好用的Markdown预览工具 。 它不仅为你提供预览 , 而且还有同步滚动、PDF导出和PlantUML的功能 。 我非常喜欢这个工具 , 所以向经常用Markdown的人们高度推荐 。
链接:
Marketplace:
小结以上就是我每天最常用的VS Code扩展 。 我希望你发现了一些对你的工作流程有用的新东西 , 你有什么好用的扩展也可以在评论里推荐 。
原文链接:
延伸阅读:
VS Code会“一统江湖”吗?-InfoQ
关注我并转发此篇文章 , 私信我“领取资料” , 即可免费获得InfoQ价值4999元迷你书 , 点击文末「了解更多」 , 即可移步InfoQ官网 , 获取最新资讯~