🚀 Emmet in VSCode ✨
Tags: vscode, webdev, productivity, learning
Published: 2024-06-25 00:32:15

> "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>
     ```
![div with a specific class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3drrw9f2wern4qe99hn.gif)



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>
     ```

![Create an unordered list with items example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h6on8she7nyzrrh341b.gif)



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.

![Basic HTML Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpkqml701g7mz41kvss7.gif)



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>
     ```

![Paragraph with text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/240fx9sv17vphvk457w6.gif)



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">
     ```

![Image with src and alt atributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akay6732bexdke3v0n8g.gif)



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>
     ```

![Form with input and submit button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo0ucjvttuv9a5k4ra39.gif)



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>
     ```

![Structure with child elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvklhsbyt6y5m2u4uf7s.gif)


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