Formatting issues in HTML document editing with zed editor！

[sagexiang]

I don’t like automatic formatting when saving an HTML document edited with zed editor. I don’t want to automatically add “/” to meta, img or link tags; the class attribute value “block” is originally at the front but goes to the end after automatic formatting. Went...The format style like Atom is very beautiful! how to solve it?
Thank you !

[sagexiang]

I like the formatting style of Atom.

[fl0werpowers]

Seems like Zed uses Prettier by default for formatting html, and addition of trailing slashes in spite of HTML standards is a long-standing issue with Prettier in particular. The workaround for this currently would be specifying an alternative formatter in settings, such as, for example, js-beautify, which you'll have to either install globally or include with your project.

[waldirbertazzijr]

Unrelated to @sagexiang question but I got here from a Google search on how to make the available width bigger than 80 on zed while saving with auto format on.

If anyone is looking for this:

"language_overrides": {
    "HTML": {
        "prettier": {
            "printWidth": 120
        }
    }
}

More option on Prettier API here.

[xpe]

@waldirbertazzijr Where is it documented that using "prettier" as a key works as shown above?

[waldirbertazzijr]

@xpe I was playing with the autocomplete. With the help of @fl0werpowers comment I figured out that prettier was actually the name of the parser.

[nevadascout]

The printWidth option doesn't seem to exist anymore, and adding it to my settings file as suggested here breaks the formatter so it doesn't work at all anymore.

The way to do this now is to set preferred_line_length like this:

"languages": {
  "HTML": {
    "preferred_line_length": 120
  }
}

Alternatively you could set the max_line_length in an editorconfig file as this is also supported by Prettier (and will be supported by Zed in the near future source)

[lukejans]

@sagexiang The workaround I found was to just not use prettier. I'm using superHTML through the superHTML zed extension. This works almost exactly how you are describing you want prettier to work and you can read more about superHTML here. Here Is the configuration I found that works best (for some reason the configuration on the superHTML README page prevents the VSCode lsp from giving suggestions).

{
  "languages": {
    "HTML": {
      "formatter": { "language_server": { "name": "superhtml" } }
    }
  }
}

[remixer-dec]

Unfortunately superHTML is completely unconfigurable and in very early stages of development
For my case I ended up with this:

  "languages": {
    "HTML": {
      "prettier": {
        "allowed": false
      },
      "language_servers": ["vscode-html-language-server", "vtsls"]
    }
  }