CODEWITHSUNDEEP
emmetvisual-studio-code
LuVR
LuVR

Reputation: 199

Something is wrong with Emmet in Visual Studio Code

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?

Upvotes: 17

Views: 26143

Answers (4)

Brad Ahrens
Brad Ahrens

Reputation: 5178

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,

Upvotes: 8

Simon
Simon

Reputation: 6533

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.

Upvotes: 47

Chuyi Huang
Chuyi Huang

Reputation: 444

Tab is no longer available for Emmet as Lukavis mentioned. It is sad, but you can still:

  1. Go to menu File → Preferences → Keyboard Shortcuts
  2. Search for "emmet"
  3. Find editor.emmet.action.expandAbbreviation
  4. Use Ctrl + Tab or whatever you like key bindings...

Upvotes: 2

LuVR
LuVR

Reputation: 199

I read an update review and found out that Visual Studio Code had the Tab key removed to expand the abbreviations Emmet 2.0 in Visual Studio Code.

Upvotes: 2

Related Questions