vscode前端开发必备插件[精品插件]

前言

因为前段时间电脑系统崩了，然后只能重装，刚好这里安装vs code，在本篇文章给大家总结分享一些VSCode常用插件，希望可以给刚入坑前端的小伙伴一些帮助。本文很长，如果能认真看完，你一定会有所收获。

1.Chinese (Simplified)

不用多说，英语不太好的小伙伴（比如我）必装的汉化插件，英语好的可以略过！

安装完成以后重启vscode就可以啦！

2.Auto Rename Tag

同步修改 HTML/XML标签

当我们前一个标签修改完之后，后面的标签也会同步更新！

3.open in browser

提供右键菜单选项，一键在浏览器打开html文件。

4.Live Server

开启一个实时的本地服务器

一个非常好用的插件，每次保存文件后到浏览器都要刷新才能看到最新的变化，有了这个插件，就可以实时监听文件的变化，自动刷新，真滴好用。

5.Easy LESS

实时编译less到css,这个插件我就不多讲，用的都比较多！

6.Sass

写sass/scss文件必装的插件

7.Live Sass Compiler

实时编译sass/scss到css

8.文件图标

Material Icon Theme 拥有超多的文件图标，色彩饱和度高。

9.Bracket Pair Color DLW

当我们代码比较多时，有时括号多的都看不过来了，这个插件它会给每个括号标记不同的颜色，让我们看代码的时候就会显得比较直观！

10.Dracula Official

这是我个人比较喜欢的一款主题插件，基本上我的每个开发工具都会装上它！

11.CodeGeeX

这是一款ai辅助写代码的插件，我建议初学者就不要去装了，等前端代码比较熟练以后再去使用！

但是这里提醒一下部分小伙伴，ai需要谨慎使用，因为生成的代码可能不总是符合项目的具体要求，且需要进行适当的代码审查和测试。

12.minify

在项目中， build出来的js实在是太大了， 而有的小伙伴不能使用公司以外的网站或者是插件来压缩，此时就可以用minify对css或者js进行压缩！

在你需要压缩的文件上方搜索输入>minify就可以看到minify了，点击就可以进行压缩！当然你也可以通过旁边的图标来设置一个快捷键！

13.css-auto-prefix

display: flex;

display: -webkit-box;
display: -ms-flexbox; 
display: flex;