vetur

Vue tooling for VSCode.

This extension is in development and not stable yet.
You can open an issue for bugs or feature requests.

Implemented Features

Basic IntelliSense for html/css/scss/less/js
Advanced IntelliSense to suggest v- directives and key, ref, slot as html attributes
Linting for js via ESLint, basic error checking for css/scss/less
Formatting for html/css/scss/less/js
Syntax highlighting for:
- html/jade/pug
- css/sass/scss/less/stylus/postcss
- js/ts/coffee
Embedded snippet support
- Use vue snippet outside all regions
- Use each language's snippet inside its region
- Define html snippets you want to use inside <template> as vue-html snippet
Emmet for html/css/sass/scss/less

Try for yourself on this file: demo/vetur.vue.

Emmet:

In your user settings, set

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

ESLint for linting <script> section:

Add vue to your eslint.validate setting, for example:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

Stylus:

VSCode < 1.10

In your user settings, set

"files.associations": {
  "*.vue": "vue"
}

octref/vls: vue language server, used to provide advanced IntelliSense, formatting and other language features.