解决在写Vue时，格式化代码属性自动换行的问题

1、直入主题

修改 “wrap_attributes”: “force-expand-multiline"为"wrap_attributes”: “aligned-multiple”
添加 “vetur.format.defaultFormatter.html”: “js-beautify-html”,

2、具体操作

先描述一下我VSCODE的插件的情况，一个Vetur ,vue-beautify
打开设置搜索 vetur.format.defaultFormatterOptions > 点击在settings.json中编辑

直接上图看下我修改后的

3、原理

1.关于vetur.format.defaultFormatter.html
这是因为在VSCode1.7.2中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中，配置如下规则

{
“prettier.singleQuote”: true,
“prettier.semi”: false,
“vetur.format.defaultFormatter.html”: “js-beautify-html”,
“vetur.format.defaultFormatterOptions”: {
“wrap_attributes”: “force-aligned”
}
}
详情见 vuejs/vetur#476

复制代码
2. 关于vetur.format.defaultFormatterOptions
// 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。

“vetur.format.defaultFormatterOptions”: {
“js-beautify-html”: {
“wrap_attributes”: “auto”,
}
},
复制代码

4、如果大家有更好的方式可以留言交流~蟹蟹

Vue格式化，设置不换行相关推荐

Eclipse 默认设置的换行长度
eclipse 默认设置的换行长度, 格式化代码后,经常换行,非常难看. 1.Java代码打开Eclipse的Window菜单,然后 Preferences->Java->Code St ...
vue格式化数字为财务数字金额
vue格式化数字为财务数字金额效果 1.在项目的src文件夹下新建filters文件夹,里面新建filters.js文件 2.在filters.js添加如下代码(下面介绍4种实现方式,推荐使用方法三 ...
html页面左对齐不换行,css如何设置不换行？
在HTML网页中文章标题列表通常要使用H标签样式,使用此样式后文本就会自动换行,但是我们通常不想换行,那么我们该如何使用css设置不换行呢?下面我们来看一下css设置不换行的方法. 我们可以通过为元素 ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
vue :style 设置背景图片 backgroundImage
vue 日常坑 vue :style 设置动态设背景图片 backgroundImage 控制台会报错 404错误,但是不影响页面使用如下: http://localhost:8080/ooooo/ ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
Vue组件设置缓存kepp-alive 后如何获取数据
Vue组件设置缓存kepp-alive 后如何获取数据解决方案 : beforeRouteEnter activated beforeRouteEnter 每次进去组件渲染时,都会执行beforeR ...
【vue】设置网页的标题和图标
[vue]设置网页在浏览器上打开时的标题和图标设置步骤: 在根目录下找到并打开index.html文件: 设置的图标需要存放在static文件夹下(亲测存放在该文件夹下浏览器才能读取到): 在ind ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...

Vue格式化，设置不换行

解决在写Vue时，格式化代码属性自动换行的问题

1、直入主题

2、具体操作

3、原理

4、如果大家有更好的方式可以留言交流~蟹蟹

Vue格式化，设置不换行相关推荐

最新文章

热门文章

Vue格式化，设置不换行

解决在写Vue时，格式化代码 属性自动换行的问题

1、直入主题

2、具体操作

3、原理

4、如果大家有更好的方式可以留言交流~蟹蟹

Vue格式化，设置不换行相关推荐

最新文章

热门文章

解决在写Vue时，格式化代码属性自动换行的问题