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?

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

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

Solution 3

If you're using prettier to format your html/css/js files, it is worth trying prettier-erb-plugin. Just add to your .prettierrc:

  "plugins": ["@prettier/plugin-ruby", "prettier-plugin-erb"]

Or install it with yarn:

yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

And make sure that VSCode uses local version of prettier from node_modules (or, you probably can install these plugins globally as well). Prettier VSCode plugin usually declared itself as default formatter, but just in case, make sure that in your settings.json is NOT written something like:

    "[erb]": {
        "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
    },

Solution 4

You can use Rufo to format your Ruby code. It is an opinionated formatter (like Prettier is for JS, if you are familiar with it).

You can use the vscode-rufo extension to integrate it with VSCode.

Solution 5

gem install htmlbeautifier

through the search functionality provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format document.

View more solutions

Comments

[JanR]

This doesn't work in VS Code version 1.25.0-insiders

[Bhojendra Rauniyar]

Do gem install rufo after installing the plugin, then it will work.

[LordAlpaca]

Even when I installed the gem, it still says that there is no document formatter for 'erb'-files installed. Any tips?

[AlecRust]

I don't think prettier-ruby handles .erb files.

[Marco Lackovic]

Prettier does not handle .erb files. It is currently filed as feature request to which you can subscribe to notifications to know when/if it will be implemented and add your contribution.

[Tashows]

Is that supposed to also have syntax highlighting? If so, it is not working for me. :/

[Andrew Koster]

I don't think that the extensions I've mentioned do syntax highlighting, no. I somehow have Ruby syntax highlighting even when I disable all extensions, but you probably want to look specifically for an extension that mentions syntax highlighting.

[Diesel]

I just wanted to add to this that if you have multiple installations you may need to specify the absolute path in settings to your htmlbeautifier (setting is called Vscode-erb-beautify and to Ruby > Rubocop settings for rubocop.

[J.R. Bob Dobbs]

changing the files.associations to "html" as you suggested caused more problems than it fixed, in my environment