Auto-Format Erb with Prettier on VSCode

Photo by Frank Sobolewski on Unsplash

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