Vetur: Both Emmet and Scaffold Snippets not working

Created on 8 Jun 2019  路  35Comments  路  Source: vuejs/vetur

  • [x] I have searched through existing issues
  • [x] I have read through docs
  • [x] I have read FAQ

Info

  • Platform: Ubuntu 18.04
  • Vetur version: 0.21.0
  • VS Code version: 1.35.0 (vscodium)

Problem

Typing scaffold into a new Vue file does nothing. No IntelliSense, no expanding.

Also, Emmet is not working inside <template> unless this option is set:

"emmet.includeLanguages": {
  "vue": "html"
}

Reproducible Case

  1. Fresh installation of vscode/vscodium.
  2. Install Vetur.
  3. Create a new file, select type as Vue.
  4. Try some Snippets. In my case scaffold and h1 inside <template>.
  5. Both are not recognized.

Yes, not much of an info. Could I do anything to help debug this?

need-more-info

Most helpful comment

Apparently on the new versions you have to use "vue" instead of "scaffold"

All 35 comments

I cannot repro:

image

image

@bdrtsky Vetur works just fine on Linux Mint for me.

Then maybe it's Ubuntu-specific issue? This can't be coincidence, that on both - 18.04 and 16.04 it's not working (in my case even on fresh system). Only highlighting is working for me. I tried to migrate to VSCode, but without Vetur it doesn't make sense...

@bdrtsky Are you using https://github.com/VSCodium/vscodium as well? I think it might be an issue from it.

Also see https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#no-syntax-highlighting--no-language-features-working. Sometimes VS Code has corrupted installs of Vetur. The safest way is to download the VSIX, rm -rf ~/.vscode/extensions/octref.vetur-* and use code --install-extension <extension-id | path-to-vsix>.

@octref nope, I am using VSCode downloaded and installed from official Microsoft site.

Just tried to install from VSIX. No changes:

Screenshot from 2019-07-12 20-26-36

@bdrtsky Any error you see in Output -> Vue Language Server?

image

Do you have any vue related settings such as files.associations that mark Vue files as another type? Also, any other Vue extensions than Vetur?

I don't have any other extensions beside Vetur at all. My settings.json empty.

And yes, I have lot's of error in Output!

Screenshot from 2019-07-12 20-56-12

Any ideas what could cause those errors? I have absolutely clean installation, deb package downloaded from official site, the only extension installed is by your instructions, no settings modifications made. I didn't use VSCode before much, so I have no idea how to debug it. Didn't expect this could happen with official extension and most popular Linux distro.

@bdrtsky You need to open a folder for Vetur to work, as it resolves dependencies from local node_modules:

image

@octref yes, you right, thank you! It's working just fine, lol. I guess I worked with Sublime too much and didn't even expect such behavior. Sorry for disturbing.

image
not work for me too

Version 0.22.0 is not working for me also, rolled back to 0.21.1 any everything working as normal again.

Same thing for me on Vetur 0.22.0 on macOS, using scaffold simple does not work anymore

plus one on Vetur 0.22.0 - windows 10

+1 on the same issue and confirm that rolling back to 0.21.1 fixed the issue

Apparently on the new versions you have to use "vue" instead of "scaffold"

If I substitue and use "vue" it generates: var vm = new Vue({ el: "#replace" }) instead of the usual <template>...</template><script>...</script><style>...</style>

Based on @octref comment above it seems scaffold is gone and the replacement is to individually use "template", "script" and "style".

"vue" creates the template scaffold for me with Vetur 0.22.2 on Windows 10, vscode 1.37.1

@dave2k2 If the "vue" command is not working for you, you can bring back the scaffold by creating a personal snippet for it. If you use vscode, go to Code>Preferences>User Snippets, type vue on the input that will show up and paste this code there:

https://gist.github.com/rochabianca/2c39f611b28dfb51f0fb3ff483afbf51

I made some minor changes, like init the template with a div with the name of the file and already put the name too on the script but you can remove this changes by removing the lines 6 and 11

@rochabianca that's pretty awesome thanks...actually it's even better!

@dave2k2 thank you :DD

Type <vue> and it works

as @davexpression and @rochabianca said scaffold was replaced by type

According to the updated documentation @zeroidentidad @davexpression and @rochabianca are all correct <vue will work however, simply writing vue will not work without the < first. One other option is to start with the word default; def has done the trick for me.
Screen Shot 2562-12-23 at 12 13 16 PM
Screen Shot 2562-12-23 at 12 13 27 PM

If you're on Debian Linux and using VS Code, you might not get Scoffold Snippets instead type <vue> and hit enter, and it all works.

For those who are facing the Emmet problem in visual studio code, add this in your settings.json and it should work 馃槃

"emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html",
    }
}

image

Apparently on the new versions you have to use "vue" instead of "scaffold"

In my case, the intellisense for snippet is <vue> or .vue. Look this:

Captura de Tela 2020-04-17 a虁s 12 43 39

Why is this issue closed?
I didn't see a real resolution to this issue?

@seanfarmar It's because the scaffold changed its name for vue (don't know about the emmet problem through) so it shouldn't work if you type scaffold. But if you want that back, you can use my gist, here

Try default
It will definitely work

Type <vue> and it works

you are a God, tks!!!

Apparently on the new versions you have to use "vue" instead of "scaffold"

That was a great help.. thanks alot <3

Apparently on the new versions you have to use "vue" instead of "scaffold"

"THE" answer!

Was this page helpful?
0 / 5 - 0 ratings