Finally the time of remembering the doctype syntax and tags are truly over. I am getting really crazy with Emmet from last few months and feel like to write about it. In this post I will describe what is Emmet and how it can help you to improve your coding productivity in VS Code.
First thing first – If you’re using VSCode, Emmet is actually built right in so you don’t even have to install it. For any specific code editor you can follow the installation guide
In simple words Emmet is a plugin for many text editors and it can help us to write out shorthand version of our markup to generate HTML, CSS.
Generating Basic HTML Structure
When we create an HTML page we first create a skeleton for it, that includes DOCTYPE, html, head, body etc. You can do all that with just 1 key. That’s the beauty of Emmet.
Let’s open a Visual Studio Code, create a html file and Just type ‘!’, press enter/ hit tab and you will have the basic HTML structure ready!!
Basic Tags with Classes and Id
To create basic HTML tags, just type the tag’s name and hit Enter. You can even add the classes and id to a tag. Emmet uses . for classes and # for id.
div#name.section
Element with text content and attributes
To show content within the tag, just wrap the content in curly braces { }
p{I am Kavita}
Emmet uses [] for attributes
img[src="beach.jpg"][alt="beach pic"]
Parents, Siblings & Children
We can specify parents, siblings and children using the ^, + and > characters
header+div>p>span+em^bq
Grouping and Iterations
If your structure is very complex, you may want to group tags using parenthesis()
div>(header{this is header}>ul>li>a)+footer>p{this is footer}
To generate same tag multiple times we can use (*)
table>tr>td*5
We can add the sequence using $ and even customize the numbering using $$
Pad with zeros – ul>li{Item$}.item$$*4
Reverse direction - ul>li{Item$@-}.item$@-*4
Reverse direction from a specific number - ul>li{Item$@-10}.item$@-10*4
Lorem Ipsum
Let’s generate”Lorem Ipsum” dummy text. By default Emmet will generate 30 words of text or you can define the number of words as well.
lorem5
CSS
Emmet is very helpful for CSS as well. Now you don’t have to remember long property names, use short expressions to assign values to properties. Here are some examples.
pos - to set the position by default its relative
c - use color poperty
d:n - to set display attribute to none
mr:10 - for margin
miw:10 - setting the width
To see the full list of short expressions, please refer Emmet documentation
Emmet can boost your productivity when writing HTML and CSS. I think Emmet is Awesome, do you agree?
Kavita Mishra 