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 (Only for self-defined snippet. Extension-contributed snippet only works in insiders now, but will be available in March release)
  • Define html snippets you want to use inside <template> as vue-html snippet
• Emmet for html/css/sass/scss/less

Demo

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

Setup

• Install vetur

Optional Setup

Emmet:

• In your user settings, set

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

ESLint for linting <script> section:

• Install ESLint extension

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

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

Stylus:

• Install Stylus extension for Stylus support

VSCode < 1.10

• In your user settings, set

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

Roadmap

• Build a language server
• IntelliSense for css/scss
• Basic IntelliSense for js/es6 in <script>
• Error checking for css/scss/less
• Snippet for embedded languages
• Embedded formatter for html/css/scss/less/js
• Advanced IntelliSense (In progress, see #26)
• Jump to definition
• Debugging embedded JS by setting breakpoints directly

Related

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

Contribution

See CONTRIBUTING.md

Credits

• Logo from vuejs/vuejs.org
• Grammar based on vuejs/vue-syntax-highlight
• Sass grammar based on P233/Syntax-highlighting-for-Sass
• PostCSS grammar based on azat-io/atom-language-postcss
• Language Server based on VSCode's html extension

License

MIT © Pine Wu