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