vue3 vscode插件volar配置教程

更新时间：2023年07月19日 11:08:47 作者：永远不会太晚

这篇文章主要介绍了vue3 vscode插件volar配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1.关闭远程服务

这两个服务需要关闭，否则经常请求半天，只看英文的意思是跟踪联系，暂时不知道这两个服务的具体作用，不过关闭后不影响volar的正常使用，vscode左下角齿轮>设置>搜索volar

在这里插入图片描述

2.拆分编辑器

volar一个很有用的效果就是点击这个图标，可以vue文件左右拆分，并自动折叠template、script、style标签

在这里插入图片描述

volarv1.0.11版本删除了这个拆分图标，社区提问为啥拆分图标没了，作者的回答是为了节省视图空间

https://github.com/johnsoncodehk/volar/issues/2162

提问的老哥又认为，这应该是一个用户设置，由用户来决定是否开启这个拆分按钮，最终作者采取了这个建议

https://github.com/johnsoncodehk/volar/issues/2163

目前最新版已经加了回来，默认是关闭的，可以通过设置里勾选来开启

在这里插入图片描述

命令方式，可设置快捷键

vscode左下角齿轮>键盘快捷方式>搜索volar>命令id为volar.action.splitEditors，设置一个顺手的快捷键

在这里插入图片描述

设置左右折叠的标签

vscode左下角齿轮>设置>搜索settings.json，加入

  	// 左侧不折叠的标签，其余标签会折叠
	"volar.splitEditors.layout.left": [
		"template",
		"script",
		"scriptSetup",
	],
	// 右侧不折叠的标签，其余标签会折叠
	"volar.splitEditors.layout.right": [
		"styles",
		"customBlocks"
	],

3.ref自动补全.value

勾选这个

在这里插入图片描述

到此这篇关于vue3 vscode插件volar配置教程的文章就介绍到这了,更多相关vue3 volar配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目如何实现Echarts在label中获取点击事件
这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
基于Vue中的父子传值问题解决
这篇文章主要介绍了基于Vue中的父子传值问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue+element-ui实现表格编辑的三种实现方式
这篇文章主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下
2018-10-10
vue高德地图之玩转周边
vue高德地图，带你玩转周边，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
在vue中使用Echarts利用watch做动态数据渲染操作
这篇文章主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue移动端实现手指滑动效果
这篇文章主要为大家详细介绍了vue移动端实现手指滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
基于VUE实现简单的学生信息管理系统
这篇文章主要介绍了VUE实现一个简单的学生信息管理系统,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
vue调用本地缓存方式(监视数据变更)
这篇文章主要介绍了vue调用本地缓存方式(监视数据变更)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue项目的创建的步骤(图文教程)
本文主要介绍了vue项目的创建的步骤(图文教程)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue+elementUI配置表格的列显示与隐藏
这篇文章主要为大家详细介绍了vue+elementUI配置表格的列显示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04