How to Boost Your Coding Life by Powerful VS Code Emmet

One tap, Big solution…🥳🥳🥳

Photo by Clément Hélardot on Unsplash

“While others were dreaming about it — I was getting it done.”
― Nathan W. Morris

Programmers are usually very lazy🥱 but they also have a deadline to submit their task in time. That’s why to make them more lethargic but efficient, emmets are discovered😎. Didn’t hear about that??? Don’t worry, hold tight…I am giving you all the details of emmet in VS code.

What is Emmet?

As the official website of emmet says, “Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow”. But we will discuss the emmets in VS code only as according to wakatime 2021 stats, it is way more ahead of other competitors in case of worldwide usage. Also though Emmet abbreviation and snippet expansions are enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files, as well as any language that inherits from any of the above like handlebars and php, we’ll focus on mainly HTML and CSS. Using emmets, we can quickly write complex code in a short time with simple abbreviations.

Enabling and Settings:

All emmet snippets and expansions are always installed in VS code. So no extension is required.

But you can always change your settings for your own customisation by editing your settings.json file, which can be found at the following path —

C:\Users\UserName\AppData\Roaming\Code\User

Expanding using Tab:

Usually, emmet suggestions pop up, which expand on pressing Enter. But if you want to use Tab for expanding the emmets, you can add the following code in the settings.json file —

Order of Emmets Suggestion:

If you want that emmet suggestions will always be on the top of the suggestion list, you can add the following code in the settings.json file —

To Disable Emmet Suggestion:

If you don’t want to see the emmet abbreviations in your suggestion list (I don’t think you wanna do😉), you can use the following code in the settings.json file —

Common Emmet Abbreviations in HTML:

To start an HTML program:

!

Output:

Fig. 1.1 — HTML document structure using emmet [Screenrecording by author]

!!!

Output:

Fig. 1.2 — Only doctype for HTML code structure [Screenshot by author]

Nesting:

To generate nested elements, we will use the ‘>’ operator.

nav>div>ul>li>a

Output:

Fig. 1.3 — Nested elements using emmet [Screenshot by author]

Multiplication:

We can repeat one code by using the ‘*’ operator.

ul>li*4>a

Output:

Fig. 1.4 — Multiplication using emmet [Screenshot by author]

Sibling:

To generate siblings, we can use + operator.

header+section+footer

Output:

Fig. 1.5 — Generate siblings using emmet [Screenshot by author]

Adding Text:

If we want to add text inside an element, we can use the ‘{}’ operator.

p{This is an example!}

Output:

Fig. 1.6 — Adding text inside an element using emmet [Screenshot by author]

Adding Class:

We can create a class name using the ‘dot(.)’.

div.div-example>header>h1.h1-example+nav.nav-example

Output:

Fig. 1.7 — Class add using emmet [Screenshot by author]

Multiple Class Name:

We can use multiple class names on a single element. Suppose we want to type four classes like .red, . yellow, .orange, .black in a single element, then we can type

.red.yellow.orange.black

Output:

Fig. 1.8 — Multiple class add using emmet [Screenshot by author]

Adding id:

We can create an id name by using the ‘#’.

div#div-example

Output:

Fig. 1.9 — Id add using emmet [Screenshot by author]

We can use multiple classes in a tag, but we can't use multiple ids in a tag. If we specify two ids using ‘#’, the second id will override the first.

div#red#yellow

Output:

Fig. 1.10 — Id overriding in emmet [Screenshot by author]

Adding Attribute:

We can add attributes by using ‘[]’.

input[type=email].mail

Output:

Fig. 1.11 — Attribute add using emmet [Screenshot by author]

If we have a source image ‘ image.png’ with ‘ image’ as alt tag, then we can type

img[src=image.png alt=image]

Output:

Fig. 1.12 — Image source add using emmet [Screenshot by author]

Grouping:

We can group code together by using ‘()’.

ul>(li>a)*5

Output:

Fig. 1.13 — Grouping using emmet [Screenshot by author]

Let’s try a complex example —

(table>tr>td)+ul>li

Output:

Fig. 1.14 — Trying complex example using emmet [Screenshot by author]

Climb up:

The climb up ‘^’operator is used to move up one level in the tree structure. This can come in handy when using the child operator ‘>’.

section>div>h2>a^p

Output:

Fig. 1.15 — Climb up operator [Screenshot by author]

Automatic Numbering:

We can automatically add numbers in HTML by using ‘$’.

ul>li$*4>a

Output:

Fig. 1.16 — Automatic numbering using emmet [Screenshot by author]

Random Text:

If we want a random only lorem ipsum placeholder text, then we can type ‘Lorem’.

Lorem

Output:

Fig. 1.17 — Lorem ipsum random text using emmet [Screenshot by author]

If we want some text with 20 words long from lorem ipsum, then we can type ‘Lorem20’.

Lorem20

Output:

Fig. 1.18 — Lorem ipsum with specific word number using emmet [Screenshot by author]

We can also use the multiplication operator with lorem ipsum:

Lorem*3

Output:

Fig. 1.19 — Lorem ipsum with multiplication operator using emmet [Screenshot by author]

Link Generate:

We can add CSS files faster using emmet abbreviation.

link:css

Output:

Fig. 1.20 — CSS link generate using emmet [Screenshot by author]

We can use the ‘+’ sign to add CSS links to generate faster resources.

head>link:css+link:favicon

Output:

Fig. 1.21 — Many links generate using emmet [Screenshot by author]

Expansions of HTML tags:

Some HTML tags which we use repeatedly, emmets help to write those tags very fast. Let’s see those emmet abbreviations.

script:src

Output:

Fig. 1.22 — Script tag using emmet [Screenshot by author]

input:t

Output:

Fig. 1.23 — Input type text tag using emmet [Screenshot by author]

input:c

Output:

Fig. 1.24 — Input type checkbox tag using emmet [Screenshot by author]

a:link

Output:

Fig. 1.25 — Link add using emmet [Screenshot by author]

Wrap with abbreviations:

Here are the steps to follow:

Step 1: You will need to place your cursor on the tag you want to wrap
Step 2: Open your command palette with ‘CTRL + SHIFT +P’
Step 3: Find ‘Emmet: Wrap with Abbreviation’
Step 4: Type in your Emmet abbreviation that will wrap your current tag

Fig. 1.26 — Wrap with abbreviations using emmet [Screenrecording by author]

Common Emmet Abbreviations in CSS:

Height & Width:

We can easily define height and width in a CSS document by typing the first letter of height and width. Also, we can give numbers to specify the width and height of any unit.

body{
    w
}

Output:

Fig. 1.27 — Width add using emmet [Screenshot by author]

body{
    w100
}

Output:

Fig. 1.28 — Width in px add using emmet [Screenshot by author]

body{
    w100%
}

Output:

Fig. 1.29 — Width in % add using emmet [Screenshot by author]

body{
    w100vw
}

Output:

Fig. 1.30 — Width in vw add using emmet [Screenshot by author]

body{
    w:a
}

Output:

Fig. 1.31 — Auto width add using emmet [Screenshot by author]

Margin & Padding:

If we need margin and padding of 30px on all sides, then we should type

*{
    p30-30-30-30
}
body{
    m30-30-30-30
}

Output:

Fig. 1.32 — Margin and padding add using emmet [Screenshot by author]

Text:

There are some easy to use text property symbols and will be generated with a default value. ‘ta’ will generate ‘text-align’ with ‘left’ value.

body{
    ta
}

Output:

Fig. 1.33 — Default text align select using emmet [Screenshot by author]

But if we want to overwrite the default value, then we should type

body{
    ta:r
}

Output:

Fig. 1.34 — Select right text align using emmet [Screenshot by author]

‘td’ will generate ‘text-decoration’ with the default ‘none’ value.

body{
    td
}

Output:

Fig. 1.35 — Default text decoration selected using emmet [Screenshot by author]

But if we want to overwrite the default value to change the ‘text-decoration’, then we should type

body{
    td:o
}

Output:

Fig. 1.36 — Select overline text-decoration using emmet [Screenshot by author]

‘tt’ will become ‘text-transform’ with ‘uppercase’ default value.

body{
    tt
}

Output:

Fig. 1.37 — Default text-transform select using emmet [Screenshot by author]

But if we want to overwrite the default value to change the ‘text-transform’, then we should type

body{
    tt:l
}

Output:

Fig. 1.38 — Select lowercase text transform using emmet [Screenshot by author]

Font Face:

We can type ‘@f’ for a basic ‘@font-face’ property.

body{
    @f
}

Output:

Fig. 1.39 — Font face add using emmet [Screenshot by author]

For a complete list of ‘@font-face’ property then type:

@ff

Output:

Fig. 1.40 — Full font face list add using emmet [Screenshot by author]

Background:

We can type ' bg' to add a simple ‘background’.

body {
    bg
}

Output:

Fig. 1.41 — Simple background add using emmet [Screenshot by author]

To add ‘background-image’, we can type ‘bgi’.

body {
    bgi
}

Output:

Fig. 1.42 — Background image add using emmet [Screenshot by author]

To give ‘background-color’, we can type ‘bgc’.

body {
    bgc
}

Output:

Fig. 1.43 — Background color add using emmet [Screenshot by author]

To add ‘no-repeat’ in the background, we can use ‘bgr’.

body {
    bgr
}

Output:

Fig. 1.44 — Background repeat add using emmet [Screenshot by author]

Challenges for You🤓

• Create this HTML code using emmets —

Fig. 1.45 — Challenge using HTML emmets [Screenshot by author]

The answer is —

div>h1^div>(table>(tr>td*2)*4)+ul>li*3

• Create the following HTML code using emmets —

Fig. 1.46 — Another challenge using HTML emmets [Screenshot by author]

The emmet abbreviation for the above code will be —

div.a>div#b>(table>(tr>(td>a)*4)*2)^div.c+div.d+img[src=image.png alt=image]+lorem

References:

1. https://code.visualstudio.com/docs/editor/emmet
2. https://emmet.io/
3. https://wakatime.com/blog/51-wakatime-2021-programming-stats

Thank you for reading.

I hope you found this “How to Boost Your Coding Life By Powerful VS Code Emmets” article interesting. Please clap, share and follow if you like and please leave any comment to let me know your thoughts.