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

user_6355591 0
Viewed 18660

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,

emmet visual-studio-code html
7 Answers

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.

user_63555910

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.

user_14536910

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

user_101879110

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.

user_129938410

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.

user_14475090

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

"emmet.triggerExpansionOnTab": true,
user_12220320
user_133917880
Related