Auto-Format Erb with Prettier on VSCode

2 min readNov 29, 2022

If you’re here, I’m assuming you’re working on a Rails project and using VSCode. So I’m going go to straight to the point, and directly list the required changes to make auto-formatting work for .html.erb files on VSCode.

Install dependencies 🧩

All you need is to run one of the following commands. You probably already have prettier, but it doesn't if you also pass it again to the install command, but I'm adding it anyways in case you don't have it:

npm install --save-dev prettier @prettier/plugin-ruby prettier-plugin-erb
# or
yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

Update settings.json ⚛️

What I like to do here, is to set up VSCode to use prettier by default for everything. But then, I customize it to use syntax-tree for ruby files. That's why I'm listing it below.

The only thing you need from the snippet below is the [erb] part:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[ruby]": {
    "editor.tabSize": 2,
    "editor.useTabStops": false,
    "editor.defaultFormatter": "ruby-syntax-tree.vscode-syntax-tree"
  },
  "[erb]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
}

The formatOnSave could be only set to true at the root level, but I'm making it explicit here so I'm sure that you'll keep it true on your config.

Restart VSCode ⚡️

Finally, you have two options. You could just quit and reopen your VSCode to make it work, but I'll also suggest you a little hot tip to avoid having to do this every time.

You can actually just open the command palette with CMD+SHIFT+P and look for the entry "Developer: Reload Window". That's what most of the time you could do to avoid fully quitting VSCode.

Gotcha ⚠️

Be warned that the formatting might sometimes fail on certain files. That’s more often the case in more complex situations, when you try to mix JS with HTML and ruby in the same view or partial. If that’s the case for you, you can still skip that file, just add it to .prettierignore to ignore the file.

I regularly share short articles about React and Rails development. If that’s of value to you, follow me on twitter and hit that subscribe button below 💥