Vetur

# Formatting

Vetur has support for formatting embedded html/pug/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, but vetur.useWorkspaceDependencies: true, it'll prefer to use the local version in your project.

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": "prettier", "vetur.format.defaultFormatter.pug": "prettier", "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", "vetur.format.defaultFormatter.sass": "sass-formatter" }

# Settings

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.

# 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.

# prettier (opens new window)

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

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 (opens new window)

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

Global config: Same as prettier global config.

# prettyhtml (opens new window)

🚧 DEPRECATED as no longer in active development (opens new window).

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 (opens new window)

VS Code's js/ts formatter built on TypeScript (opens new window) language service.

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

# js-beautify-html (opens new window)

Alternative html formatter.

Default settings are here (opens new window). 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 (opens new window)

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

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

# sass-formatter (opens new window)

Settings are read from sass.format.*. You can install Sass extension (opens new window) to get IntelliSense for settings, but Vetur will work without it. A useful default:

{ // enables debug mode. "sass.format.debug": false, // removes empty rows. "sass.format.deleteEmptyRows": true, // removes trailing whitespace. "sass.format.deleteWhitespace": true, // Convert scss/css to sass. "sass.format.convert": true, // If true space between the property: value, is always set to 1. "sass.format.setPropertySpace": true }

← IntelliSense →