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 the Format Document command is available.
The Format Selection command does not work.


These formatters are available:

Vetur bundles all the above formatters. When Vetur observes a local install of the formatter, it'll prefer to use the local version.

You can 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": "prettyhtml",
  "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"


A global switch vetur.format.enable toggles Vetur formatter on and off. This is useful if you want to let Prettier handle *.vue file formatting completely.

  • The benefits of using Prettier: CLI support, one single formatter.
  • The downsides: No Stylus support, can't use js-beautify, prettyhtml or TypeScript formatter, no options for indenting script/style blocks yet.

Vetur Formatter Config

These two settings are inherited by all formatters:

  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false

However, when a local config (such as .prettierrc) is found, Vetur will prefer it. For example:

  • .prettierrc is present but does not set tabWidth explicitly: Vetur uses vetur.format.options.tabSize as the tabWidth for prettier.
  • .prettierrc is present and sets tabWidth explicitly: Vetur ignores vetur.format.options.tabSize, always using the value in .prettierrc.

useTabs works the same way.


Opinionated formatter. Settings are read from .prettierrc at project root. See format at

If you want to set global prettier setting, either:

  • Make a .prettierrc config at your home directory

  • Use the below config and do NOT include a .prettierrc in your home directory

    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        // Prettier option here
        "semi": false


Prettier + eslint --fix. Settings are read from .prettierrc and .eslintrc at project root.

Global config: Same as prettier global config.


The default formatter for Vue templates.

Other settings include:

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

prettier options are read from local .prettierrc config.


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

Settings are read from javascript.format.* and typescript.format.*.


Alternative html formatter.

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


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