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
IntelliSense such as scaffold, template with pug, style with scss outside all language regions
Some advanced IntelliSense for js/ts, including:
- Some IntelliSense for this in Vue Component
- Module Resolution for node libraries, some Module Resolution for Vue Component
Linting for js via ESLint, basic error checking for css/scss/less
Formatting for html/css/scss/less/js/ts with options
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 project: vue-hackernews-2.0.

Install vetur
If you have a tsconfig.json / jsconfig.json, you must include *.vue files in its include for all language features to work on *.vue files.
- 🚫 include: ['src/**/*.ts']
- ⭐ include: ['src/**/*']
- ⭐ include: ['src/**/*.ts', 'src/**/*.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:

See #188.

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