Formatting

Vetur has support for formatting embedded html/css/scss/less/postcss/stylus/js/ts.

Vetur only has a "whole document formatter" and cannot format arbitrary ranges.
As a result, only Format Document command will be available.
Format Selection command wouldn't work, and there is no

Formatters

These formatters are available:

Choose each language's default formatter in VS Code config, vetur.format.defaultFormatter. Setting a language's formatter to none disables formatter for that language.

Current default:

{
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}

prettier

Settings precedence:

  1. .prettierrc at project root. See format at https://prettier.io/docs/en/configuration.html
  2. prettier.*. You can install Prettier extension to get IntelliSense for settings, but Vetur will work without it.

ESLint integration: "prettier.eslintIntegration": true. Settings are read from .eslintrc.

prettyhtml

This will likely become the default html formatter soon.

https://github.com/Prettyhtml/prettyhtml

tabWidth and useTabs are read from editor.tabSize and editor.insertSpaces.

Other settings include:

"vetur.format.defaultFormatterOptions": {
  "prettyhtml": {
    "printWidth": 100, // No line exceeds 100 characters
    "singleQuote": false // Prefer double quotes over single quotes
  }
}

vscode-typescript

VS Code's js/ts formatter built on TypeScript language service.

tabSize and insertSpaces are read from editor.tabSize and editor.insertSpaces.

Other settings are read from javascript.format.* and typescript.format.*.

js-beautify-html [deprecated]

Alternative html formatter. Deprecated and turned off by default. Use at your own risk.

tabSize and insertSpaces are read from editor.tabSize and editor.insertSpaces.

Default settings are here. You can override them by setting vetur.format.defaultFormatterOptions.js-beautify-html.

"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    // js-beautify-html settings here
  }
}

stylus-supremacy

tabSize and insertSpaces are read from editor.tabSize and editor.insertSpaces.

Other settings are read from stylusSupremacy.*. You can install Stylus Supremacy extension to get IntelliSense for settings, but Vetur will work without it. A useful default:

{
  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false
}