vs code 設置.vue文件格式化setting.json配置

1、在vscode中，拷貝某個組件時，屬性自動換行，導致一個文件千百行 ，代碼看着很凌亂，如下：

解決方法：

1.vs 安裝 vetur插件；

2.vetur->format->default formatter:html，這項將格式化模板選擇為：js-beautify-html

3.設置好以后，往下滑找到Format:Default Formatter Option,在settings.json中，將以下代碼放到settings.json中

代碼如下：

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "explorer.confirmDelete": false,
    "vetur.format.options.tabSize": 4,   // 每個縮進級別的空格數，由所有格式化程序繼承
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
             // - auto: 僅在超出行長度時才對屬性進行換行
             // - force: 對除第一個屬性外的其他每個屬性進行換行
             // - force-aligned: 對除第一個屬性外的其他每個屬性進行換行，並保持對齊
             // - force-expand-multiline: 對每個屬性進行換行
             // - aligned-multiple: 當超出折行長度時，將屬性進行垂直對齊
             // - force-expand-multiline：屬性折行對齊方式
            "wrap_attributes": "auto",
            "wrap_line_length": 1200, // 設置一行多少字符換行
            "semi": false, // 是否在每行末尾添加分號
            "singleQuote": true, // 使用單引號
        },
    },
    // 補充：script標簽內 js 代碼保存自動換行的問題
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.scriptInitialIndent": true,   // js部分是否有初始縮進
    "vetur.format.styleInitialIndent": true,    // style部分是否有初始縮進
} 

效果展示：