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.

Leave a Reply

Your email address will not be published. Required fields are marked *