New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird behavior with HTML elements with children and long `print-width` (parser Vue and HTML) #5595

Closed
Kocal opened this Issue Dec 4, 2018 · 0 comments

Comments

Projects
None yet
2 participants
@Kocal

Kocal commented Dec 4, 2018

Prettier 1.15.3
Playground link

--parser vue
--print-width 180

Input:

<template>
  <span v-if="true === true">
    <i class="fa fa-refresh fa-spin" />
    <i class="fa fa-refresh fa-spin" />
    <i class="fa fa-refresh fa-spin" />
  </span>
  
  <div v-if="true === true">
    <i class="fa fa-refresh fa-spin" />
  </div>
  
  <li v-for="i in visiblePages" :key="i" :class="{disabled: i === -1 || page === i}">
    <a v-if="i !== -1" href="#" @click.prevent="select(i)">
      {{ i }}
    </a>
    <span v-else>
      <slot name="ellipsis">&hellip;</slot>
    </span>
  </li>
</template>

Output:

<template>
  <span v-if="true === true"> <i class="fa fa-refresh fa-spin" /> <i class="fa fa-refresh fa-spin" /> <i class="fa fa-refresh fa-spin" /> </span>

  <div v-if="true === true"><i class="fa fa-refresh fa-spin" /></div>

  <li v-for="i in visiblePages" :key="i" :class="{ disabled: i === -1 || page === i }">
    <a v-if="i !== -1" href="#" @click.prevent="select(i)"> {{ i }} </a> <span v-else> <slot name="ellipsis">&hellip;</slot> </span>
  </li>
</template>

Expected behavior:

The expected behavior may not be strictly equals to the input, but v-if and v-else should not be in a single line.
Also, tags with one or multiple children already correctly indented (like the first <span> with the three <i> should not be modified I think 🤔 :

<template>
  <span v-if="true === true">
    <i class="fa fa-refresh fa-spin" />
    <i class="fa fa-refresh fa-spin" />
    <i class="fa fa-refresh fa-spin" />
  </span>
  
  <div v-if="true === true">
    <i class="fa fa-refresh fa-spin" />
  </div>
  
  <li v-for="i in visiblePages" :key="i" :class="{disabled: i === -1 || page === i}">
    <a v-if="i !== -1" href="#" @click.prevent="select(i)">
      {{ i }}
    </a>
    <span v-else>
      <slot name="ellipsis">&hellip;</slot>
    </span>
  </li>
</template>

Maybe related to #5385 and #5441?
This issue is present in 1.15.3, 1.15.2, 1.15.1 and 1.15.0, but not in 1.14.3.

I don't think this is really expected since actually output is not prettier than input (IMO). I tried to change --html-whitespace-sensitivity but nope.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment