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)