Software development largely consists of writing code, regardless of the language used. After some time, however, it turns out that when creating complex solutions, you can see repetitive code structures. At a higher level of abstraction, these include, for instance, control statements or loops. However, the easiest way to notice this is when working on web development. This is where the problem of the person’s efficiency and time wasted repeating the same constructs arises. Wouldn’t it be better to find a way to reduce the number of characters typed by half or even more to get the same result?
At this stage, we would like to point out that this is just an introduction to the article. Yes, there are solutions that offer automatic completion or syntax prompting. Even the simplest software allows you to achieve such effects, most often by using the TAB button, generating a signal with the value of 0x09 for the operating system. Of course, we are talking here about command lines or virtual terminals (in some cases, you need to use the mentioned button twice). Another very popular syntax suggestion solution is IntelliSense.
Emmet is much more than syntax prompting or simple repetitive code snippets (which you must define yourself first). It is a set of tools that allow you to generate dynamic lines and trigger specific actions on them. Emmet software is typically integrated with popular code editors. For the purposes of this post, we used a Microsoft solution, i.e. a free code editor, also for commercial use – Visual Studio Code. Sometimes, however, the software we use supports integration with the Emmet solution through an external plug-in, more on that later in the post. The screenshot below displays capabilities of the Emmet tool for generating HTML templates – instead of 274 characters, 1 – ! is enough.
In addition to the presented example, the Emmet software also allows dynamic content generation. Let’s say we want to place the following structure (an array with one row and three cells) in several places within the project:
Instead of repeating the code, just use the table>tr>td*3 shortcut, which is then expanded with the TAB button (screenshot below). As you can see, the symbol > indicates the content of the elements, and the * – the number of occurrences of a certain element. What if we wanted to put in a much more elaborate table, say 10 rows? Dynamic templates on the server side are part of the answer, but in the context of working with code – Emmet significantly shortens the written code.
This is only a fraction of possibilities of the solution discussed in the post. In fact, when working with professional solutions, Emmet expressions are more advanced. However, when you master their basics, and fortunately there are not many of them – you can gain a lot. The basic expressions include the already presented symbols > and *. The + sign also applies. It means the occurrence of elements after each other in a specific order at the same level of the hierarchy – no element is neither superior nor subordinate. Of course, it is often necessary to go back in the hierarchy of elements from the level of Emmet expressions. The ^ symbol is used for this purpose. For example, the expression div+div>h1>span+em^^footer places both div and footer, as well as span and em, in the same hierarchy, because double use of the ^ symbol moves the context into the div hierarchy.
Presented possibilities are included in the basic part of the Emmet group of expressions. If you want to learn more about them and improve your efficiency, we recommend the official site in the form of neat and understandable documentation with ready-made examples. We also understand that not everyone used to Microsoft solutions, because there are other code editors on the market than Visual Studio Code. Emmet is available for software such as Atom, Coda, Eclipse, Notepad++, Brackets, WebStorm and many other products. Next time you start writing code, you might want to consider Emmet expressions and actions, which deserve a separate post.
