Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create Custom Emmet Snippets in VS Code

    Emmet is a very powerful tool that will save you a lot of typing. It also allows for extensibiltiy through a snippets.json file. You can configure VS Code to accept the snippets.json file through your VS Code settings and then start cranking out your own custom Emmet snippets.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: In VS code I've come across a scenario where I want to type a difficult sequence of characters /?/, which is a great pinky workout, but I'd rather be able to do something like type Q and hit Tab and have that appear rather than struggle with this. In my settings, I've hit command-comma and search for Emmet.

    You'll see that I have Emmet trigger expansion on tab enabled, so that whenever I hit Tab it'll expand. This is a JavaScript react file, so if I hit div and Tab it'll generate that div or any sort of Emmet expansion. LI times three, Tab will give me three of those. That works in JavaScript as well.

    I need to use an Emmet configuration to define my own custom Emmet snippet for that. The way you do that is by going into your settings again. Look up Emmet and in your extensions path, I'm going to create this path. It's probably not already on your machine. Open a terminal and type code, then my home path/.emmet/snippets.jason. Hit Enter.

    That'll launch the snippets Jason file inside of VS code. It'll even create this Emmet directory for you. That's super handy. I'll create a Jason file where I define my HTML and my snippets. Then the character I want to type before I hit Tab is Q. What I want that to expand, typically you write that LI times three, or whichever Emmets in text you want to expand. I just want plain text.

    You have to wrap that in curly braces. I'll type out my /?/. If I were to leave out the curly braces, then it would try to evaluate this in Emmet. I just want it plain text. I'm putting the curly braces back in. I'll hit save there and make sure in my settings that the extension's path points to that directory. Then you'll most likely have to reload your window.

    I bring up the commands and type, "Reload Window," or you could quit and open it again. I'll hit Reload Window. That reloads the window. Now, I'll type Q and hit Tab. For whatever reason in VS code that usually fails the first time. If you hit Q and Tab again, now it starts working and it works fine from here on out. Q Tab, Q Tab, Q Tab.