vscode下编辑vue文件属性不换行配置,有需要的直接复制用!

哎!难受!我搞不懂为什么 vscode 默认 html 的 dom 属性是换行的,不知道这个默认值的设计是怎么想的。难道是我太郊区了吗?算了算了,反正可以改配置,记录一下!我是受不了属性换行的这种格式化写法,难受得到一批!

修正后格式化效果

2021-10-24 23-06-42屏幕截图.png

参考配置

需要你已经安装了 vetur 插件,基本现在拿 vscode 搞 vue 全家桶的没又不装这个的,应该都知道是啥,我就不配图了!

如下配置是 不换行+tab4 个空格,我个人不太喜欢 2 个空格(默认),太少了!

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 999,
            "wrap_attributes": "auto",
            "end_with_newline": false
        }
    },
    "vetur.format.options.tabSize": 4
}

补充资料

如果你平时还有使用 vscode 写传统 html 的习惯,也想保持普通 html 的 dom 属性不换行,那么可以装一个 `

2021-10-24 23-20-15屏幕截图.png

并复制如下配置即可保证 html dom 属性不换行,且 html/css/js/json 等常见格式格式化后缩进是 4 个字符!

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.printWidth": 999,
    "prettier.tabWidth": 4,
    "prettier.proseWrap": "never",
    "prettier.trailingComma": "none",
    "editor.quickSuggestions": {
        "strings": true
    }
}