search

brodycj / prettierx

a less opinionated fork of Prettier code formatter
MIT License
209 stars 22 forks source link

[prettierX] better HTML whitespace sensitivity? #667

Open brodycj opened 3 years ago

brodycj commented 3 years ago

https://github.com/prettier/prettier/issues/11110

Prettier 2.3.1 Playground link

--parser html
--print-width 40

Input:

<!DOCTYPE html>
<HTML CLASS="no-js mY-ClAsS">
  <HEAD>
    <META CHARSET="utf-8">
    <TITLE>My tITlE</TITLE>
    <META NAME="description" content="My CoNtEnT">
  </HEAD>
  <body>
    <button data-attr1 data-attr2 data-attr3>My Button</button>
    <span data-attr1 data-attr2 data-attr3>My Button</span>
  </body>
</HTML>

Output:

<!DOCTYPE html>
<html class="no-js mY-ClAsS">
  <head>
    <meta charset="utf-8" />
    <title>My tITlE</title>
    <meta
      name="description"
      content="My CoNtEnT"
    />
  </head>
  <body>
    <button
      data-attr1
      data-attr2
      data-attr3
    >
      My Button
    </button>
    <span
      data-attr1
      data-attr2
      data-attr3
      >My Button</span
    >
  </body>
</html>

Expected behavior: Based upon the documentation for HTML Whitespace Sensitivity, <button> elements should be formatted similar to <span> elements by default. Currently, buttons will have newlines added by the formatter and the textContent of the button will contain the additional leading and trailing space. It's really minor, but a bit annoying.

Got 👍 5 so far

HarisHashim commented 3 years ago

This look related to https://github.com/prettier/prettier/issues/5377 in the main prettier repo.

I got to this topic after using prettier plugin in vscode. Seeing how ugly it is. It format a perfectly fine vue template 

<example-component title="Example component" active :todos="todos" :meta="meta"></example-component>

to 

    <example-component
      title="Example component"
      active
      :todos="todos"
      :meta="meta"
    ></example-component>

I am hoping that prettierx already fix it. But so far no cigar!