vsCode编辑vue文件内标签属性换行的问题

前情提要
- 问题：
- 诉求：
一、设置js-beautify-html
二、编辑“Vetur的setting.json”
三、setting.json的内容贴出来，方便大家复制

前情提要

问题：

大家一定遇到vsCode里编辑Vue文件的时候，默认的Vetur插件会把文件格式的太长太长了，甚至每个属性都换一行，导致上下来回翻找代码太麻烦了。

诉求：

我不要这样痛苦，哪怕很长不换行也行。我就喜欢标签内写一堆的低效方式，紧凑就行，哈哈。

一、设置js-beautify-html

打开设置
扩展
Vetur
多滚几行，在"Format>Default Formatter:HTML"这里，下拉选择js-beautify-html

二、编辑“Vetur的setting.json”

继续下滚刚才设置了js-beautufy-html的区域，因为这里还是Vetur的设置地界
看到“Format:Default Formatter Options”下有“在settings.json中编辑”，点进去
修改三处，“editor.wordWarp”设置成"off"的好处是，你会发现vue其实有两部分组成，一部分是vue的，一部分是我们写的html，如果不改这里，你会发现只有vue的不换行，但是html部分还是在换
warp_attributes改为"aligned-multiple"，我看其他人改的auto，哈哈，大家随性试一下，我用的前一个

三、setting.json的内容贴出来，方便大家复制

怎么样，我不错吧，哈哈，因为前面是图片，方便圈出来，这里方便大家复制。说实话，Vuter的换行弄的每次上下翻找代码太长了。

{"editor.wordWrap": "off","vetur.format.defaultFormatter.scss": "none","vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "aligned-multiple"},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}}
}

vsCode编辑vue文件内标签属性换行的问题相关推荐

vscode Vue格式化HTML标签属性换行
打开vscode设置,在上方输入框搜索settings,进入到settings.json文件.添加以下属性: 注: // - auto: 仅在超出行长度时才对属性进行换行.// - force: 对除 ...
vscode html 属性换行,vscode中格式化css代码标签属性不换行
vscode中格式化css代码标签属性不换行,如下图,教程,后将,解决方法,首选 vscode中格式化css代码标签属性不换行易采站长站,站长之家为您整理了vscode中格式化css代码标签属性不换 ...
如何优雅地使用 VSCode 来编辑 vue 文件？
最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题. 后来,果断放弃收费的 PHPStorm ,改用 vscode (Visual Stdio Co ...
vscode格式化代码使html标签不换行
1.打开Vscode,点击文件 ->首选项 ->设置->搜索vetur -> 在setting.json中编辑->输入以下代码(注意是json形式的,如果setting. ...
vscode打开.vue文件时报错误，插件vetur的问题
在vscode中编辑 .vue文件的时候, <template> xxx </template> <script> xxx </script> < ...
解决vscode格式化vue文件出现的问题
解决vscode格式化vue文件出现的问题参考文章: (1)解决vscode格式化vue文件出现的问题 (2)https://www.cnblogs.com/weiqinl/p/8871826.ht ...
idea中编辑*.vue文件没有任何提示
idea开发java程序使用频次较高,开发前端项目貌似较少,至少我们公司前端开发使用的是vs,如下图,编辑vue文件时,没有任何提示,代码也是清一色的,不太友好.如何在idea中安装vue相关插件呢? ...
Vue文件内动态加载JS
Vue文件内动态加载JS let jsUrl = 'https://code.jquery.com/jquery-3.4.1.min.js' // JS地址 let jqueryJs = decode ...
使用vscode编辑vue模板
在用vscode做vue项目时,每次新建vue页面都需要自己写各种方法,比较麻烦,其实可以写片段模板,每次新建vue页面后输入关键字就可以出现模板. 在文件 -> 首选项 -> vue.j ...

vsCode编辑vue文件内标签属性换行的问题

vsCode编辑vue文件内标签属性换行的问题

前情提要

问题：

诉求：

一、设置js-beautify-html

二、编辑“Vetur的setting.json”

三、setting.json的内容贴出来，方便大家复制

vsCode编辑vue文件内标签属性换行的问题相关推荐

最新文章

热门文章