vetur: Could not format html in *.vue file

os: macOS Sierra 10.12.4 vscode: 1.12.1 I can’t format html. It’s not useful. I try Beautify or Format Document(vscode),but them not useful.

It’s my config.

// Place your settings in this file to overwrite the default settings
{
    "editor.fontSize": 16,

    "files.autoSave": "off",

    "sync.gist": "9c72ad2cf011da24f97230dab662ae97",
    "sync.lastUpload": "2017-03-02T10:27:36.283Z",
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.lastDownload": "",
    "sync.forceDownload": false,
    "sync.anonymousGist": false,

    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 50,

    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "vue"
    ],

    "csscomb.formatOnSave": true,

    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },

    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": {
            "type": ["html"],
            "ext": ["vue"]
        }
    },

    "vsicons.projectDetection.autoReload": true,
    "workbench.iconTheme": "vscode-icons",

    "todohighlight.include": "{**/*.js,**/*.html,**/*.php,**/*.css,**/*.scss}",
    "todohighlight.exclude": "{node_modules,bower_components,dist,**/*.min.*,**/*.map}",
    "sync.host": "",
    "sync.pathPrefix": "",
    "window.zoomLevel": -1,

    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,

    "vetur.format.html.wrap_attributes": "force-aligned",

    "terminal.external.osxExec": "iTerm.app",
    "workbench.colorTheme": "Kimbie Dark"
}

What is correct options? I lost something?

In fact, Maybe, after updated vscode to 1.12.1, the problem is appearing. And I am not good at English.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (5 by maintainers)

Most upvoted comments

However, I just found a better approach, in .vscode/settings.json add this:

{
  "vetur.format.defaultFormatter.html": "js-beautify-html"
}

+25

sant123 on Nov 22, 2017

I tried

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline"
        }
    },

thearabbit on Feb 12, 2018

Do you have this plugin installed? https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

octref on May 11, 2017