Vscode-ruby: Emmet isn't recognised in erb

[resting]

Your environment

• vscode-ruby version: 0.14.0
• Ruby version: ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16
• VS Code version: 1.15.0
• Operating System: MacOS

Expected behavior

1. Create a new file
2. Set language mode to erb
3. Type .myclass or any HTML like div, p etc
4. Hit ctrl + space to list suggestions (if you don't have autosugesstion turned on)
5. Expect to see emmet expanded abbreviations

Actual behavior

No suggestions returned

Steps to reproduce the problem

see Expected behavior

---

IIRC emmet used to work seamlessly with erb.
Perhaps its due to the change to emmet in vscode.
Workaround: set language mode to HTML.

[coisnepe]

Add this to your settings:

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

[resting]

Works like magic

[tenzin2017]

You just need 2 steps to make it work: ( for VS code)

1. "emmet.includeLanguages": {"erb": "html"} as mentioned by @coisnepe
2. Install "erb
   Craig Maslowsk " extensions..... it helps erb syntax highlighting

[prithvi16]

@coisnepe Thanks!

[Neo42]

You guys rock!

[Zhao-Andy]

For anyone looking to add it for html.erb files, add this:

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

[tenzin2017]

@Zhao-Andy I tried
"emmet.includeLanguages": {
"html.erb": "html",
},

but this one doesn't work.
So I tried
"emmet.includeLanguages": {
"erb": "html",
},
this works perfectly...... Thanks

[valterbarros]

You can do this https://code.visualstudio.com/docs/languages/overview#_adding-a-file-extension-to-a-language. I need this for vscode recognize the coffe.erb extension as coffescript file

[wingrunr21]

Would anyone mind writing up either a README entry for this stuff for something for the wiki?

[prasanthnv]

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

[ariefrizkyr]

I found that on my mac .html.erb are detected as .html.erb format instead of erb. You can find the format detection by opening your .html.erb file and see the bottom right section. Therefore @coisnepe solution doesn't work and @Zhao-Andy works and vice versa.

If you find your format detection as .html.erb and you wish to use @coisnepe solution, you may need to add these lines:

"files.associations": {
     "*.erb": "erb"
 }

Hope this helps.

[wingrunr21]

Do you have additional extensions installed that would register an html.erb as a syntax? This extension doesn’t register that syntax name.

[aristotelesbr]

This is work for me!
"emmet.includeLanguages": {"erb": "html"}
tks! @coisnepe

[wehdi]

In addition to "emmet.includeLanguages": {"erb": "html"} you need to install this extension :
https://marketplace.visualstudio.com/items?itemName=CraigMaslowski.erb

[wingrunr21]

That extension is literally the same thing that's in this extension...the only difference is that it registers the .html.erb extension as ERB.

For anyone running that ERB extension, do you lose HTML highlighting and intellisense when the detected language is ERB?

[flaviofl]

Not sure why, but for me only worked this way
"emmet.includeLanguages": {"ruby": "html"}

[frogandcode]

I found that on my Mac .html.erb are detected as .html.erb format instead of erb.

Not sure why, but for me only worked this way “emmet.includeLanguages”: {“ruby”: “html”}

In case it helps future generations, the solution will depend on what language/format your ERB files are recognized as using. This comment (above) from @ariefrizkyr is helpful in this regard:

You can find the format detection by opening your .html.erb file and see the bottom right section.

For me (on a Mac), the default was Ruby but changed to erb after installing the Simple Ruby ERB extension. So keep any eye on what type of file VS Code thinks you have and configure accordingly.

[ghost]

Many thanks, @frogandcode. You just addressed the exact problem I was having. I had edited the config file and added "emmet.includeLanguages": {"erb":"html"}, but it wasn't working. Then I looked at the right lower corner of the editor and I saw that the language association for html.erb was "Plain text", and erb wasn't among the options to choose from. I installed Simple Ruby ERB and changed the language association to erb and now Emmet Abbreviation works perfectly in my html.erb files :)

[thecodepixi]

Not sure why, but for me only worked this way
"emmet.includeLanguages": {"ruby": "html"}

I tried all of the options presented elsewhere in this thread, and this was what worked for me on Mac, running VS Code v 1.41.0 on a Mac running OS Catalina v 10.15.1

[edemagbenyo]

Add this to your settings:

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

Works like a charm

[Hassanelashram]

Works like magic

I don't understand, where exactly do you write "emmet.includeLanguages": ... ?

[raulrpearson]

I don't understand, where exactly do you write "emmet.includeLanguages": ... ?

@Hassanelashram, that goes into VS Code settings file.

[Hassanelashram]

@raulrpearson thank you very much for taking the time to answer me, you were right, however i had a headache becasue i was trying it with "emmet.includeLanguages": {"erb": "html"}
but in reality i had to add: "emmet.includeLanguages": {"ruby": "html"}

[abhicoder0105]

thank you

[bazfer]

So -- adding a file association { "*html.erb": "html" } enables snippets but disables erb highlighting and viceversa. A true Catch-22. Sucks.

[berxtjkl]

For anyone looking to add it for html.erb files, add this:

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

Thank you so much brother, your answer really helped, :)
High five.

[Korak-997]

@coisnepe
Thanks a lot your solution works fine.
Except there is a one little thing you should take care of :
It is Trigger Expansion on Tab
it need to be checked otherwise when you hit the tab the Emmet will not work fine.
To do that:

• should go in Settings in Vscode
• Then write Emmet in the search bar
• By coming down a bit you will find this
  
• If its checked you are fine if not you need to check it.

[irmaR]

@coisnepe
Thanks a lot your solution works fine.
Except there is a one little thing you should take care of :
It is Trigger Expansion on Tab
it need to be checked otherwise when you hit the tab the Emmet will not work fine.
To do that:

• should go in Settings in Vscode
• Then write Emmet in the search bar
• By coming down a bit you will find this
  
• If its checked you are fine if not you need to check it.

Thanks. Exactly what I was looking for!

[Mtillmann]

Not sure why, but for me only worked this way
"emmet.includeLanguages": {"ruby": "html"}

that's the one that did it for me, thanks a lot!