Vscode-ruby: HTML ERB files don't have HTML IntelliSense features

[connorshea]

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?

[capjuancode]

Same problem here.

[wingrunr21]

This is not an issue with this extension. The specific feature you are referring to is the HTML Intellisense feature. In order for VSCode to activate HTML features it needs to support "HTML mixed mode" for ERB templates.

It appears that Microsoft/vscode#41066 started this conversation but got closed due to lack of activity.

[jonfer]

This is the reason I have to go back to SublimeText... The PHP people looks like have the same problem and reported multiple times and still unsolved.

@wingrunr21 According to the VSCode developers [2] this is something that has to be solved by the extensions that provide the html.erb functionality, in this case I believe is vscode-ruby

I created a issue at VSCode repository to see what they say: https://github.com/Microsoft/vscode/issues/53462

[wingrunr21]

@jonfer I'm pretty sure the VSCode dev thought that to be an ERB specific issue.

VSCode enables features that are registered under a specific syntax. You can test this by opening an erb file and changing its detected syntax to HTML. Intellisense will immediately start working again. I'm not aware of an API that allows me to tell the HTML extension about new mixed mode support.

The API I am aware of allows extensions to register other syntaxes that are embedded in their code (eg we allow JS and CSS syntax highlighting in erb files). This is why I believe the HTML extension has to register ERB support itself.

Note that the issue you opened is not the same as what is reported here. Closing tag detection is not based on Intellisense and a VSCode dev saying the issue should be fixed here would be correct. The specific thing reported in this issue is that HTML Intellisense (eg the hovering/suggestion stuff) does not work in ERB files.

[jonfer]

@wingrunr21 thank you for the explanation. I thought the closing tag detection was part of the HTML Intellisense and was the feature I explained in the issue as is the one part that I miss the most... Is there a plan to implement that in vscode-ruby? Is something that couldn’t find in other erb extensions.

[wingrunr21]

Not at the moment but I agree it should be fixed. Would you mind opening a new issue specific to the closing tag support for tracking purposes? I'd like to leave this issue open for the HTML Intellisense stuff. If a VSCode dev confirms how we can add support on our end for that this issue can track things.

[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

[tushar1907]

"highlight-matching-tag.enabled":true

File>Preferences>Settings>Extensions>Emmet>Edit in settings.json

"emmet.includeLanguages": { "erb":"html" }

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

[haroldofurtado]

Nor working...

[minkir014]

This is a vs code problem. It doesn't support mixed mode. @tushar1907's solution is for adding highlighting tags and Emmet features only.

[gsum]

I have recently switched from atom to vscode and this problem is significantly slowing down my dev process. I guess I am going back to atom untile we have HTML IntelliSense on ERB files too.

[wingrunr21]

It’s been a year since I’ve looked at this so it is probably worth another look.

If you have suggestions on how to solve this @gsum I would be interested.

[minkir014]

You can take HTML built-in language server and clone it and modify syntax to match erb. I think this is now the only solution.

[nitsujri]

+1 for mixed mode with HTML, ERB.

I switched from SLIM to ERB only to discover this. I admit I'm surprised that it's still an issue.

I'm forced to pick between good syntax highlighting for my Rails code or good indenting when writing the HTML. For now syntax highlighting is more important to me.

[minkir014]

As I said it is Vscode problem not this specific extension problem.

[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.

[github-actions[bot]]

This issue has not had activity for 30 days. It will be automatically closed in 7 days.

[devtomtobar]

I have tried "emmet.includeLanguages": { "html.erb":"html" } and it does not work for me. Anyone still having issues with this?

[ryana]

I'm brand new to VSC, and have also tried both options on a fresh install with no luck.