A brief guide to Emmet

Emmet is a powerful tool created by Sergey Chikuyonok that lets you code HTML and CSS more efficiently. It is a must-know tool for all designers/developers and if you are a user of Visual Studio Code 🆚, it is pre-built into it, and hence no need to install the extension. However, if you are a user of Sublime Text you can use the following steps:

💻Installation

Step 1: First, install package control. In order to install, press Ctrl+Shift+P in Windows and type Install package control, and hit Enter.

Step 2: Go to Preferences >> Package control and click on Install Package.

Step 3: After step 2, a box will appear, and type Emmet in that box. Click on the search result appearing Emmet and after few seconds it will be installed on your machine. Since I have already installed it on my machine it's not appearing. Assuming that you haven't installed it, it will show on your machine.

So, this was the installation part. Now let's move on to how to use it.

⚛ Usage and result

1. HTML Skeleton

Typing all this code is a pain as well as time-consuming. Also, there is a great possibility of committing errors. What if you could achieve this within a fraction of a second and accuracy is 💯%? Well, Emmet has a solution.

Just type ! in VS Code and press Enter and you can achieve the result as above.

2. ID and CLASS attribute

Type #emmet and hit Tab/Enter to achieve the above result.

Type .emmet and hit Tab/Enter to achieve the above result.

3. Child: >

Type div>ul>li

4. Multiplication: *

Type div>ul>li*5

As we have seen, multiplication here simply multiplies the number of elements on which the multiplication symbol is used.

5. Item numbering: $

Type .emmet>ul>li.item$*5

$ here implies the numbering of items. Since there will be five li items numbering will start from 1 and will end in 5.

6. Sibling: +

Type div+div>span+p+h1

7. Linking files

Type link

Try typing link: and you will get a bunch of options as below. You can directly link to CSS files, favicon, and so on.

Besides HTML and linking files, there are multiple options for CSS as well. You can check out other options on the official Emmet documentation.

Suggestion

If you want to see the preview of your emmet code as you type then I suggest you to enable suggestions by pressing Ctrl + Space. This way it would be much easier and you will know what result you will get.

Well, this is the end of A brief guide to Emmet. Thanks for reading. Don't forget to follow me on Twitter.