Create Custom Emmet Snippets in VS Code

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

Instructor: [00:00] 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.

[00:25] 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.

[00:46] 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.

[01:14] 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.

[01:44] 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.

[02:10] 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.

egghead
egghead
~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today