The current CompletionProvider based VSCode's html extension needs improvement.
This is to write a new CompletionProvider to satisfy the following goals:

• Scope based IntelliSense:
  Region-based IS is already there (css using css IS, js using js IS). Scope not yet. For example:
  <span v-text="|"></span> here it should suggest all possible values (props, computed props) for the current component.
• Correct import / export
  • Importing js libs like lodash should add those methods to js region IS.
  • Importing vue files should add component to template, like FooBar.vue -> <foo-bar>.
• Use SnippetString in CompletionItem to provide Vue API
  • https://github.com/Microsoft/vscode/blob/master/src/vs/editor/contrib/snippet/common/snippet.md
  • For both template region (directives) and js region.
  • Possibly also add vuex / vue-router API

Things need to look into:

• Limitations of SnippetString for IS
• vscode-textmate for getting scope info
• How to utilize salsa

While doing it, maybe also add a custom Diagnostics that shows error, such as v-if using non-existing prop.

allow the use of <template lang="pug"> too

pugjs/pug#2184

https://code.visualstudio.com/updates#_javascript-language-support-in-html

Vscode gets full JavaScript language support in HTML files. So this feature may help

Its syntax is much easier for editing and reading.

I used ctrl+/ want to annotation that is wrong for template and I key like col-md-3 when key - intellisense hide and scss is the same.
can you fix that.
thank you.

Can you please use html syntactic annotation in the Vue <template> tag?
Now we used ctrl+/ in Vue <template> tag it show "//".

the text will be blood red.

The new grammar doesn't handle a few cases for SFC yet.

https://vue-loader.vuejs.org/en/start/spec.html

Especially important are scoped/module style block, src import, postcss, and comment.

I want to support typescript

I'm using VS Code built in Handlebars association for .vue files. It's working pretty well (Intellisense and autocomplete included), but comments. I guess would be much simpler use this as a starter point.

如标题所说，之前版本是好着的，更新到0.3.3版本后<style scoped><style>这种带有scoped标识的样式高亮失效。

This plugin is the best in the vue plugin.
Whether emmet can support css/sass/scss/less/stylus.

Low hanging fruit.

<template>

</template>

<script>
  // content
</script>

<style lang="scss">
  @import '~styles/main.scss';

  section[role='alert'] {
  @extend .alert;
    @extend .alert-dismissible;
    border-radius: 0;
    margin-bottom: 0;
    background: darken(white, 2);
    border: 0;
    z-index: 1;

    > div {
      @extend .container;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: stretch;
      align-items: flex-start;

      div {
        order: 0;
        flex: 1 1 auto;
        align-self: auto;
      }
    }

    P:last-of-type {
      @extend .mb-0;
    }
  }
</style>

Format it with shortcut shift+alt+f, scss are not formatted

I've created my own snippet for Vue files, but using this plugin it doesn't load any suggestion. For example, adding this snippet configuration:

    "Vue Template": {
        "prefix": "full",
        "body": [
            "<template>\n",
            "</template>\n",
            "<script>",
            "export default {\n\tname: \"$TM_FILENAME\"\n}",
            "</script>\n",
            "<style lang=\"scss\">\n",
            "</style>"
        ],
        "description": "Vue Template"
    }

Indeed, it doesn't show any snippet at all. Only when I manually add the <template>, <script> or <style> tags.

Is it possible to add syntax highlighting support to template literals when not using .vue files.

{
    template: `
    <div :class="['loading', {'loading-dark': dark, 'loading-small': small}]">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>
    `,
    props: {
        dark: {
            type: Boolean,
            default: false
        },
        small: {
            type: Boolean,
            default: false
        }
    }
};

• Use https://github.com/Microsoft/vscode-languageserver-node-example as a base
• Update deps to use TS^2.0.3
• Move /extensions/html to node example

in .scss file:

in .vue file:

I've noticed that the syntax highlighter doesn't support cascading <template> tags. If I try to do this inside of a component the highlighting breaks.

http://vuejs.org/v2/guide/list.html#Template-v-for

I hope can get typings like @types/jquery in the vue file.I can get this feature in the js file.but I can't trigger intellisense in the vue file.Will you support this?thank you and best regard

In template tag, Emmet syntax is not available.sucks！

is there a way , i can use emmet css and emmet html
hand in hand in vue files

if i enable it...
if i try to use emmet for html
i cant get it to work

"emmet.syntaxProfiles": {
        "blade": "html",
        // Activate this if you will Heavily Style
        "vue": "css"
    },

doing something like this
pb!

padding-bottom:  !important;

when i do div.row

display: .row;

so is there a way i can use both emmet css and html
without having conflict?

lets say make the scope only apply to style tag for css
and template tag for html?

VSCode's html does have this capability, like marking errors for CSS in <style>.
Look into how to restore that and extend to SCSS/LESS regions.

In the above screenshot, the syntax highlighting is broken after the <Thing> typecasting

My machine
OS: macOS
VScode: 1.8.1

not highlight after meet template tag which are not the right template tag.

Using vetur 0.3.1

Nesting works on everything but a few elements. div is expected to be pink - like it's parent, but is displayed with no styling.

I no longer get autocompletions of tags in vue-html language mode.
Easy test case: type in <ul></ it won't show the auto-close for the ul anymore.
Emmet seems to no longer work either. Typing div.test and pressing tab just inserts a tab.

I want syntax hightlight without no lang set. I just use cssnext for nest selectors.

lang="less"

hightlight ok.

no lang set

error hightlight

How can I get code IntelliSense for typescript in vue file?

Configured according to the readme, can work normally, but properly formatted HTML code

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

If not configured above this option, the formatting is normal, but at the same time the CSS properties completely won't appear smart tips

Hi,

Please add the following to the readme, as it affects users installing this extension who also uses ESLint.

After installing vetur, your .vue files will be mapped to 'vue' type in VSCode, which will break the eslint validation that you may already have for HTML files.

To fix that, add "vue" to the list of types to validate in your settings.json file:

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

Thanks

This should be provided by another extension.

VSCode: 1.9.1
vetur: 0.3.2

Was just messing around with a test project and discovered that SASS is being highlighted with the CSS grammar instead of SASS - even though the correct grammar is defined

<style lang="sass">
  #app
    width: 100vw
    text-align: center
</style>

I.e this works when it shouldn't:

The highlighting doesn't work for SCSS for the following sample:

<style lang="scss">
  @import "scss/bootstrap/mixins/_buttons.scss";
  $brand-primary: #3c763d !default;
  $btn-primary-color: #fff !default;
  $btn-primary-bg: $brand-primary !default;
  $btn-primary-border: darken($btn-primary-bg, 5%) !default;
  .btn-primary {
    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  }
</style>

All shows formatted when in a .scss file

I noticed that in HTML, vetur provides nice Javascript syntax highlighting inside Vue directives and inside {{ }}, etc. in the template. Is there any way to make that also work when using Jade/Pug?

I have .html files set up to use the vue-html language by default. I have my templates in separate .html files. Up until the latest version it worked great. For some reason with latest version (0.3.5) it's not showing any highlighting anymore. I don't have any template tags or anything around the content since it's just straight up .html files.

Seems ternary operator in vue-directive works with latest insider.

Visual Studio Code version - 1.8.1
Platform - Windows 8
Vetur version - 0.2.0
Pug beautify version - 1.0.2

Format document option works fine for plain HTML but if I am trying to use lang="pug" for template, it garbles the template.

Before:

<template lang="pug">
    .hello
        h1 {{ msg }}
        h2 Essential Links
        ul
            li: a(href='https://vuejs.org', target='_blank') Core Docs
            li: a(href='https://forum.vuejs.org', target='_blank') Forum
            li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat
            li: a(href='https://twitter.com/vuejs', target='_blank') Twitter
            br
            li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
        h2 Ecosystem
        ul
            li: a(href='http://router.vuejs.org/', target='_blank') vue-router
            li: a(href='http://vuex.vuejs.org/', target='_blank') vuex
            li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
            li: a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
</template>

After:

<template lang="pug">
    .hello h1 {{ msg }} h2 Essential Links ul li: a(href='https://vuejs.org', target='_blank') Core Docs li: a(href='https://forum.vuejs.org',
    target='_blank') Forum li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat li: a(href='https://twitter.com/vuejs',
    target='_blank') Twitter br li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
    h2 Ecosystem ul li: a(href='http://router.vuejs.org/', target='_blank') vue-router li: a(href='http://vuex.vuejs.org/',
    target='_blank') vuex li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader li: a(href='https://github.com/vuejs/awesome-vue',
    target='_blank') awesome-vue
</template>

I have installed pugbeautify but am not able to figure out how to delegate the document format to pugbeautify from .vue files.

Or look into just using VSCode's html.

Is there a way to get a autocomplete html attributes, css/stylus attributes, js?

Hi,

I notice that word based suggestion not enable in .vue file. Really hope it can be done by you as your work is really awesome!

<template>
	<element :statechanged="(a == b) ? x : y"></element>
	<span :class="{'thing': true}"></span>
</template>

produces this output

Removing the ? from the expression immediately fixes the highlighting after it.

lang="jade' is still valid in the current vue.yaml grammar.

@stealthybox if you still want to give it a try.

Disabled vue-snippets，by HTML：

Enabled vue-snippets，by HTML:

Enabled vue-snippets，by Vue：

• https://vuejs.org/v2/api/ https://vuejs.org/v2/api/#Directives
• Look for a way to enable snippets only on certain scope