vue3 vscode插件volar配置教程

 更新时间:2023年07月19日 11:08:47   作者:永远不会太晚  
这篇文章主要介绍了vue3 vscode插件volar配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

需要禁用vetur,否则可能会有很多冲突,vue2用vetur,vue3用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.use的原理和设计源码探究

    Vue.use的原理和设计源码探究

    这篇文章主要为大家介绍了Vue.use的原理和设计源码探究详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue开发公共组件之返回顶部

    vue开发公共组件之返回顶部

    这篇文章主要为大家详细介绍了vue开发公共组件之返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue实现户籍管理系统

    vue实现户籍管理系统

    这篇文章主要介绍了Vue实现户籍管理系统,户籍信息的添加与删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue3中如何使用component :is 加载组件

    Vue3中如何使用component :is 加载组件

    Monaco-editor,一个vs code 编辑器,需要将其集成到项目,这篇文章主要介绍了Vue3中如何使用component :is 加载组件,需要的朋友可以参考下
    2023-11-11
  • vue3中关于i18n字符串转义问题

    vue3中关于i18n字符串转义问题

    这篇文章主要介绍了vue3中关于i18n字符串转义问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vuex Mutations同步Actions异步原理解析

    vuex Mutations同步Actions异步原理解析

    这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    vue+springboot前后端分离实现单点登录跨域问题解决方法

    这篇文章主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
    2018-01-01
  • 在vue中实现表单验证码与滑动验证功能的代码详解

    在vue中实现表单验证码与滑动验证功能的代码详解

    在Web应用程序中,表单验证码和滑动验证是常见的安全机制,用于防止恶意攻击和机器人攻击,本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下
    2023-06-06
  • vue项目开启Gzip压缩和性能优化操作

    vue项目开启Gzip压缩和性能优化操作

    这篇文章主要介绍了vue项目开启Gzip压缩和性能优化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue Ref全家桶具体用法详解

    Vue Ref全家桶具体用法详解

    ref用来辅助我们获取DOM元素或组件的引用实例对象,每个vue的组件实例上,都包含一个refs对象,里面存储着对应的DOM元素或组件的引用,默认情况下,组件的refs指向一个空对象
    2023-03-03

最新评论