小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

VsCode工具开发vue项目必装插件_vscode 识别vue文件插件

作者：小桥流水78 | 2024-07-29 02:46:22

踩

vscode 识别vue文件插件

VsCode工具开发vue项目必装插件

这篇文章总结下使用VscCode工具开发VUE项目都有哪些插件是必须要安装，这些插件都是开发的好伴侣。

当新建一个vue项目时，经常需要在VsCode工具中安装插件，但是没有符合开发项目的插件清单，寻找这些插件还是很费时间，这里总结的是一份项目开发必备的插件清单。

vue项目中vue结尾的文件代码通默认都是没有高亮显示，安装Vetur插件可以让vue文件代码高亮。

在这里插入图片描述

在VScode工具中使用vue开发项目，创建每个组件都要写相同的内容是一件繁琐的事情，我们可以交给插件帮我们完成

在这里插入图片描述

在插件详情中有完整的命令介绍
在这里插入图片描述
新建一个vue组件，输入vb回车后就出来模板内容

模板内容展示

在VSCode的Extends扩展中输入live，在LiveServer上点击Install安装即可
在这里插入图片描述

上面修改代码后，需要手动保存才能在网页上展示新的内容。那么我们设置VSCode自动保存代码就可以实时的在网页显示新的内容。
在这里插入图片描述

在扩展栏的搜索栏中输入open in browser，找到open in browser这款插件，点击右下角“安装”字样即可安装。
在这里插入图片描述

vscode打开一个html文件方式：
1.按下Alt+B即可打开默认的浏览器。
2.如果需要在非默认浏览器上打开快捷键 Shift+Alt+B
3.还可以通过在html文件上右键来选择打开方式。

在当前目录下如果只有一个分支，这个分支总是横向显示，我们更习惯是分级显示。
在这里插入图片描述

编写代码的过程中，免不了会有函数嵌套或是其他一些逻辑判断等层层嵌套，随着代码量的增加，你会不会感觉括号嵌套太多层而导致代码难以阅读。

VSCode中安装 Bracket Pair Colorizer插件，安装此插件后，再阅读自己的代码，各个成对儿的括号都会以不同的颜色进行区别
在这里插入图片描述

这款主题叫做 Material Icon Theme，它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面。
在这里插入图片描述

在创建项目时使用语法检查器能够规范代码格式，不符合规则的代码会给出错误提示，将影响项目运行。
使用了语法检查器本来是让代码开发变得规范，如果影响了项目运行就不太合适，这个时候可以使用ESLint插件和Prettier - code formatter插件自动格式化代码，修正不符合规范的代码。

插件安装和配置参考文章：https://brucelong.blog.csdn.net/article/details/113687627

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/896815