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

Formatters

These formatters are available:

Vetur bundles all the above formatters. When Vetur observes a local install of the formattesr, 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"
}

Settings

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.

prettier

Opinionated formatter. Settings are read from .prettierrc at project root. See format at https://prettier.io/docs/en/configuration.html.

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

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

Global config: Same as prettier global config.

prettyhtml

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.

vscode-typescript

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

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

js-beautify-html

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
  }
}

stylus-supremacy

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
}