Laura Grassi

Posted on Jun 25

🚀 Emmet in VSCode ✨

#vscode #webdev #productivity #learning

"The odds are never impossible.. Merely unfavorable

Emmet is an integrated tool in Visual Studio Code that helps us write HTML and CSS code more quickly. It allows us to expand simple abbreviations into complete code blocks, saving time and reducing repetitive typing. ⏱️

Key Features of Emmet 🛠️

Abbreviation Expansion: Transform abreviations into complete code. 📝
Code Snippets: Shortcuts that quickly insert predefined code structures. ⚡
Fast Navigation and Editing: Allows quick navigatio and editing of similar elements within the code. 🏃‍♂️

Practical Examples of Abbreviations 🔍

1 - Create a div with a specific class and/or ID

Abbreviation: .className or #idName
Example: Typing .container and pressing Enter expands to: html <div class="container"></div>

2 - Create an unrdered list with items

Abbreviation: ul>li*3
Example: Typing ul>li*3 and pressing Enter expands to: html <ul> <li></li> <li></li> <li></li> </ul>

3 - Create a link with text

Abbreviation: a[href="link"]{text}
Example: Typing a[href="https://example.com"]{Test} and pressing Enter expands to: html <a href="https://example.com">Test</a>

4 - Basic HTML structure

Abbreviation: !
Example: Typing ! and pressing Enter expands to the basic HTML structure.

5 - Create a paragraph with text

Abbreviation: p{text}
Example: Typing p{This is a paragraph} and pressing Enter expands to: html <p>This is a paragraph</p>

6 - Create an image with src and alt attributes

Abbreviation: img[src="path"][alt="description"]
Example: Typing img[src="image.jpg"][alt="Image description"] and pressing Enter expands to: html <img src="image.jpg" alt="Image description">

7 - Create a form with input field and submit button

Abbreviation: form>input[type="text" name="name"]+button[type="submit"]{Submit}
Example: Typing form>input[type="text" name="name"]+button[type="submit"]{Submit} and pressing Enter expands to: html <form> <input type="text" name="name"> <button type="submit">Submit</button> </form>

8 - Create a structure with child elements (more than one element)

Abbreviation: .container>a+p
Example: Typing .container>a+p and pressing Enter expands to: html <div class="container"> <a href=""></a> <p></p> </div>

These are just a few examples of what you can do with Emmet in VSCode. The efficiency provided by these shortcuts can significantly transform your routine. 💡

May the force be with you all. bye-bye

Top comments (11)

David Maciejewski • Jun 27

Use $ to level up the game. Try ul.test>li*10>a[href="page$.html"]{Sub page $}

This will result in:

<ul class="test">
    <li><a href="page1.html">Sub page 1</a></li>
    <li><a href="page2.html">Sub page 2</a></li>
    <li><a href="page3.html">Sub page 3</a></li>
    <li><a href="page4.html">Sub page 4</a></li>
    <li><a href="page5.html">Sub page 5</a></li>
    <li><a href="page6.html">Sub page 6</a></li>
    <li><a href="page7.html">Sub page 7</a></li>
    <li><a href="page8.html">Sub page 8</a></li>
    <li><a href="page9.html">Sub page 9</a></li>
    <li><a href="page10.html">Sub page 10</a></li>
  </ul>

David Miller • Jul 1

Much appreciated for this reminder. Helps me work smart and not as hard

John Liter • Jul 1

This really cool. I am going to use this. Thank you for creating and sharing!

Jasraj Chouhan • Jun 28

I tried all the emmet shortcuts and it is very awesome.
Thank you so much.

Mayowa • Jun 26

As a beginner I really find this very helpful.
Thank you!

Enoch Osarenren • Jun 28

Hello everyone, I hope you're all doing well. I recently launched an open-source project called GraphQLPlaceholder, and I'd love your support. Please check it out and give it a star on GitHub github.com/enochval/graphql-placeh.... Your support would mean a lot to me and help immensely in the project's growth.

Thank you.