DEV Community

Cover image for ✨ How to create Custom Emmet Snippets in VS Code!
Max Programming
Max Programming

Posted on • Updated on • Originally published at blog.usmans.me

✨ How to create Custom Emmet Snippets in VS Code!

πŸ‘‹ Hi again developers!

This post covers how you can use Custom Emmet Snippets in VS Code. With VS Code's new release: version 1.51!

Emmet is very powerful and very productive! And the mix of Emmet & VS Code, is like never before. But sometimes you might want to generate an element that uses a long emmet snippet. VS Code version 1.51 was released with this one and many more features! So let's begin! πŸƒβ€β™‚οΈ

1. βž• Creating a snippets.json file

We have to store our snippets inside of a snippets.json file. Pick a folder of your choice on your machine, and open that folder in VS Code. Create a new file called snippets.json

image.png

Now fill that file as shown below. I have an example snippet for you to try

{
  "html": {
    "snippets": {
      "yourSnippet": ".container>h1.title",
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

You can put as many other snippets you want!

2. πŸ”§ Configuration

It is pretty easy and simple to configure this. You can simply go into the VS Code Settings, by pressing Ctrl + , or by going to the βš™ and clicking on Settings.

image.png

Then search for a setting called Extensions Path and click on Edit in settings.json.

Now simply copy the folder path where you have your snippets.json file created, and paste that in the "emmet.extensionsPath" setting. Like this πŸ‘‡

image.png

DONE

That's it! Once you have put the path in the setting, you are good to go and use your own Custom Emmet Snippets in VS Code!

emmet snippet.gif

I hope this post helped you increase your productivity. Please consider giving it a like πŸ’™, and commenting πŸ’¬ below your experience about this feature, and sharing it!

I also have a YouTube video if you are interested in watching

Thanks for reading!!!

VS Code theme used: GitHub Theme

Font used: Cascadia Code

Top comments (5)

Collapse
 
jehdiaizon profile image
Jehdi Aizon

thank you!

Collapse
 
dabigin profile image
Brandon Dalton

You are the man, do you know how to change the ones that come with emmet to your liking? or can these override those? Just wondering, thanks again.

Collapse
 
maxprogramming profile image
Max Programming

As far as I know, there's probably no wait to modify the existing snippets. But you can probably add snippet with the same abbreviation. Like img and give it your own value. And then instead of picking "Emmet Abbreviation", use the one you added

Collapse
 
shobhitsagar profile image
Shobhit Sagar

Thank you. I needed this πŸ™ŒπŸ½

Collapse
 
maxprogramming profile image
Max Programming

Glad it helped you! 😊