Vscode: Emmet not working

[Lahori-Jawan]

I just updated visual studio code and as a result I see that emmet is not working now. in previous releases, emmet did work fine but since last 2 updates, emmet seems to be disabled or excluded altogehter from visual studio code. I searched for emmet extension on VS CODE repository but found nothing. my current version in 0.10.3. emmet also did not work in last release but before that all was good. I want emmet badly back!

[egamma]

Cannot reproduce.
1) open an html file
2) ul>li*5
and I get an emmet expansion.

Pls try out these steps in a VS Code setup without any extensions installed.

[SamVerschueren]

Cannot reproduce either, works fine on Mac OS X (El Capitan).

[egamma]

closing pls reopen with with reproducable steps.

[Lahori-Jawan]

well, removing the extensions did the trick but now I wonder if i update next time, then again I would have to remove all the extensions and then re-install them one-by-one which is very time consuming, right! BTW thanks for help!

[SamVerschueren]

That's abnormal behaviour. Maybe something broke during the update process.

[egamma]

Or the extension has some side effects. What extension did you have installed when the problem occured?

[Lahori-Jawan]

just themes. flatland, monokai, batman

[Sapunov]

I can reproduce this behavior. Emmet doesn't work when html file doesn't save on a hard drive.

[mrmlnc]

@Sapunov,

I cannot reproduce this problem in VS Code 1.5.3 on Windows 10. Please, provide GIF or a small code example where occurs described problem. Also, please, give me more detailed information:

1. VS Code version
2. List of installed extensions

[skyweb331]

it is only working in html extension files.
I tried it in *.php file but not working. I just changed file extension and now working fine

[jens1o]

I tried it in *.php file but not working. I just changed file extension and now working fine

This will be fixed in next release, since @ramya-rao-a is working on it. :) There is another issue where this gets explained.

[ramya-rao-a]

@skyweb331 If you are not on Insiders, try mapping php to html using the emmet.syntaxProfiles setting

{
    "emmet.syntaxProfiles": {
        "php": "html"
     }
}

[skyweb331]

I did it but still not working.

[ramya-rao-a]

@skyweb331 What is your VS Code version? Please provide a sample code or gif where you see this issue

[Boasbabs]

Hi there, I am still having issues using emmet on VScode. Tab doesn't expand shortcuts. From what i read so far, i have to remove all my extensions plugin. But that does not sound logical to me. VSCode is robust. I want to use VScode but if issues like this aren't solved, i will stick with my old editor.

• current version: Version 1.13.0

[ramya-rao-a]

@Boasbabs

I want to use VScode but if issues like this aren't solved, i will stick with my old editor.

We can only solve issues that we can understand. So please help us in that by answering the below questions.

• Is emmet working as expected when you run the command Emmet: Expand Abbreviation?
• Just before you press tab, is there any auto-complete/suggestion list open?
• In which kind of file is emmet not working for you? Eg: html, php, jsx, css, scss ?
• You don't need to remove all your extensions. Can you point to the place where you read that?

[cjwd]

I'm having the same issue, emmet is not expanding with tab in php files.
To answer your above.

• Yes it works if I use the command palette
• There is no auto complete/ suggestion list open
• PHP

Version 1.14.1 (1.14.1)

I have tried the
{
"emmet.syntaxProfiles": {
"php": "html"
}
}

[ramya-rao-a]

@cjwd Do you have emmet.useNewEmmet set to true?

[cjwd]

Yes I do.

[ramya-rao-a]

@cjwd Please read https://code.visualstudio.com/updates/v1_13#_emmet-abbreviation-expansion-in-suggestion-list and https://code.visualstudio.com/updates/v1_14#_emmet-abbreviation-improvements

• tab is not longer the default keybinding for emmet. Use the command Emmet: Expand Abbreviation or bind a new keybinding to the command editor.emmet.action.expandAbbreviation
• Another thing you can try is to set emmet.showExpandedAbbreviation to "always". This will show emmet expansions in the suggestion list

[cjwd]

Thank you @ramya-rao-a I went with the second option setting emmet.showExpandedAbbreviation to "always"

[alePanta]

I could use Emmet on CSS files setting "emmet.useNewEmmet": true
Thanks.

[ramya-rao-a]

Hey All,

In VS Code 1.15, there will be changes to how use Emmet in VS Code. Mainly

• Emmet abbreviations will no longer expand on pressing tab, instead they will appear in the suggestion/auto-completion list. On selecting them from the suggestion list, the abbreviation will get expanded
• Emmet: Expand Abbreviation command will continue to work and you bind any keyboard shortcut (other than tab) to it (editor.emmet.action.expandAbbreviation)
• emmet.syntaxProfiles should now be used only for customizing the final output and not for mapping new file types to existing emmet supported modes. For that, use the new setting emmet.includeLanguages

Read more on Emmet 2.0

[iscorporacion]

no se si aun sirva de algo, peo emmet se a actualizado si mal no estoy date una vuelta por https://docs.emmet.io/cheat-sheet/ yo tambien pense que no estaba funcionando, cuando intentaba escribir html5 y esperar el cuerpo base pero fue cambiado a "!" signo de admiracion

[eduard-ungureanu]

Hi, while this works as expected in a .html file:

It doesn't work in a .php file if I want to add HTML code outside the <?php ?> tags:

I'm using the latest version Version 1.16.1 (1.16.1) and those are my settings:

{
    "editor.fontFamily": "'InputMono-Light', monospace",
    "editor.fontSize": 18,
    "editor.lineHeight": 28,
    "workbench.fontAliasing": "antialiased",
    "window.zoomLevel": 0,
    "editor.minimap.enabled": false,
    "workbench.sideBar.location": "right",
    "workbench.iconTheme": "material-icon-theme",
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Default"
    },
    "workbench.colorTheme": "Material Theme",
    "emmet.useNewEmmet": true,
    "emmet.includeLanguages": {
        "php": "html",
    }
}

So I guess I'm going back to Sublime Text, since those are working as it should in SB maybe you guys will consider fixing this in the future.

[ramya-rao-a]

@eduard-ungureanu https://github.com/Microsoft/vscode/issues/32423 tracks the issue of emmet abbreviations with class operator (.) not triggering emmet suggestions unless php.suggest.basic is disabled.

Here are a few workarounds until we can solve the original issue

• Disable php.suggest.basic if you dont use it much. OR
• When you expect the emmet suggestions to show and they dont, do one of the below. Both will cancel the current completion list and trigger new one OR
  
  
  
  • press ESCAPE and then Ctrl+Space or continue typing the abbreviation if you are not done doing so.
  
  
  • delete last char and continue typing.
  
  

Note this occurs only when the only operator in the emmet abbreviation is the class operator.
Use others like + or > or # and emmet suggestions will appear as expected.

[DenisValcke]

I had the same problem and then I noticed the following in my default settings:

// When enabled, emmet abbreviations are expanded when pressing TAB.
  "emmet.triggerExpansionOnTab": false,

Setting, that to true solved it for me.

Sidenote: Also important to know, I had to add a couple of things to enable emmet in Vue or Nunjucks projects:

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

(I'm currently on 1.17.1)