vscode使用vetur格式化代码_octref.vetur

向settings.json中添加如下代码

{
    "files.autoSave": "onFocusChange",
    "editor.formatOnSave": true,
    "[jsonc]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "[javascript]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned",
        "js-beautify-html": {
            // - auto: 仅在超出行长度时才对属性进行换行
            // - force: 对除第一个属性外的其他每个属性进行换行。
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
            // - force-expand-multiline: 对每个属性进行换行。
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
            "wrap_attributes": "auto",
            // #vue组件中html代码格式化样式,可选
            "wrap_line_length": 120,
            "end_with_newline": false,
            "semi": true,
            "singleQuote": false
        },
        "prettier": {
            //设置分号
            "semi": false,
            //双引号变成单引号
            "singleQuote": true,
            //禁止随时添加逗号,这个很重要。找了好久
            //   "trailingComma": "none"
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38