vscode vue3 使用了 volar后 写dom时会多加一个花括号

最新推荐文章于 2024-07-13 12:06:53 发布
最新推荐文章于 2024-07-13 12:06:53 发布
阅读量2.3k 收藏 17
点赞数 37
分类专栏： vue 文章标签： vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21115567/article/details/126740794
版权
在Vue3开发中，很多开发者选择了Volar插件以替代Vetur。然而，Volar在使用过程中可能会遇到一些问题，如：输入DOM元素时自动换行和输入花括号时自动添加额外的括号。解决方法分别是禁用特定扩展包以阻止换行，以及调整VSCode的自动闭合括号设置。通过这些调整，可以优化Volar的使用体验。
摘要由CSDN通过智能技术生成

vue3出了以后,好多用vscode的人应该下载了volar这个插件,这个插件有好多新特性,特别闪眼,以前的vetur就没有必要留着了,可是当删除了vetur后有些问题,很让人烦恼
1:是一个小问题,就是在输入dom的时候,比如输入 div 编辑器会提示 直接回车 会换行了
由于好多时候一个标签就是一小段文字所以不想换行,如下图

在这里插入图片描述

  我是直接装的volar extension,里面默认装了13个扩展包

在这里插入图片描述

解决方法是: 禁用如下扩展包

在这里插入图片描述

禁用这个扩展包后标签就不会自动换行

2.最烦的就是这个问题了,百度查了好久也没找到相关说明,自己摸索了好久才调好,
就是在dom里输入花括号时,老是自动多加一个,如下图:
在这里插入图片描述
解决方法如下:
设置–>搜索框输入 Closing Brackets --> Auto Closing Brackets --> beforeWhiteSpace如下图
在这里插入图片描述

雨顺518
关注
专栏目录
vscode里的括号颜色_自用VSCode优质插件推荐
weixin_29192211的博客
02-01 1万+
身为MS粉和VSCode粉，在此记录一哈常用的插件以作备忘，顺便安利。1. Settings SyncSetting Sync这个插件能排名第一的原因是，解决了我在VSCode重装和设置同步的问题。它能够利用GitHub Gist作为存储载体，把VSCode的各类.json设置文件上传保存，并能够在不同的设备间同步。具体有系统设置，和主题、插件配置等，不用在各个机器和系统中不停地多次装插件，非常n...
VScode之setting.json文件——vue3插件之Vue Language Features (Volar) & 格式化插件之ESLint
iijik55的博客
03-03 6768
VScode之setting.json文件——vue3插件之Vue Language Features (Volar) & 格式化插件之ESLint vue3插件——Vue Language Features (Volar) 格式化插件——ESLint 设置-打开设置 { "editor.fontSize": 16, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "liveSe
vscode 插件 volar
05-07
vscode 插件 volar
使用vscode保存代码进行vue格式化，会自动补分号和双引号
mia0303的博客
12-19 2025
每个人的 settings.json 配置项可能不一样，现在只需要往json中加入下配置就可格式化vue了 // 分号和双引号不会再自动添加 "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true } }, // 方法括号之间插入空格 "java...
解决无法安装“vue.volar“扩展，跟vscode版本不兼容问题
最新发布
Djj_Alice的博客
07-13 940
打开package.json文件，修改两次VS Code的版本值为：1.72.2。将修改后的package.json文件替换掉.vsix中的package.json文件。4、复制package.json文件，修改vscode版本。4、复制package.json文件，修改vscode版本。5、保存package.json文件，并更新.vsix插件。5、保存package.json文件，并更新.vsix插件。6、打开VSCode，安装.vsix插件。6、打开VSCode，安装.vsix插件。
VScode在DOM中打入花括号会出现{ }}三个标签的错误
山前放sai崖滋的博客
10-02 3045
VScode在DOM中打入花括号会出现“ { }}”怎么办？
ideanew对象后自动补全_解决使用vscode进行latex编辑自动补全多一个括号
weixin_39574140的博客
11-25 443
我在使用vscode的latex插件写代码时，对环境的自动补全出了点如题的小问题，一直忍着没查，今天忍不住了，去看了看latex workshop的插件使用说明才发现原因是因为我弱智。该说明介绍了这个插件的三种补全环境类标签的方法，第一个是snippet，我不怎么用。主要说下后两个，它们就解决了我遇到的小问题。先展示下我的问题，就是在输入begin{}后，在括号中输入某环境的前三个字符比如equt...
vscode下vue3项目配置eslint+prettier
qq_40712430的博客
10-10 1252
vue3项目配置eslint+prettier
2024年VSCode中书写Vue无代码提示，如何解决？_vscode vue代码提示，html5前端开发培训机构
2401_84446513的博客
05-04 1639
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
VScode vue初学者几个必须使用的插件
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-03 1128
为了提高开发效率 1.VUE 这个是让你的VUE代码有颜色区分，不然什么颜色都没有 2.Vetur 这个就是你按 ctrl+/ 键注释用的，如果没有它，你在html或者style处按都是出//（这个只能注释script），安装它你就可以注释html是<-->,注释style是/**/ 3. Path Autocomplete 只要你输入：“../”就会弹出提示供你选择 4.Bracket Pair Colorizer 就是括号上下门对应，很方便...
Volar ——Vue3 完美的配套工具
热门推荐
我是张跑跑
09-18 3万+
Volar ——Vue3 完美的配套工具 vue3+ts+volar=正香
解决Vue大括号字符换行踩的坑
01-18
最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。 在HTML中可以通过<br>标签换行，也可以通过\n转义字符换行 在Vue中用大括号显示的变量，加<br>会直接被当成字符串显示出来，加\n显示一个空格，加\r\n显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br>后一部分' } } 在元素上显示name值 <p v-html=”name”></p> 补充知识：使用v-html解决Vue.js渲染过程
【必备】用VSCode开发Vue程序必备插件之一Vue Language Features (Volar)
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-07 5675
会将同一个节点里面的不同属性换行排列对齐，这样看起来更加清晰，尤其是一个节点绑定十几个属性、事件的时候，这样的排列方式更有效、快捷进行修改、删除。Vue Language Features 是为 Vue、Vitepress 和 petite-vue 构建的语言支持扩展。在 tsconfig.json 文件中，您需要确保 TypeScript 包含您的自定义扩展。最后，您需要让 VS Code 识别您的新扩展并自动将其与 Vue 语言格式关联。扩展支持 Vue，因此您可以根据需要自行安装这些扩展。
Vue官网学习（模板语法：一、{{}}双大括号语法）
CoderOu
06-23 1万+
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 这是官网对模板的介绍，今天就来学习一下Vue的模板语法： 1、文本“Mustache”语法 (双大括号) <span>Messa.
Vue3语法插件Volar在vsCode中搜不到，Volar正式更名为Vue-Official
weixin_40874076的博客
05-10 1831
如果之前装过Volar插件的，其实不用担心，因为更名后的Vue-Official，它会自动给你将之前的覆盖掉，简而言之，壳子还是之前的壳子，更名后Vue-Official比之前的Volar升级了不少东西，例如某些新语法特性，之前的插件会报错，而更新后的插件不会了。按住鼠标左键，把组件拖拽到想要引入的地方，VSCode 会提示按住 shift 放入编辑器中，我们按 shift ，鼠标移动到我们想到放置组件的位后，并放开鼠标左键，即可自动导入组件。同理，要是工作区V2的，最好也禁用Vue-Official。
ts + Vue3.0 + setup + volar的使用方法
xiuxiuxiu555的博客
03-21 1298
TypeScript 如今越来越多的大型项目和团队选择了 TypeScript 作为主力开发语言，GitHub 发布 2018 编程语言 TOP10 中，TypeScript 在开源贡献者使用最多的语言中排名跃居第七。除此之外，在前端开发群体中最受欢迎的编辑器之一 VS Code 就是基于 TypeScript 开发，三大框架之一的 Angular、著名后端框架 NestJS、机器学习框架 tfjs 都是基于 TypeScript 开发。 我们可以想象 Vue3.0 正式发布之后整个大型项目的生态会继续
vue3 vscode插件volar配置
个人博客
08-02 2万+
简单配置
vue: vscode安装扩展Volar失败(保姆级教程+图文结合）
m0_68467925的博客
04-23 4170
vue: vscode安装扩展Volar失败(版本不兼容）；vscode插件离线下载vsix文件；未在zip中找到扩展名/package.json
vscode安装vue3插件 volar
05-23
您可以按照以下步骤安装 Volar 插件： 1. 打开 Visual Studio Code。 2. 在左侧菜单栏中选择扩展。 3. 在搜索栏中输入 "Volar"。 4. 选择 "Volar (Preview)" 并点击 "安装"。 5. 安装完成后，重新启动 Visual Studio Code。 安装完成后，您就可以在 Vue 3 项目中使用 Volar 插件了。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨顺518

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值