'VSCode Emmet html boilerplate?

We used to be able to type ! inside an html document in vscode to get html boiler plate content completion as documented here.

However it no longer works. Thoughts?

I noticed that if we type ! and select Edit > Expand Abbreviation, the ! is replaced with boilerplate, but I no longer get the intellisense that was there before.

enter image description here

Update

Looks like we need to do ctrl+shift+p and search for User Settings. Filter for the emmet settings and select the Trigger expansion on tab then the ! is replaced with the corresponding emmet snippet.

I also selected Show suggestions as snippets, but the intellisense / snippet is still not showing up.

htmlvisual-studio-codevscode-settings


Solution 1:[1]

If you want to get html boilerplate with Emmet Abbreviation, you should type html:5 and hit tab.

Solution 2:[2]

The issue was with Language mode only. You will get the option to select the Langauage mode on the bottom. enter image description here

enter image description here

enter image description here

Solution 3:[3]

Been very annoyed for many, many long minutes by the boilerplate shortcut's suddenly, inexplicably not working (maugre much extension-de-installing and intalling and re-installing, even with VS Code uninstalls and re-installs, but what I'm come up with from mining various forums (what does seem to work and doesn't appear to be settings-dependent or peculiar to my laptop) is:

  1. COMMAND+K plus COMMAND+L (one can just HOLD COMMAND and type K and then L sequentially).

  2. In the Emmet Abbreviation window that comes up type ! as usual and then press Enter/Return.

  3. Simply striking ! will bring up the boilerplate. One can then simply press Enter to return to the code.

  4. The two-stroke process of ! + TAB is now replaced by the only marginally more involved five-stroke process of ? + K + L + ! + Enter.

Solution 4:[4]

For me it was the "<" problem

this is not working: <html this is working: html

Solution 5:[5]

I experienced this issue after configuring my VS Code environment for an online course. In my case, the behavior was due to the following pair being added to my settings.json file:

"emmet.showExpandedAbbreviation": "never"

After I removed this, the shortcuts returned.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 anuragsinhame
Solution 3 coderpc
Solution 4 hassane
Solution 5 James Hudnall

Related Questions