vscode 中 格式化 vue 及标签内属性如何不自动换行

平台：windows

vue版本：v1.31.1

一、格式化vue

首先打开vscode的 >文件 > 首选项 >设置

找到vetur 这个选项里面的

vetur.format.defaultFormatter.html 这个选项 将其设置为 js-beautify-html

前提是你必须安装了这个插件

二、设置标签内属性不自动换行

1、找到如图“在settings.json中编辑”

​​​​​​​​​

2、添加如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "workbench.colorTheme": "Visual Studio Light",
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "auto" 
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
      },
}

参考资料：Vetur