Vue tooling for VSCode.
This extension is in development and not stable yet.
You can open an issue for bugs or feature requests.
- Basic IntelliSense for
html/css/scss/less/js
- Advanced IntelliSense to suggest
v-
directives andkey
,ref
,slot
ashtml
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
- Some IntelliSense for
- Linting for
js
via ESLint, basic error checking forcss/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>
asvue-html
snippet
- Use
- 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 itsinclude
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:
-
Install ESLint extension
-
Add
vue
to youreslint.validate
setting, for example:"eslint.validate": [ "javascript", "javascriptreact", "vue" ]
Stylus:
- Install Stylus extension for Stylus support
See #188.
- octref/vls: vue language server, used to provide advanced IntelliSense, formatting and other language features.
See CONTRIBUTING.md
- Logo from vuejs/vuejs.org
- Grammar based on vuejs/vue-syntax-highlight
- Sass grammar based on robinbentley/vscode-sass-indented
- PostCSS grammar based on azat-io/atom-language-postcss
- Language Server based on VSCode's html extension
MIT © Pine Wu