How to Use Emmet in Visual Studio Code for Faster Web Development

Leave a comment

In Visual Studio Code, we can use Emmet to speed up our development. Let’s look at how to do this.

In VS Code, create a new file called test.html:

Enter doc and note the Emmit Abbreviation appears:

Clicking on the information icon we can see what the snippet will look like:

Press tab to get the HTML inserted into the document:

Also, if we were to type ! instead, we would get the same result:

From here, we can use several Emmet shortcuts. For example, to enter an a href, instead of  typing the full text, we can type a and then tab:

On tabbing, we get the a href code ready to use:

For more information, check out https://emmet.io/.

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.comLinkedIn Twitter | YouTube

 

Leave a Reply

Your email address will not be published. Required fields are marked *