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.

Answer 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"
    },

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

Answer 5

If you have no code formatting

That is, when you hit shift + option + F to format your code, vscode says something like:

1. install a formatter by clicking on the 'Extensions' tab on the left hand side of vscode, searching for 'ERB Formatter/Beautify' (by Ali Ariff), and installing it.

2. Run gem install htmlbeautifier

3. Press shift + command + P and search for

Preferences: Open Settings (JSON)

It should open a file that has a your JSON settings in it; something like this:

{
    "window.zoomLevel": 1,
    "editor.inlineSuggest.enabled": true
}

4. Add this to the settings.json file you opened in the previous step

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

Your finished file might look like this:

{
    "window.zoomLevel": 1,
    "editor.inlineSuggest.enabled": true,
    "files.associations": {
        "*.html.erb": "erb"
      }
}

5. Close and reopen vscode and it should now let you format with shift + option + F

If you have no syntax highlighting for erb files

The extension called 'ruby' will solve that.

1. Click on the 'Extensions' tab on the right hand side of vscode.
2. type in ruby
3. Install the ruby extension by Peng Lv
4. You may need to restart vscode
5. All done!

Reference

• More info in this video

Answer 6

Update the settings.json of Visual Studio code:

File -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json"

Or in these paths in your OS

• Windows %APPDATA%\Code\User\settings.json
• macOS $HOME/Library/Application Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

From Visual Studio Code Ruby extension documentation they recommend to use as an initial configuration:

"ruby.useBundler": true, //run non-lint commands with bundle exec
"ruby.useLanguageServer": true, // use the internal language server (see below)
"ruby.lint": {
  "rubocop": {
    "useBundler": true // enable rubocop via bundler
  },
  "reek": {
    "useBundler": true // enable reek via bundler
  }
},
"ruby.format": "rubocop" // use rubocop for formatting

Look at the linting documentation too for further improvements. Plus as mentioned previously, you can add that .erb should be treated as .html:

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

Answer 7

I use the rubocop instead of rufo.

At the beginning, I used rufo. However, I met the issue

{
  boo: {
    a: 1,
    b: 2,
    c: 3
  }
}

it always format it for me as

{
  boo: {
    a: 1,
    b: 2,
    c: 3,
  },
}

add two ,, behind c: 3 and boo: {}. It is that makes my rubocop fail always.

As for, I use the rubocop in the project. Why not use it format my codes directly!

If you are interested, you can do as the following:

install the plugin VSCode ruby and then add the following snippets in the the settings.json

  "ruby.format": "rubocop",
  "ruby.intellisense": "rubyLocate",
  "ruby.useBundler": true,
  "ruby.lint": {
    "rubocop": {
      "useBundler": true
    }
  },

save it. It works~~(I wish you)

Answer 8

Nowadays (March 2019) I think prettier with prettier-ruby are the best options: it can handle Ruby, ERB (as HTML), JS, and many many more.

prettier script.rb # will show you the formatted script
prettier --write script.rb # will overwrite the file with the formatted script

You can use the Prettier VS Code plugin to do that automatically: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://github.com/prettier/plugin-ruby

Answer 9

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.

Answer 10

It is now possible to:

1. Install ruby-rubocop in VS Code
2. Go to File -> Preferences -> Settings
3. Search for Editor: Default Formatter and select "misogi.ruby-rubocop"
4. Go to File -> Preferences -> Keyboard Shortcuts
5. Search for Ruby: autocorrect by rubocop. There you have the shortcut to run rubocop in order to automatic format your ruby code following your rubocop settings.

You may also right click in your ruby file and you will find the "Format Document" option, which triggers "Ruby: autocorrect by rubocop" once ruby-rubocop is installed.

Answer 11

Install either the official ruby prettier plugin or the community erb prettier plugin and let Prettier do its job.

You can follow this article as a quick start

Or you can use the ERB Formatter/Beautify extension.

Answer 12

To format your ruby files, you don't need any extra plugin, you can just map some keys to do "editor.action.reindentLines"

If you use vscode-vim plugin, you can add this to your settings:

 "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["=", "="],
            "commands": ["editor.action.reindentlines"]
        }
    ],

Then in normal vim mode, == will reformat your file.