HTML ERB files don't have HTML IntelliSense features

Your environment

• vscode-ruby version: 0.18.0
• Ruby version: 2.5.1
• VS Code version: 1.24.0
• Operating System: macOS 10.13.5 (High Sierra)

Summary

When editing a .html.erb file, extra information about the HTML tags isn’t provided on-hover like it is when using the HTML language service.

Expected behavior

This is what it looks like when hovering over a div in a file when using HTML as the syntax highlighter. Information is provided about the div element.

Actual behavior

This is what it looks like when hovering over a div in a file when using erb as the syntax highlighter.

Steps to reproduce the problem

• Open a file like index.html.erb, provided below:

<% content_for :title, "Browsers" %>

<div class="container">
  <div class="row py-4">
    <div class="col-12">
      <h1>Browsers</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-12 sticky-column">
      <div class="card mb-4">
        <div class="card-header bg-light">
          Jump to...
        </div>
        <ul class="list-group list-group-flush">
          <% @browsers.each do |browser| %>
            <li class="list-group-item"><%= link_to browser.name, "##{browser.name.downcase.gsub(' ', '_')}" %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</div>

• Set the syntax highlighting to erb and hover over a div, ul, h1, etc.
• Note that no information shows up on-hover for any of the HTML elements.
• Set the syntax highlighting to HTML and hover over a div, ul, h1, etc.
• Note that information about the given element now shows up on-hover.

Potential fixes

I assume there might be a way to have .html.erb files inherit features from the HTML syntax highlighter?

[MindSwipe]

I’ve managed to get this functionality, and more. My .html.erb files now have Emmet support and match opening/closing tags. Sadly I haven’t gotten HTML Intellisense working, will post an update once I do.

Enabling Emmet: Go to your settings File>Preferences>Settings or Ctrl+, and add "emmet.includeLanguages": { "erb":"html" }

To get Tag matching install this extension and enable it in the same settings file you just did with "highlight-matching-tag.enabled":true

Hope this helps

[sebastianiorga]

I’ve managed to get this functionality, and more. My .html.erb files now have Emmet support and match opening/closing tags. Sadly I haven’t gotten HTML Intellisense working, will post an update once I do.

Enabling Emmet: Go to your settings File>Preferences>Settings or Ctrl+, and add "emmet.includeLanguages": { "erb":"html" }

To get Tag matching install this extension and enable it in the same settings file you just did with "highlight-matching-tag.enabled":true

Hope this helps

Just to clarify in case others have this problem: I had to add "emmet.includeLanguages": { "html.erb":"html" } to get it working.