VSCode: Configuring Emmet for .erb Files

I was recently helping a friend who is starting his journey to become a software engineer, just like myself, and while I was doing some pair programming with him, he was the driver and I was the navigator, I notice that our code workflow was different than when we were doing it in my computer. The reason for this phenomenon was that on his machine we couldn't use emmet abbreviations, so I decided to write a blog to help others configure emmet to be available inside .erb files.

But what is Emmet?

Emmet, as defined by the documentation, is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS but can be used with programming languages too.

Imagine you are creating a <ul> with five <li> elements inside and each has an <a> tag inside. Originally you would have to create the <ul> element and inside it create the <li> elements one by one and so on, with Emmet you can achieve all that in just one line.

ul>li*5>a

If you want to know more about how to use emmet, you can visit its documentation here.

Configuring Emmet to be Available in .erb Files

1. While on your VSCode editor presscommand + p in the popup textbox write settings.json and open it.

2. Once opened, you will find something similar to what is on the image above, now you just have to add a comma to the last element of the list and below it add"emmet.includeLanguages”{"erb":"html"}.

2.1 if "emmet.includeLanguages” key already exist just add "erb":"html" to it as the last element and remember to put a comma to the element before it following the JSON Syntax.