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

Inazense picture Inazense · Oct 31, 2018 · Viewed 9.4k times · Source

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,

Answer

Inazense picture Inazense · Nov 28, 2018

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.