How to use Emmet Snippets in VSCode
As a developer one has to be continually learning to keep up with trends and the constantly changing software development landscape. Learning how to be more productive is learning to get more done with the limited time you have. Recently, I’ve looked at my developer environment and tried to see where I could be more productive during coding sessions. One thing I have tried to do is maximize all the productivity one can get with the beautiful features baked-in to VSCode (plugins, too). One of these awesome features that I discovered by accident was the Emmet scripts built directly into the editor (HTML files only by default).
Emmet scripts let you get wonderful amounts of work done as shown in the image below
How do I use it?
Emmet is a tool (written in javascript) that adds dynamic HTML snippets to your IDE. This means that it kind of works like an HTML-Code generator. You give emmet the syntax that matches what you want the HTML output to be. First, the most basic Emmet snippet is ‘!’ which gives you a boilerplate HTML template.
Next, you have your individual tags. These you might have thought were VSCode autocomplete but were actually emmet scripts. Enter any normal HTML tag by name and emmet will auto-complete it. ‘a’, ‘p’, ‘img’, ‘head’, and ‘body’ tags, etc all work as you would expect. Emmet also works for custom elements, i.e. input a word or phrase with no spaces and emmet will make it an element.
Last we have the dynamic part of emmet snippets, the ability to generate large amounts of HTML code by typing in very few commands. This is what was showed off at the beginning of the article. At this point, I would recommend that you check out the cheat-sheet on the Emmet Documentation site. It is a huge help and you will probably need it a lot before you get skilled with this syntax.
https://docs.emmet.io/cheat-sheet/
In the mean-time, emmet dynamic snippets work like this:
HTML tags can be inserted into one another using right-arrow ‘>’; These tags are also grouped to be added to the same line using ‘+’; If you want many tags, they can be multiplied using ‘*’; Lastly, text your want to display can be inserted into tags using ‘{}’.
One really common example of using emmet is to write out ‘list’ elements. This emmet snippet would look like: ‘ div>ul>li*6’
This would insert a ‘div’ element, with an unordered list inside, with 6 list elements inside that unordered list.
One advanced example of a command would be: ‘header+main>div3>p2>span*2’
This would insert 3 ‘div’ elements where inside each Div would be 2 ‘paragraph’ elements. Inside each paragraph, there are 2 ‘span’ elements back to back. In all, there will be 12 spans.
Bonus
If you use the ‘lorem’ keyword in your emmet snippets, it will generate random “Lorem-Ipsum” Latin text.
This kind of random text is used commonly for placeholders in development to see how something looks, test code, essentially is a bunch of text. You can place a number directly after it ‘ lorem12 ‘ to specify how many words you want in your random text. You can then multiply it with * to get a bunch of spans of lorem text. Generate to your heart's content.
