Could not format html in *.vue file

[zhaozhe0831]

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.

[octref]

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

Are you using another beautify plugin that also have a formatter for vue? Disable that plugin or change its setting so it doesn't work on vue files.

[NaccOll]

@octref I guess that this issue is the same as #192 The issue is that "IntelliSense can't work in a new file" when I submit. But I modify it due to discovery after.

[zhaozhe0831]

@octref In group, I have a file .jsbeautifyrc. Is this ?

{
    "html": {
        "brace_style": "collapse",
        "end_with_newline": true,
        "extra_liners": [
            "head",
            "body",
            "/html"
        ],
        "indent_char": " ",
        "indent_inner_html": true,
        "indent_scripts": "normal",
        "indent_size": 4,
        "max_preserve_newlines": 4,
        "preserve_newlines": true,
        "wrap_attributes": "auto",
        "wrap_attributes_indent_size": 4,
        "wrap_line_length": 80
    },
    "css": {
        "configPath": ""
    },
    "js": {
        "brace_style": "collapse",
        "break_chained_methods": false,
        "end_with_comma": false,
        "end_with_newline": true,
        "eval_code": false,
        "indent_char": " ",
        "indent_level": 0,
        "indent_size": 4,
        "indent_with_tabs": false,
        "jslint_happy": true,
        "keep_array_indentation": false,
        "keep_function_indentation": false,
        "max_preserve_newlines": 4,
        "preserve_newlines": true,
        "space_after_anon_function": true,
        "space_before_conditional": true,
        "space_in_paren": false,
        "unescape_strings": false,
        "wrap_line_length": 100
    },
    "json": {
        "brace_style": "collapse",
        "break_chained_methods": false,
        "end_with_comma": false,
        "end_with_newline": true,
        "eval_code": false,
        "indent_char": " ",
        "indent_level": 0,
        "indent_size": 4,
        "indent_with_tabs": false,
        "jslint_happy": true,
        "keep_array_indentation": false,
        "keep_function_indentation": false,
        "max_preserve_newlines": 4,
        "preserve_newlines": true,
        "space_after_anon_function": true,
        "space_before_conditional": true,
        "space_in_paren": false,
        "unescape_strings": false,
        "wrap_line_length": 100
    }
}

[octref]

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

[zhaozhe0831]

@octref Yes,I used this!

[octref]

Remove the ext from your config, so that plugin won't affect vue files.

 "html": {
            "type": ["html"],
            "ext": ["vue"]
        }

[zhaozhe0831]

@octref In fact, format *.vue used Format Document ? Not used HookyQR.beautify ?

[octref]

It's still using that beautify plugin. Just try disabling it.

[zhaozhe0831]

Disabling it and using(enable?) it? Sorry, I don't understand. How should I understand？ Thank you @octref

[octref]

Did you try removing this part from your config?

"html": {
            "type": ["html"],
            "ext": ["vue"] // Remove this line
}

[zhaozhe0831]

@octref Yes,I removed all.

"beautify.language": {}

Now, Format is correct.

[sant123]

I ended using this:

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

And voila

Cheers.

[sant123]

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

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

[hms181231]

os: macOS High Sierra 10.13.1 vscode: 1.19.3 I can't format html. It's not useful.

[sant123]

But it seems already formatted @Hal-pan. May you try adding a single tab in the first div and repeat the format?

[hms181231]

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  }

But it's not formatted in this format.

[hms181231]

[thearabbit]

I tried

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

[kid1412621]

"js-beautify-html": {
      "wrap_attributes": "force-aligned",
    }