How to configure Emmet in VS Code for erb files

Nick Haralampopoulos
2 min readMay 7, 2020

--

I am a Rails developer for half a year now. I use VSCode as my IDE.

As you know Rails uses the MVC design pattern. The view is rendered by files ending in .html.erb. Erb means embedded Ruby.

The problem is when you try to write HTML, emmet does not do its magic because it thinks this is not an HTML file.

To enable emmet you have to change the configuration in VS Code. Here is how to do it:

  1. From menu Code select Preferences, select Settings
Open menu Code, select Preferences, select Settings

2. In the search field type emmet

In the search field type emmet

3. Go to include languages and click on Edit in settings.json

On include languages click on Edit in settings.json

4. After the last line add "emmet.includeLanguages": { "erb": "html", "ruby": "html"}

part of code showing where to write

5. Congratulations! Open an html.erb file and enjoy.

If you liked this article please spare a few claps. Also please share with anyone you think might find it useful.

For any comments and suggestions, don’t hesitate to contact me directly.

Thank you for reading.

If you are a Microverse student you might find useful my Chrome extension that can hide/show the completed projects, coding challenges and professional skills from your dashboard. You can check it here How to Remove Completed from your List of Coding Challenges.

I drink lots of coffee daily. I would appreciate it if you could help me buy some more. Click here buymeacoffee

--

--

Nick Haralampopoulos

Works as Software Engineer at PropTechCore. Full Stack Developer, Microverse Alumni, Automotive Engineer, Entepreneur, Motorcycle racer, Aircraft lover.