Formatting and Linting ERB files with Zed on save

I’ve been using Zed lately and liking it a lot. It’s very performant, has a much better Vim experience, and also comes with good defaults.

One place where it is not there yet is formatting ERB files. But there’s a simple way to fix that.

I use erb_lint (along with some custom linters) to lint + auto correct ERB files.

When I used VSCode, there was a extension which integrated erblint with VSCode, so you could see lint errors/warnings + autocorrect them.

And for formatting, I used htmlbeautifier to indent things properly (yes, it supports ERB too). VSCode has an extension that integrates with htmlbeautifier too.

But the extension story with Zed is not mature yet. Fortunately, you can configure Zed to use these tools with just a couple of lines.

Update the “languages.ERB” object in your Zed config to look something like:

{
  "languages": {
    "ERB": {
      "formatter": [
        {
          "external": {
            "command": "sh",
            "arguments": [
              "-c",
              "f=erblinttemp_$RANDOM$RANDOM.html.erb; cat > $f; erblint -a $f &>/dev/null; cat $f; rm $f;",
            ],
          },
        },
        {
          "external": {
            "command": "htmlbeautifier",
            "arguments": [],
          },
        },
      ],
      "format_on_save": "on",
    },
  },
}

Integrating with htmlbeautfier is pretty trivial as you can see. Zed wants formatters to accept input from STDIN and output to STDOUT. htmlbeautifier does exactly that.

The story with erblint though is a bit more complicated. There’s no way AFAIK at this time to make it conform with what Zed needs. So we have to

1. Take input from STDIN
2. Put that in a temporary file
3. Run erblint with autocorrect on it
4. Emit the file’s content to STDOUT
5. Clean up the temporary file.

Depending on how your setup is configured you might have to tweak the commands a bit (e.g if htmlbeautifier/erblint are not globally installed/available).