What is Emmet in VS Code?
Software development is a difficult process; it requires great problem-solving skills and the ability to refractor code iteratively. Not only is this difficult, but also time-consuming. Therefore, developers require tools that ease the development process, and one of them is Emmet. It creates code statements for us upon giving it the right abbreviations.
Emmet is a plugin inside the Visual Studio Code IDE, which enables developers to write code efficiently. It mainly provides smart code abbreviations for HTML and CSS. Suppose we were creating a simple markup. Instead of having to write the boilerplate code ourselves, we could give the Emmet abbreviation ! , and it would be auto-generated for us. Visual Studio Code usually comes preinstalled with Emmet, but we can always configure it ourselves if we are unable to use it. In this Answer, we'll learn how to enable Emmet and use it to write markup effectively in HTML.
How does Emmet work?
Using Emmet is fairly simple. To trigger Emmet’s smart code completions, we need to provide it with relevant abbreviations. We’ll see a couple of HTML code examples written with Emmet in the coming sections.
HTML boilerplate code
The following shows the abbreviation to use for getting the HTML boilerplate code. If we type !, and select ! we’ll get a basic HTML skeleton code from the drop-down to start with our markup.
Sibling elements
Sibling elements are tags that have the same parent. For writing sibling tags, we need to separate all the tag names by a + sign, as shown below:
Parent-child elements
A child tag is enclosed within another tag, also called its parent. We’ll use the > symbol for generating a parent-child hierarchy. We can also specify the number of li or list items we want to give with the multiplication symbol as *3, where 3 is the number of list items we want. The . symbol followed by a CSS class name, adds external CSS to our HTML elements.
How to enable Emmet in VS Code
Mostly, we’ll be able to use Emmet without any additional configuration. However, we might be unable to use this feature for certain libraries like React. For that, go to the “Settings” in VS Code, and type “Emmet include.” We’ll be shown the “Add Item” option under the “Emmet: Include Languages” setting. Select the option and add a key and value pair to enable Emmet for that framework. React will have “javascript” as the key and “javascriptreact” as the value.
Practice exercise
As an exercise, try practicing the Emmet abbreviations given above. You don’t need to configure Emmet for this exercise. What you are required to do is create a new index.html file and type the above Emmet abbreviations to see the output.
Try it out!
Free Resources