/vetur

Vue tooling for VSCode.

Primary LanguageTypeScript

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
  • Linting for 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
  • emmet for html/css/sass/scss/less

Demo

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

Setup

  • Install vetur

  • In your user settings, set

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

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:

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
  • Advanced IntelliSense #26
  • Jump to definition
  • Debugging embedded JS by setting breakpoints directly

Contribution

See CONTRIBUTING.md

Credits

License

MIT © Pine Wu