vscode开发高频、通用插件集合（精选15个）

最新推荐文章于 2025-04-10 10:16:00 发布

欧阳呀

最新推荐文章于 2025-04-10 10:16:00 发布

阅读量3.7k

点赞数 20

分类专栏：前端进阶文章标签： vscode github ide

本文链接：https://blog.csdn.net/qq_35942348/article/details/125434757

版权

前端进阶专栏收录该内容

28 篇文章

订阅专栏

vscode开发通用插件集合

此文仅是本人多年的一些经验，用到过一些插件的总结，不去做各种比较，客官们觉得哪个好用就用哪个。
外观与功能性的都有

1.Live Serve

在这里插入图片描述

一个具有实时加载及更新功能的本地小型服务器，写代码很好用，Ctrl + s保存，浏览器实时更新
简单的节点应用程序，用于工作目录及其子目录。它也监视文件的变化，当这种情况发生时，它通过web套接字连接向浏览器发送消息，指示它重新加载

2. Chinese

在这里插入图片描述

英语弱鸡必备（我用是因为：我爱中国人！从不学洋文！）
安装完需要重启

3. GitLens

在这里插入图片描述

这是强烈推荐安装的，防止各位在接手别人代码的时候（特别是”屎山”），知道是谁写的，这个时候就不会骂错人
与Git搭配使用，能够知道哪行代码是谁写的，谁提交的，非常精确，精准的知道谁可以骂，领导写的代码不能骂（一般在心里偷偷骂）
代码格式化的时候需谨慎（不然都变成你写的了）

4. Color Highlight

在这里插入图片描述

这个没啥说的，代码高亮显示，有趣的是，颜色代码跟着变化，很直观

5. Highlight Matching Tag

在这里插入图片描述

标签配对，方便代码很多的时候找标签

6. any-rule

在这里插入图片描述

常用的正则表达式都在这，且会日常更新
使用方法看图（主要是省去了去查百度和验证的时间）

7. Time Master 或 Code Time

在这里插入图片描述

记录你的敲代码时间及打开编辑器的时间，方便各位计算时薪多少，计算投入与产出比
注意别被老板或者领导看到，特别是你摸了一天鱼（如果各位公司很闲，就不要下了）

8. Vetur

在这里插入图片描述

一句话：Vue开发必备（语法高亮）

9. ESLint

在这里插入图片描述

格式化代码用的，很好用，特别是代码习惯不太好的伙伴，鼠标右键选择，一键操作
可以自行配置：找到设置 -> 用户 -> 扩展 -> eslint，选择在 settings.json 中编辑配置项

10. Vue-format

在这里插入图片描述

添加对.vue文件的格式化支持（上述的ESLint插件在面对.vue文件有时候不好使）
前提是要先安装Vetur插件，案例如下

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

11. ENV

在这里插入图片描述

将env文件（.env）的格式和语法突出显示支持添加到Visual Studio代码中
个人感觉也是必备的，处理各种配置文件很方便

12. background

在这里插入图片描述

界面可定制化处理
说人话：vscode 编辑界面可以加背景图，放上你的女神，看着敲代码
图片路径和透明图、大小都是可以调整的
本人目前只放了个小的（自带的），放大图的会导致代码区域看不太清（选图的时候，最好是深色的）

在这里插入图片描述

13. Code Runner

在这里插入图片描述

这个很好用，运行代码，可以在编辑器中查看结果，前端同学可以在控制台看，方便，高效。
其它使用方式可以看下官网

14. Local History

在这里插入图片描述

很强大的插件，可以查看代码修改记录
代码量大或者项目很多的伙伴们可以装一下，有时候真不记得修改了哪里
安装完以后，项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore，此文件放本地就可以

15. Postcode

在这里插入图片描述

如果你经常使用 Postman，那这个是必装的（vscode里使用postman），非常方便
之前单独安装的软件Postman打开很慢，很麻烦
安装完以后左侧菜单会出现一个小盒子的图标，点开以后点击 Create Request 就可以正常使用了。
以上插件根据需求安装，个人感觉也不需要装太多，会导致VScode很卡
千万别动不动就搞几十个插件！

1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)

在这里插入图片描述