1, Vetur
VUE开发必备插件 1.语法高亮,包括 vue/html css/sass/scss/less/stylus js/ts 2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件 3.语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript 4.emmet 支持 5.支持调试 6.代码片段自动补全 包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript
![在这里插入图片描述](https://img-blog.csdnimg.cn/07559db46f2e4c749e996520095f01c9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
2,Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包
![在这里插入图片描述](https://img-blog.csdnimg.cn/fb5c07fa9fb845c49675a3588e497092.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
3,Code Runner
非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等 安装完成后,右上角会出现:?
![在这里插入图片描述](https://img-blog.csdnimg.cn/264fd60f8cb240c6a35b9e9e9762f4b9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
4,Path Intellisense
路径补全,自动提示文件名
![在这里插入图片描述](https://img-blog.csdnimg.cn/c0c1067c0f394d0c943ddea692460929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
5,Bracket Pair Colorizer
用不同颜色高亮显示匹配的括号 对配对的括号进行着色,方便区分,未安装该插件之前括号统一都是白色的。
![在这里插入图片描述](https://img-blog.csdnimg.cn/3cd39821e3cc4d57bf1a0cc2ce87ece0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
6,Live Server
安装这个插件之后,我们在编辑器中修改代码,按Ctrl+S保存,修改效果就会实时同步,显示在浏览器中,再不用手动刷新。
![在这里插入图片描述](https://img-blog.csdnimg.cn/53cef6bb1dd64d7aa8edf115a5f63ccf.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
7,Vue 3 Snippets
包含所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段
![在这里插入图片描述](https://img-blog.csdnimg.cn/4054d910c42f4ae6971a3de3122c4b64.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
8,Prettier Formatter
代码格式化工具
![在这里插入图片描述](https://img-blog.csdnimg.cn/3426f890c4134d98bc255c010dd03d68.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
9,ESLint
代码风格校验,代码统一、自动修复
![在这里插入图片描述](https://img-blog.csdnimg.cn/85f670966e9f4affa8a144c18059d8dc.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
10,Highlight Matching Tag
高亮显示匹配标签这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/7a9e1523909c47a3bf7c9b9ddbe721a9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
11,Debugger for Chrome
直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能进行打断点。
![在这里插入图片描述](https://img-blog.csdnimg.cn/b21363e430a841cd96e2b3a1f3eeeddf.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
12,Image Preview
鼠标移到路径里显示图像预览
![在这里插入图片描述](https://img-blog.csdnimg.cn/02e830b4ffbb4a23a83e0a1820a4011b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
13,open in browser
作用:快速在浏览器中打开html文件 使用:在html文件中使用快捷键Alt+B会在默认浏览器中打开当前html,如果要用非默认浏览器打开请使用快捷键Shift + Alt + B,或者使用鼠标右键点击
![在这里插入图片描述](https://img-blog.csdnimg.cn/348800346fee495c81a0d918150cc5e5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
14,GitLens — Git supercharged
防背锅神器!可显示代码在何时、以及由何人进行更改了更改。出现问题,精准到人~显示的信息那可真的详细的不能再详细了, 主要用在 Git 管理上。
![在这里插入图片描述](https://img-blog.csdnimg.cn/da7039928dd7468e93306ee7a042338c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
15,Beautify
格式化代码工具,美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。
![在这里插入图片描述](https://img-blog.csdnimg.cn/3a613bc9a75a4c59902535fabdf107fb.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
16,px to rem & rpx (cssrem)
px转化为rem
![在这里插入图片描述](https://img-blog.csdnimg.cn/8bbd3871b0a945029e19652c778c1f2b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjI0MzA0Mw==,size_16,color_FFFFFF,t_70)
注意:
排名不分先后,当然好用插件还有很多,希望小伙伴们推荐一些好用的插件😊
|