vscode前端开发必备插件【开发必备】

文章最后更新时间:2023-06-15 11:54:56

前言

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

1.Chinese (Simplified)

不用多说,英语不太好的小伙伴(比如我)必装的汉化插件,英语好的可以略过!

d2b5ca33bd20241217191256

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

2.Auto Rename Tag

同步修改 HTML/XML标签

d2b5ca33bd20241217191306

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

cfc5f9d83f20241217191323

3.open in browser

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

d2b5ca33bd20241217191334

4.Live Server

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

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

d2b5ca33bd20241217191344

5.Easy LESS

实时编译lesscss,这个插件我就不多讲,用的都比较多!

d2b5ca33bd20241217191444

6.Sass

sass/scss文件必装的插件

d2b5ca33bd20241217191452

7.Live Sass Compiler

实时编译sass/scsscss

d2b5ca33bd20241217191500

8.Material Icon Theme

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

d2b5ca33bd20241217191514

9.Bracket Pair Color DLW

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

d2b5ca33bd20241217191523

10.Dracula Official

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

d2b5ca33bd20241217191531

11.CodeGeeX

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

d2b5ca33bd20241217191540

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

12.minify

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

d2b5ca33bd20241217191549

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

d2b5ca33bd20241217191558

13.css-auto-prefix

d2b5ca33bd20241217191605

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

Autoprefixer处理后css代码

display: -webkit-box;
display: -ms-flexbox; 
display: flex;
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容