Increment number when creating multiple html elements using emmet

Sometimes you need to create many elements so that each one of them gets a unique, incrementing number. You probably already know about VS Code’s Emmet capabilities which let you type something like .myClass*5 to automatically create five divs with the class “myClass”. So the output of that would be:

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

If you need a number that is incrementing, you can simply add a $ symbol to the command like this: .myClass$*5

That would result in the following output:

<div class="myClass1"></div>
<div class="myClass2"></div>
<div class="myClass3"></div>
<div class="myClass4"></div>
<div class="myClass5"></div>

If you need to copy and paste long lists of numbers, you can use the multi-cursor editing features of VS Code. If the lines on your clipboard match the number of lines of your multi-cursor selection before pasting, VS Code is smart enough to assume that you want to paste just one number from the clipboard into each line that has a cursor blinking.

Examples of Brackets plus the Emmet extension

Here’s how the Emmet extension for Brackets can really speed up your workflow:

-type #mydiv and hit tab to get <div id=”mydiv”></div>
-type lorem and hit tab to get lorem ipsum text
-type #container>.col-sm-4*3 and hit tab to get
<div id=”container”>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
</div>