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配置相关推荐

vscode插件及配置
温馨提示:如果懒得看后面的内容,点这个链接也行, 必备插件yyds vscode必备插件基础插件Chinese 中文包open in browser 在浏览器打开Auto Close Tag 自动闭 ...
个人常用VScode插件及其配置
插件名称功能简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹 ...
VScode 插件、配置记录
常用插件: Chinese(Simplified) python TabNine Settings Sync 配置: 外观设置为: Solarized Dark 转载于:https://www.cnb ...
Vue3 vscode开发新extension：使用 volar 代替 vetur
如果使用 VSCode 开发 Vue3 App,可以使用新的插件 volar,代替旧的 vetur. volar 支持: 语法高亮 typescript component auto importin ...
Vue3 （Vscode插件）
前端开发的编辑器有很多种如DW,hubilder,Web Storm,sublime,vscode,等等. Vue3 + vite + Ts + pinia + 实战 + 源码 +全栈_哔哩哔哩_bi ...
vscode使用教程python-VSCode下好用的Python插件及配置_python
这篇文章主要介绍了微软官方的Python插件,已经自带很多功能,下面是插件功能描述,其中部分内容我做了翻译,需要的朋友可以参考下 MS Python插件. 这是微软官方的Python插件,已经自带很多 ...
vscode插件列表及配置信息
这里保存一下vscode的插件和配置信息 {// 以像素为单位控制字号."editor.fontSize": 18,"files.autoSave": &quo ...
notepad json格式化插件_Prettier + ESLint VSCode 插件配置指南
经常在 code review 的时候发现有些同学提交上来的代码格式还存在问题,很影响阅读代码的情绪,究起原因来无非是两种情况:1.git commit 的时候加了 -n 参数,跳过了 eslint ...
vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...