Vetur: Problem with emmet and the template tag in VSCode 1.9.1

Created on 22 Feb 2017  路  1Comment  路  Source: vuejs/vetur

OS: OS X 10.11.6
VSCode: 1.9.1
vetur: 0.3.6

Installed Extensions:

  • Code Runner
  • One Monokai Theme
  • vetur
  • vscode-icons

Procedures to re-produce the issue:

  1. Disable all other extensions
  2. Insert files.associations and emmet.syntaxProfiles settings provided in vetur's README
  3. Create a test.vue file
  4. Go to test.vue's tab, type template and hit the Tab key, some spaces are inserted, while it should generate the template tags. div.class-name, script or style won't work either. Screenshot (~2MB):
    image
  5. Comment out files.associations in the settings
  6. Go back to test.vue's tab, type template or div and Tab, they work as expected. And codehighlight too. Screenshot (~4MB):
    image
  7. After this, comment out emmet.syntaxProfiles in the settings, Tab key still works. Even after vetur was uninstalled, VSCode seems to handle the emmet just fine. As long as I don't have the files.associations setting, emmet never breaks.

Meanwhile things like sass support worked as expected, as VSCode complained about the grammar if vetur was disabled or files.associations setting was commented out.

Most helpful comment

Thank you so much for your detailed description. Can you enable vetur and have this in your VSCode setting to see if it works for you?

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

The problem is, this is how vetur marks each region:

<template>    // vue
  <div></div> // vue-html
</template>   // vue
              // vue (1)
<style>       // vue
              // css
</style>      // vue

By adding vue-html: html, you are saying "use html emmet in vue-html" region. So emmet wouldn't work in (1) initially.
To use emmet in vue region, you need vue: html in emmet syntax profile.

Thanks again. I'll add it to README.

>All comments

Thank you so much for your detailed description. Can you enable vetur and have this in your VSCode setting to see if it works for you?

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

The problem is, this is how vetur marks each region:

<template>    // vue
  <div></div> // vue-html
</template>   // vue
              // vue (1)
<style>       // vue
              // css
</style>      // vue

By adding vue-html: html, you are saying "use html emmet in vue-html" region. So emmet wouldn't work in (1) initially.
To use emmet in vue region, you need vue: html in emmet syntax profile.

Thanks again. I'll add it to README.

Was this page helpful?
0 / 5 - 0 ratings