前端vscode必备插件推荐,VSCode前端常用的插件

1.chinese

image.png
作用:把vscode的界面变成中文

2.Vetur

image.png
作用:vue2语法高亮,安装了这个插件,代码在vue文件中才有颜色。另外还可以格式化vue文件
vue3的话,请装Volar

3.eslint

image.png
作用:代码检查,我一般都不用这个,波浪线影响我的思维

4.Prettier - Code formatter

image.png
作用:代码格式化

5.open in browser

image.png
作用:允许在默认浏览器或应用程序中打开当前文件

6.Auto Close Tag(自动闭合标签)

image.png
作用:自动重命名成对的 HTML/XML 标记。

7.Auto Rename Tag(自动重命名标签)

image.png
作用:自动重命名成对的 HTML/XML 标记

8.Git History

image.png
作用:一般就是看文件的提交人,修改时间,日期,commit信息等

9.Bracket Pair Colorizer

image.png
作用:给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
其实主要是就为了看出来div是哪个层级的

10.JavaScript(ES6) code snippets

image.png
作用:ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

11.Live Server

image.png
作用:用于将某个静态文件用一个服务容器来对外服务【类似开启了一个静态资源服务器】,说人话就是Live Server 是一个具有实时加载功能的小型服务器,使用它进行 web 页面开发就好像在服务器上修改页面一样。同时它因为具有实时加载功能,代码修改后页面会进行实时刷新,可以直观的看到网页的修改效果。
主要就是热更新,其实用vue脚手架或者react脚手架开发的话,基本上就不用了

12.Vue VSCode Snippets
image.png
vue2、vue3的语法提示,可自定义语法片段

总结:
其实常用的暂时想到也就这些了,不够的可以自己去添加,不过没必要搞这么多花里胡哨的,主要还是为了快速的开发。

猜你喜欢

转载自blog.csdn.net/weixin_43239880/article/details/130289001