🚀 Emmet in VSCode ✨

This content originally appeared on DEV Community and was authored by Laura Grassi

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

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

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

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

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

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

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

   <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

This content originally appeared on DEV Community and was authored by Laura Grassi

Print Share Comment Cite Upload Translate Updates

APA

Laura Grassi | Sciencx (2024-06-25T00:32:15+00:00) 🚀 Emmet in VSCode ✨. Retrieved from https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/

MLA

" » 🚀 Emmet in VSCode ✨." Laura Grassi | Sciencx - Tuesday June 25, 2024, https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/

HARVARD

Laura Grassi | Sciencx Tuesday June 25, 2024 » 🚀 Emmet in VSCode ✨., viewed ,<https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/>

VANCOUVER

Laura Grassi | Sciencx - » 🚀 Emmet in VSCode ✨. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/

CHICAGO

" » 🚀 Emmet in VSCode ✨." Laura Grassi | Sciencx - Accessed . https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/

IEEE

" » 🚀 Emmet in VSCode ✨." Laura Grassi | Sciencx [Online]. Available: https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/. [Accessed: ]

rf:citation

» 🚀 Emmet in VSCode ✨ | Laura Grassi | Sciencx | https://www.scien.cx/2024/06/25/%f0%9f%9a%80-emmet-in-vscode-%e2%9c%a8/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.