Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Emmet in visual studio code

  • Last Updated : 05 Nov, 2020

Emmet in Visual Studio Code: Emmet is a built-in feature in Visual Studio Code. You don’t have to install any extensions for emmet support. Emmet prevents you from writing the entire code by yourself by providing Emmet abbreviation. Emmet is enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files, and also in languages that inherits from any of the above like handlebars and PHP.

When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list in the form of a dropdown. If you type the short form (like element name) then you will see a preview of the expansion. 

Emmet for HTML:

1. Creating an element by its name: In HTML, as you type in the name of the HTML tag, you will get a suggestion list, select the element that you want to insert from the suggestion list. For example, if you type h1 and click enter to get the <h1></h1>. You can do this for all HTML tags as well.

2. Creating an element  by its class name: In HTML, if you want to create an element with a particular class name then first enter the name of the element and ‘. ‘ and the name of the class which you like to give to the element and hit enter. The element will be created with the class name you specified.

3. Creating an element by its id: In HTML, if you want to create an element with a particular id then first enter the name of the element and ‘ # ‘ and the id which you like to give to the element and hit enter. The element will be created with the id you specified.

4. Creating Multiple elements: If you want to create multiple elements using emmet then specify the name of the element and ” * ” and specify how many elements of that type you want and hit enter.

5. Creating nested elements: You can create nested elements by using ” > ” and type the outer element name and enter ” > ” and enter inner elements and hit enter to get the desired output.

Emmet in CSS: In CSS, when you start typing, Emmet starts giving you suggestions where you can select and hit enter. In CSS, you can get both the property name and value in suggestions.

Emmet also has support for many other languages.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!