Something is wrong with Emmet in Visual Studio Code

Question

After the last update, Emmet is working in some different (incorrect) way.

If I'm typing usual code in Emmet syntax like:

.row>.col*2

and press Tab it's not working.

If I type:

h1{Some title}

and press Tab it's also not working, but if I put the cursor inside brackets, and then press Tab — in this case it's going to work.

This is my Visual Studio Code configuration:

"editor.fontSize": 12,
"editor.wordWrap": "on",
"editor.wrappingIndent": "indent",
"editor.minimap.enabled": true,
"workbench.iconTheme": "material-icon-theme",
"window.zoomLevel": 0,
"window.openFilesInNewWindow": "off",
"window.openFoldersInNewWindow": "on",
"workbench.welcome.enabled": false,
"workbench.colorTheme": "Default Light+",
"[stylus]": {
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    }
},
"emmet.preferences": {
    "stylus.valueSeparator": ": "
},
"git.enableSmartCommit": true

How can I fix it?

Answer 1

As of version 1.15.1 this worked for me:

Open up your preferences and add in

"emmet.triggerExpansionOnTab": true

It seems Tab is no longer associated with Emmet.

If you are on v1.33.0 or newer, you can also open up the preferences and type in something like trigger expansion and it's just a simple toggle now. Of course, you can still do the above in the settings.json file as well.

Answer 2

I just ran into this same problem, but I have a slightly different reason for it. Not only did I need to set triggerExpansionOnTab to true, but I also needed to set the included languages in the settings.json file.

In my case, Emmet was not activated for blade.php files. So, I needed to add "blade":"html" within the includedLanguages section.

Full example:

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascript",
    "vue-html": "html",
    "php": "html",
    "blade": "html",
}

Adding this might also help:

"emmet.useNewEmmet": true,