search

prettier / prettier

Prettier is an opinionated code formatter.
https://prettier.io
MIT License
49.26k stars 4.33k forks source link

HTML Whitespace formatting in wrong behavior #8304

Closed thinh105 closed 4 years ago

thinh105 commented 4 years ago

Prettier 2.0.5 Playground link

Input:

    <div class="navigation-buttons">
      <div class="is-pulled-right">
        <router-link to="/products" class="button"><i class="fa fa-user-circle"></i><span>Shop</span></router-link>
        <routerlink to="/cart" class="button is-primary"><i class="fa fa-shopping-cart"></i><span>{{cartQuantity}}</span></routerlink>
      </div>
    </div>

Output: On Playground with Vue Parser ( not working - don't know why ) on playground

Output: On Playground with html Parser and --html-whitespace-sensitivity : strict
on playground

As you can see in the result below, there is no white space on html text, but they still break in lines

    <div class="navigation-buttons">
      <div class="is-pulled-right">
        <router-link to="/products" class="button"
          ><i class="fa fa-user-circle" /><span>Shop</span></router-link
        >
        <routerlink to="/cart" class="button is-primary"
          ><i class="fa fa-shopping-cart" /><span>{{
            cartQuantity
          }}</span></routerlink
        >
      </div>
    </div>

Expected behavior:

I got this behavior when choosing HTML parser with --html-whitespace-sensitivity : ignore in playground

Also, in VS Code, I can edit manually and Prettier is ok with that ( not undo to that above format )

<div class="navigation-buttons">
  <div class="is-pulled-right">
    <router-link to="/products" class="button">
      <i class="fa fa-user-circle"></i>
      <span>Shop</span>
    </router-link>
    <routerlink to="/cart" class="button is-primary">
      <i class="fa fa-shopping-cart"></i>
      <span>{{ cartQuantity }}</span>
    </routerlink>
  </div>
</div>;
fisker commented 4 years ago

You might wan check this option --html-whitespace-sensitivity

thinh105 commented 4 years ago

You might wan check this option --html-whitespace-sensitivity

thanks, but I see in my code, there is no HTML whitespace, and I can edit manually and Prettier is ok with that ( no reformatting )

In my situation, the HTML text Shop and {{ cartQuantity }} still wrapped by span tag, so there is no HTML whitespace has been inserted unintendedly.

<div class="navigation-buttons">
  <div class="is-pulled-right">
    <router-link to="/products" class="button">
      <i class="fa fa-user-circle"></i>
      <span>Shop</span>
    </router-link>
    <routerlink to="/cart" class="button is-primary">
      <i class="fa fa-shopping-cart"></i>
      <span>{{ cartQuantity }}</span>
    </routerlink>
  </div>
</div>;
fisker commented 4 years ago

Exactly, there is no whitespace, so we have to break in this way. with --html-whitespace-sensitivity=ignore, this is what you want, but not safe, note there is extra space before <i>.

thinh105 commented 4 years ago

Exactly, there is no whitespace, so we have to break in this way. with --html-whitespace-sensitivity=ignore, this is what you want, but not safe, note there is extra space before <i>.

oh, I just see the space before <i> as you pointed.

I got the idea, thank for your help

I will keep what Prettier format :+1: