目录1.概述2.vscode插件清单2.1.Vetur插件让Vue文件代码高亮2.2.Vue VSCode Snippets自动生成vue模板内容插件1.安装插件2.使用插件生成vu
这篇文章总结下使用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文件上右键来选择打开方式。
在当前目录下如果只有一个分支,这个分支总是横向显示,我们更习惯是分级显示。
1.设置目录分级显示
查看目录分级显示
编写代码的过程中,免不了会有函数嵌套或是其他一些逻辑判断等层层嵌套,随着代码量的增加,你会不会感觉括号嵌套太多层而导致代码难以阅读。
VSCode中安装 Bracket Pair Colorizer插件,安装此插件后,再阅读自己的代码,各个成对儿的括号都会以不同的颜色进行区别
这款主题叫做 Material Icon Theme,它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面。
在创建项目时使用语法检查器能够规范代码格式,不符合规则的代码会给出错误提示,将影响项目运行。
使用了语法检查器本来是让代码开发变得规范,如果影响了项目运行就不太合适,这个时候可以使用ESLint插件和Prettier - code fORMatter插件自动格式化代码,修正不符合规范的代码。
插件安装和配置参考文章:https://www.jb51.net/article/261887.htm
到此这篇关于VsCode工具开发vue项目必装插件的文章就介绍到这了,更多相关VsCode开发vue必装插件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: VsCode工具开发vue项目必装插件清单(推荐!)
本文链接: https://www.lsjlt.com/news/166945.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0