Generating HTML Code with Emmet in Intellij IDEA
The tech industry’s pace just keeps growing and developers must keep up the pace by either continuously learning and improving their skills or use better tools to accelerate their development throughput in the same amount of time. As developers, we dislike repetitive tasks but sometimes we are so focused on the problem to be solved at hand that we tend to ignore those repetitive tinny tasks that are taking our time right in front of us. The good news is that most of the time, there is a tool that solves your problem, such as a command line program or a code editor extension/plugin.
When I started coding, one task that frustrated me the most was the creation of HTML. HTML is verbose and even though we write similar HTML code in different projects, it ends up never being the same, unless you use styles libraries such as Bootstrap and Material UI.
Once I learned about Emmet, I was mind blown by how quickly HTML and CSS code could be created. Emmet is a plugin that can be integrated in most popular code editors that can auto generate HTML with just a few shortcuts.
Here are a few examples of what you can do with Emmet in IntelliJ.
Emmet settings
To activate and see all Emmet settings go to:
File > Settings > Editor > Emmet > HTMLfor Windows and LinuxIntelliJ > Preferences > Editor > Emmet > HTMLfor MacOS
And make sure the Enable XML/HTML Emmet and Enable abbreviation preview are enabled. Press Apply and Ok and Intellij is now ready to use Emmet.
Create HTML boilerplate
In a new HTML file, type ! or html:5 and press the TAB keyboard and the basic HTML tags such as head, meta and title are generated for you.
Quickly create a div tag with a class or id attributes
Just type .container and press TAB. You can always type div.container for the same result but emmet defaults to a div tag if you do not specify it in the shortcut command.
Similarly applies to the id by typing #container or div.#container. But the cool thing is that you can combine shortcuts to create more complex tags. For example you can use #container.container to create a div element with both id and class attributes
Nested tags
To generate nested tags use the > key after the parent tag for example #content>div.header+div.body>ul.items>li.item. Notice also the + key that creates a sibling nested tag.
Same Tags with different content
If you need to create a list of items that use the same tags and attributes, use the * to multiply the number of tags you want to be generated. Following the previous example you could type #content>div.header+div.body>ul.items>li.item*5.
Insert content within your tags
You can also include sample content to your tags by using the curly brackers notation {Item $}. The dollar sign is the item number automatically generated from the *number notation.
Your Problem is Someone Else’s as Well
This is just the basics of what Emmet can do for HTML generation. For more details check their cheat sheet link to find what shortcuts you need. Besides HTML, Emmet also offers shortcuts for CSS generation which I might cover in another post.
The main message I want to convey is that if you getting frustrated to any task or workflow that you starting to find repetitive and time wasting, google the problem and most of the time you will find that there is a tool that will help you or someone else has the same problem as you a can give their insights.