Vetur: HTML Formatting Stopped Working after 0.11.6 automatic update

[sebastianmacias]

• [*] I have searched through existing issues
• [*] I have read through docs
• [*] I have read FAQ

Info

• Platform: Ubuntu 16.04
• Vetur version: 0.11.6
• VS Code version: 1.19.2

Problem

HTML automatic formatting stopped after 0.11.6 update. Please see the following screencast:

https://drive.google.com/file/d/1SAkOzrF59lHhUdxW9RnP2Au04X6ECVoe/view

All vetur settings are default with the exception of

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
            "wrap_attributes": "force-aligned"
    }
  },
"prettier.disableLanguages": [ "vue" ],

Thanks

[sebastianmacias]

No issues reported by the Vue Language Server

[sebastianmacias]

These are my complete user settings:

{
  "editor.fontFamily": "Fira Code",
  "editor.fontSize": 16,
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": true,
  "window.zoomLevel": 1,
  "files.exclude": {
    "**/*.pyc": true
  },
  "sync.gist": "76e939e557d783677e4ec333b38e2c5e",
  "sync.lastUpload": "2018-01-04T02:08:52.558Z",
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.lastDownload": "",
  "sync.forceDownload": false,
  "sync.anonymousGist": false,
  "sync.host": "",
  "sync.pathPrefix": "",
  "sync.quietSync": false,
  "workbench.colorTheme": "Dracula",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "eslint.autoFixOnSave": true,
  "tslint.autoFixOnSave": true,
  "workbench.iconTheme": "material-icon-theme",
  "git.enableSmartCommit": true,
  "sync.askGistName": false,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "git.confirmSync": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.tabSize": 2,
  "eslint.enable": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.disableLanguages": [
    "vue"
  ],
  "extensions.ignoreRecommendations": false,
  "codemetrics.basics.ComplexityLevelNormal": 10,
  "codemetrics.basics.ComplexityLevelHigh": 20,
  "codemetrics.basics.ComplexityLevelExtreme": 50,
  "pomodoro.workTime": 9,
  "pomodoro.pauseTime": 1,
  "bookmarks.saveBookmarksInProject": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline",
      "end_with_newline": false
    }
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "explorer.confirmDelete": false,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressUpdateNotice": false,
    "suppressWelcomeNotice": true
  },
  "git.autofetch": true,
  "eslint.options": {
    "plugins": [
      "html",
      "vue"
    ]
  },
  "html.format.wrapAttributes": "force"
}
`

@NickeyLin reported a similar issue #651 however in my case I have

  "prettier.disableLanguages": [
    "vue"
  ],

and still doesn't work

[sebastianmacias]

I was finally able to get this to work after adding a .prettierrc.json file with:

{
  "prettier.disableLanguages": [
    "vue"
  ]
}

in addition to have the same in my user settings. I kind of feel html formatting shouldn't require so much configuration and should be enabled by default as soon a vetur has been installed.

[octref]

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#formatting-doesnt-work-in-template-section

This is a problem of vscode-prettier, not Vetur.

[alonesuperman]

@sebastianmacias
which path did you put your .prettierrc.json
in workspace or in the install place of vscode

[NickeyLin]

@octref It used to work fine until it updated to 0.11.6, it seems to be broken. But after adding "prettier.disableLanguages": [ "vue" ] to user settings then restart vscode, it works again.

[sebastianmacias]

@alonesuperman in the root, right where package.json is placed

[timster]

@NickeyLin I can't thank you enough for figuring that out.

Strangely enough, it also fixed formatting using prettier.eslintIntegration. Previously it wasn't using my eslint settings, but after adding "prettier.disableLanguages": [ "vue" ] HTML formatting works and prettier eslint integration works.