How do I auto format Ruby or .erb files in VS Code?

Question

I press ⌥ + ⇧ + F in Visual Studio Code for macOS, the shortcut to Format Document, to format a file called foo.rb or foo.html.erb.

Instead of formatting the document it prints out this letter: Ï

How do I get it to format the document?

Answer 1

You can set format associations in VSCode, so .erb files would be treated like .html.

Go to File->Preferences->Settings->Click ... in top right corner->Open settings.json

Then add this piece of code to your settings.json

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

This is how I solved this problem. It will remove some of the code highlights but will autoformat HTML templates like an HTML document.

Answer 2

You're going to need all of these settings in VS Code's settings.json file:

"ruby.rubocop.onSave": true, "editor.formatOnSaveTimeout": 5000, "editor.formatOnSave": true, "files.associations": {     "*.erb": "erb" }, 

Save the settings file. Install the "ruby-rubocop" and "ERB Formatter/Beautify" extensions on VS Code. Follow the documentation on both of those extensions to install their gem dependencies. Restart VS Code.

Format-on-save functionality will only trigger if the file is actually saved (which only happens if you change the file). Saving a file that has no changes will not trigger format-on-save.