What VSCODE Extension that turns short tags and classes sentence into expanded code (example inside)

Question

What extension does this in visual studio code

ul.menu > li.item*3 > a.link#www.code.com > Click Me

it will exchange it with

<ul class="menu">
   <li class="item"><a class="link" a="www.code.com">Click Me</a></li>
   <li class="item"><a class="link" a="www.code.com">Click Me</a></li>
   <li class="item"><a class="link" a="www.code.com">Click Me</a></li>
</ul>

Answer 1

You have a couple of issues.

1. Remove the spaces, emmet won't work "across" spaces.

2. You have a="www.code.com" I assume you mean id="www.code.com", but that is problematic because of the .'s which emmet will interpret as more classes in this: a.link#www.code.com. That can be fixed with the custom attribute syntax [attributeName="attributeValue"]. See https://docs.emmet.io/abbreviations/syntax/#custom-attributes

3. Your final text has a space too so wrap it in {}

So you will have to do:

ul.menu>li.item*3>a.link[id="www.code.com"]{Click Me}

which expands to:

<ul class="menu">
  <li class="item"><a href="" class="link" id="www.code.com">Click Me</a></li>
  <li class="item"><a href="" class="link" id="www.code.com">Click Me</a></li>
  <li class="item"><a href="" class="link" id="www.code.com">Click Me</a></li>
</ul>

If you really mean a="www.code.com" as an attribute then make that a custom attribute as in ul.menu>li.item*3>a.link[a="www.code.com"]{Click Me}

Finally, emmet is expecting a href attribute and value since it is an a tag. If you don't want one, let us know - you might be able to eliminate that with a custom emmet snippet.