Emmet expand abbreviation doesn't work in Visual Studio Code with the attributes

Question

I am starting to use Visual Studio Code for my web projects and I cannot live without Emmet, but I have a problem when I try to expand the abbreviations in HTML tags with attributes. Just an example. If I write html:5 and press TAB key it expands all the HTML5 template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

And writing tags with id and class, like p#id.class, it generates properly next piece of code

<p id="id" class="class"></p>

But when I want to expand same tag with other attributes inside of square brackets, it doesn't work. Just add a tab space in the code.

p[align="center"]

And same thing if I try to add text in the tag using curly brackets

p{Test}

Can you help me to know how to configure it, or if it is a problem with my software / extensions?

Regards,

Inazense · Accepted Answer · 2019-06-04T10:35:58.680

24

After few days, investigating in the Emmet in Visual Studio Code webpage I found the solution.

You need to add next line to the User Settings file for expanding the Emmet abbreviations with Tab key:

"emmet.triggerExpansionOnTab": true

This is because by default is disabled on Visual Studio Code.

edited Jun 04 '19 at 10:35

answered Nov 28 '18 at 00:55

Inazense

1,517
3
18
28

3

I'm still having issues after adding this line to my settings.json. The error I get is `command 'emmet.expandAbbreviation' not found`. – Kshitij Saraogi Oct 26 '20 at 19:25
2

@KshitijSaraogi "emmet.expandAbbreviation" is deprecated, you need to remove from your settings.json and add "emmet.triggerExpansionOnTab" instead of – Inazense Oct 27 '20 at 00:46
Tab after square brackets still doesn't work with this option enabled – Dimage Mar 04 '21 at 09:32
@podlec I double checked in my VS Code and I can confirm is still working – Inazense Mar 07 '21 at 21:15
It's worth noting that, for me, the error was coming from a keybinding that referenced `emmet.expandAbbreviation`, so others might check keybindings as well. – Jason Holtzen Jan 03 '22 at 22:46

score 14 · Answer 2 · edited Sep 19 '20 at 00:07

14

In Visual Studio Code: File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file

Add the below code which worked for me.

"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},

I hope it helps someone.

edited Sep 19 '20 at 00:07

KyleMit

30,350
66
462
664

answered Jan 29 '20 at 18:45

Santosh

581
7
17

score 1 · Answer 3 · answered Oct 31 '18 at 15:04

1

I don't think square brackets work anymore in emmet... However, you should use p>{text} for the curly brackets. From what I understand, it is used to add text within an element.

So p>{text here} will produce <p>text here</p>

If you still need more help, please take a look at the emmet abbreviations syntax docs: The Emmet Docs - Abbreviations Syntax

answered Oct 31 '18 at 15:04

Benneee_

319
1
7

Hi, thanks for your answer. I tried the way that you told me, but doesn't work either. Same result as the other... And what do you mean with square brackets don't work anymore on Emmet? I checked the documentation and it still appearing there... – Inazense Oct 31 '18 at 15:26
Oh well... I think you should reinstall the extension then... If you checked the link I sent you, It's not there – Benneee_ Oct 31 '18 at 17:22
Yeah... thing is Visual Studio Code has the Emmet integrated by default – Inazense Nov 01 '18 at 08:34
Kindly deactivate the extension, reload VS Code, then find it in the Extensions Store and Reinstall.... – Benneee_ Nov 02 '18 at 10:11
Yes, I tried but I have not found where deactive Emmet. Do you know where to find it? – Inazense Nov 02 '18 at 15:56
Hi! Sorry for the late reply. This solution might sound extreme, but if you really need to use Emmet, kindly update your VS code or uninstall and reinstall again... That should solve the problem for good. – Benneee_ Nov 07 '18 at 12:36
2

Unfortunately it doesn't work. I uninstall VS Code and remove all the folders related with the configuration in User folder and AppData, reinstall it and the problem persists. – Inazense Nov 12 '18 at 16:37
I have installed VS Code in a completely new system, and I have the same issue out-of-the-box: VSC does not work with Emmet. I've gone back to using Atom with an Emmet plug-in. – Steve Gelman Nov 21 '18 at 14:33

score 1 · Answer 4 · answered Dec 16 '21 at 12:48

Had the same problem but with typescript. Adding "typescript": "typescriptreact" to settings.json helped.

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "razor": "html",
    "plaintext": "pug"
}

Apparently typescript is not default for emmet.

score 0 · Answer 5 · answered Dec 21 '21 at 20:35

Further to the above/below answers that describe how to configure your settings.json file to enable / configure Emmet:

If you are trying to use Emmet in a new, unsaved document... you must choose a (supported) language for Emmet to be activated. (You can also just save the document and VSCode will know from the extension what language you are using.)

When you launch a new editor tab (Ctrl+N or etc) -- at the very top left of the empty page you may see: "Select a language to get started". CLICK on the bolded "Select a language" and choose one of the languages that is configured for Emmet in the Settings.json file as described in several of the other answers above/below.

Now, try again: type .test and press Tab and you should see Emmet expand your abbreviation.

score -1 · Answer 6 · answered Mar 17 '22 at 05:32

-1

In Visual Studio Code: File > Preferences > Settings > Extensions > Emmet > Edit in settings.json file remove following line and save.

"emmet.triggerExpansionOnTab": true,

answered Mar 17 '22 at 05:32

luoenzhen

29
1

score -1 · Answer 7 · answered Dec 13 '22 at 20:31

-1

For what it's worth, I had the same issue but fixed it by force quitting the application after adding the code snippets above to Settings.json

answered Dec 13 '22 at 20:31

Jaethfit

1

1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/33408568) – Warkaz Dec 18 '22 at 14:33

score -2 · Answer 8 · edited Jun 20 '20 at 09:12

-2

Edit the file settings.json the path in Visual Studio Code File > Preferences > Settings > Extensions > Emmet > Edit in settings.json

find file settings.json Edit file settings.json

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 23 '20 at 15:30

William Glaffo

1

3

Aren't you repeating an earlier answer from Nov. 2018 ? – Whirl Mind Apr 23 '20 at 15:45

Emmet expand abbreviation doesn't work in Visual Studio Code with the attributes

8 Answers8

Linked