VSCode 前端开发必备插件推荐-星雨博客

前言

前段时间刚好新入手了一台笔记本，刚好这里安装vs code，在本篇文章给大家总结分享一些VSCode常用插件，希望可以给刚入坑前端的小伙伴一些帮助。本文很长，如果能认真看完，你一定会有所收获。

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

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

同步修改 HTML/XML标签

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

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

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

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

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

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

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

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

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

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

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

前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。

Autoprefixer处理前的代码

display: flex;

Autoprefixer处理后css代码

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

One Dark Pro 是一款基于 Atom 编辑器的经典 One Dark 主题，适用于 VSCode。它提供深色的界面设计，帮助开发者减轻眼睛疲劳，且具备高对比度的代码高亮，提升阅读体验。这个插件广受开发者欢迎，适合长时间编码使用。

文章版权归作者所有，未经允许请勿转载。

THE END