Emmet is a standard feature that is built into Visual Studio Code (Code) and generally recognizes all file types. However, after installing Code, Emmet does not auto-expand abbreviations when working in ERB files. Fortunately, it’s a simple and very fast fix.
Install ERB Extension
You first need to make sure that you have the ERB extension installed. Navigate to the Extensions settings panel in Code (CMD + Shift + X on a mac) and search for ERB. The one to install was written by Craig Maslowski.
Add ERB to the Emmet Settings
The next step, after verifying or installing the ERB extension, is to add erb to the languages that Emmet will expand.
Navigate to the Settings for Code and search for Emmet. The keyboard shortcut to get to Settings panel on a Mac is CMD + ,.
In the Emmet: Include Languages section, click the Add Item button and enter erb in the Item column and enter html in the Value column. Make sure you do not add erb to the Emmet: Exclude Languages section.
Test It Out
The change should be immediate and shouldn’t require you to restart Code. You can test it out in any ERB file. Try this abbreviation: ul>li*4.
It should expand to an unordered list tag with four list item tags inside.
Conclusion
Although Emmet is built into Visual Studio Code, you need to ensure that the ERB extension is installed and that you add ERB to the included languages that Emmet understands. Once these two steps are completed, you will be able to expand Emmet abbreviations in ERB files.
