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 →