AngularJS HTML formatting incorrect #5449

MikaelEdebro · 2018-11-12T13:08:39Z

I'm testing out the new HTML formatting on a AngularJS project at work. But unfortunately it messes up the code. I'm running the latest version of the VSCode plugin.

I'll attach a GIF and the problematic markup for testing:
Imgur

Code:

<div class="row">
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{"statisticsTimeFor" | i18n}} {{"statisticsLatest" | i18n}} {{"statisticsSendReportName" | i18n}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).latestReportTime}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsPollName'|i18n}}  {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollStatusName' | i18n}} <span class="glyphicon glyphicon-info-sign" uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}" tooltip-placement="right"></span></b>
        <p>{{dataStatisticsMap.get(timeUnit).pollIntervalStatusOk ? 'yes' : 'no' | i18n }}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).validationErrorsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount}}</p>
    </div>
</div>

When running the code on prettier.io > Try it out, I'm getting:

SyntaxError: Unexpected token (3:40)
  1 | <div class="row">
  2 |     <div class="col-xs-4 col-md-2">
> 3 |         <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
    |                                        ^
  4 |         <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
  5 |     </div>
  6 |     <div class="col-xs-4 col-md-2" ng-show="overviewSelected">

ikatyang · 2018-11-12T13:17:18Z

There's a Show options on the bottom left, you have to specify the --parser angular.

playground

Prettier 1.15.2
Playground link

--parser angular

Input:

<div class="row">
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{"statisticsTimeFor" | i18n}} {{"statisticsLatest" | i18n}} {{"statisticsSendReportName" | i18n}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).latestReportTime}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsPollName'|i18n}}  {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollStatusName' | i18n}} <span class="glyphicon glyphicon-info-sign" uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}" tooltip-placement="right"></span></b>
        <p>{{dataStatisticsMap.get(timeUnit).pollIntervalStatusOk ? 'yes' : 'no' | i18n }}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).validationErrorsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount}}</p>
    </div>
</div>

Output:

<div class="row">
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsSendReportName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnit).reportsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b
      >{{ "statisticsSendReportName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).reportsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsTimeFor" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ "statisticsSendReportName" | i18n }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnit).latestReportTime }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsEventName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnit).eventsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b
      >{{ "statisticsEventName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).eventsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsPollName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnit).pollsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b
      >{{ "statisticsPollName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).pollsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsPollStatusName" | i18n }}
      <span
        class="glyphicon glyphicon-info-sign"
        uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}"
        tooltip-placement="right"
      ></span
    ></b>
    <p>
      {{
        dataStatisticsMap.get(timeUnit).pollIntervalStatusOk
          ? "yes"
          : ("no" | i18n)
      }}
    </p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b
      >{{ "statisticsValidationErrorName" | i18n }}
      {{ "statisticsLatest" | i18n }} {{ timeUnit }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnit).validationErrorsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b
      >{{ "statisticsValidationErrorName" | i18n }}
      {{ "statisticsLatest" | i18n }} {{ timeUnitSecondary }}</b
    >
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount }}</p>
  </div>
</div>

But unfortunately it messes up the code.

What did you mean "mess up"? what's your expected behavior?

MikaelEdebro · 2018-11-13T10:03:18Z

Ok great! When using parser = angular, the playground got the same result as VS Code plugin.

But what I mean by "mess up". This is the way it formats the <b> tags:

<b
      >{{ "statisticsEventName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}</b
    >

Link to the Playground

ikatyang · 2018-11-13T10:05:18Z

What's your expected output?

MikaelEdebro · 2018-11-13T10:12:58Z

I would expect it not to break the html tags in multiple lines. That only makes sense if there are multiple attributes?!?

I would expect something like this:

<div class="col-xs-4 col-md-2">
    <b>
        {{"statisticsTimeFor" | i18n}} 
        {{"statisticsLatest" | i18n}} 
        {{"statisticsSendReportName" | i18n}}
    </b>
    <p>{{dataStatisticsMap.get(timeUnit).latestReportTime}}</p>
</div>

Hope I'm not coming off too critical. I really think Prettier is an awesome tool, and it's great that you have included HTML in it's arsenal. But in this particular case, the formatting seems a bit off. :)

ikatyang · 2018-11-13T10:20:47Z

You may want to take a look at whitespace-sensitive formatting, that's why we cannot add whitespaces there as it'll break your code, but if you don't care about those whitespaces, just use --html-whitespace-sensitivity ignore.

(There're actually some ignorable whitespaces we didn't take into account, which is tracked in #5439.)

playground with --html-whitespace-sensitivity ignore

Prettier 1.15.2
Playground link

--html-whitespace-sensitivity ignore
--parser angular

Input:

<div class="row">
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{"statisticsTimeFor" | i18n}} {{"statisticsLatest" | i18n}} {{"statisticsSendReportName" | i18n}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).latestReportTime}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsEventName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).eventsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsPollName'|i18n}}  {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).pollsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsPollStatusName' | i18n}} <span class="glyphicon glyphicon-info-sign" uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}" tooltip-placement="right"></span></b>
        <p>{{dataStatisticsMap.get(timeUnit).pollIntervalStatusOk ? 'yes' : 'no' | i18n }}</p>
    </div>
    <div class="col-xs-4 col-md-2">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnit}}</b>
        <p>{{dataStatisticsMap.get(timeUnit).validationErrorsCount}}</p>
    </div>
    <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
        <b>{{'statisticsValidationErrorName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
        <p>{{dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount}}</p>
    </div>
</div>

Output:

<div class="row">
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsSendReportName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnit).reportsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
      {{ "statisticsSendReportName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).reportsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsTimeFor" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ "statisticsSendReportName" | i18n }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnit).latestReportTime }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsEventName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnit).eventsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
      {{ "statisticsEventName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).eventsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsPollName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnit }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnit).pollsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
      {{ "statisticsPollName" | i18n }} {{ "statisticsLatest" | i18n }}
      {{ timeUnitSecondary }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).pollsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsPollStatusName" | i18n }}
      <span
        class="glyphicon glyphicon-info-sign"
        uib-tooltip="{{'statisticsPollStatusTooltip' | i18n }}"
        tooltip-placement="right"
      ></span>
    </b>
    <p>
      {{
        dataStatisticsMap.get(timeUnit).pollIntervalStatusOk
          ? "yes"
          : ("no" | i18n)
      }}
    </p>
  </div>
  <div class="col-xs-4 col-md-2">
    <b>
      {{ "statisticsValidationErrorName" | i18n }}
      {{ "statisticsLatest" | i18n }} {{ timeUnit }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnit).validationErrorsCount }}</p>
  </div>
  <div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
      {{ "statisticsValidationErrorName" | i18n }}
      {{ "statisticsLatest" | i18n }} {{ timeUnitSecondary }}
    </b>
    <p>{{ dataStatisticsMap.get(timeUnitSecondary).validationErrorsCount }}</p>
  </div>
</div>

JLHwung · 2018-11-14T03:08:34Z

The angular parser works good with AngularJS templates, I suggest the issue be closed.

BTW should we document on https://prettier.io/blog/2018/11/07/1.15.0.html that AngularJS template should be parsed with angular parser? One should probably specify --parser angular for *.html given Angular JS template have no naming convention.

ikatyang · 2018-11-14T03:29:24Z

I did mention it in the blog post, the issue here is probably same as #5462 (comment), where Angular did strip whitespaces (insensitive) in some cases.

Unrelated: @JLHwung Would you mind to take look at #5368 (the regression there seems caused by upgrading cjk-regex from v1 to v2)? I did a quick fix in #5402 but I'm not quite sure if it's the proper fix given that I'm not too familiar with unicode. Thanks!

thorn0 · 2018-11-14T15:05:07Z

Unlike Angular, AngularJS doesn't strip any white spaces.

@JLHwung There is at least one incompatibility: #5466

JLHwung · 2018-11-14T15:33:46Z

I did mention it in the blog post, the issue here is probably same as #5462 (comment), where Angular did strip whitespaces (insensitive) in some cases.

By stressing AngularJS versus Angular, I mean they are different framework, though they have similar name and Angular evolves from AngularJS. As it is shown on #5466, they have a slight different grammar.

@ikatyang On the fix in #5402, you did a great job! I have reviewed the code change and do find some rare cases and it should be addressed in #5480.

MikaelEdebro · 2018-11-15T06:55:37Z

I don't know anything about the implementation details, and the 1000 issues that you probably have to face to support every edge case.

But as a user, I would rather prefer that print-width is disregarded if there are uncertanties about how to handle whitespace (rather than breaking up the HTML-elements in multiple lines). In my opinion print-width is not as important for readability in HTML as in JS.

For example, that this:

<div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>{{'statisticsSendReportName'|i18n}} {{"statisticsLatest" | i18n}} {{timeUnitSecondary}}</b>
    <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
</div>

Would become:

<div class="col-xs-4 col-md-2" ng-show="overviewSelected">
    <b>
        {{'statisticsSendReportName' | i18n}} {{'statisticsLatest' | i18n}} {{timeUnitSecondary}}
    </b>
    <p>{{dataStatisticsMap.get(timeUnitSecondary).reportsCount}}</p>
</div>

thorn0 · 2020-05-06T00:22:34Z

I don't see anything that needs discussion or fixing in this issue.
--html-whitespace-sensitivity ignore does what the OP wanted.

ikatyang added the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 12, 2018

no-response bot removed the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 13, 2018

ikatyang added the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 13, 2018

no-response bot removed the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 13, 2018

ikatyang added the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 13, 2018

karptonite mentioned this issue Nov 13, 2018

Don't add space adjacent to html tags in some situations, even when ingonring whitespace sensitivity #5462

Closed

no-response bot removed the status:awaiting response Issues that require answers to questions from maintainers before action can be taken label Nov 15, 2018

thorn0 closed this as completed May 6, 2020

github-actions bot added the locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. label Aug 5, 2020

github-actions bot locked as resolved and limited conversation to collaborators Aug 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AngularJS HTML formatting incorrect #5449

AngularJS HTML formatting incorrect #5449

MikaelEdebro commented Nov 12, 2018 •

edited

ikatyang commented Nov 12, 2018

MikaelEdebro commented Nov 13, 2018 •

edited

ikatyang commented Nov 13, 2018

MikaelEdebro commented Nov 13, 2018 •

edited

ikatyang commented Nov 13, 2018

JLHwung commented Nov 14, 2018 •

edited

ikatyang commented Nov 14, 2018

thorn0 commented Nov 14, 2018 •

edited

JLHwung commented Nov 14, 2018 •

edited

MikaelEdebro commented Nov 15, 2018 •

edited

thorn0 commented May 6, 2020

AngularJS HTML formatting incorrect #5449

AngularJS HTML formatting incorrect #5449

Comments

MikaelEdebro commented Nov 12, 2018 • edited

ikatyang commented Nov 12, 2018

MikaelEdebro commented Nov 13, 2018 • edited

ikatyang commented Nov 13, 2018

MikaelEdebro commented Nov 13, 2018 • edited

ikatyang commented Nov 13, 2018

JLHwung commented Nov 14, 2018 • edited

ikatyang commented Nov 14, 2018

thorn0 commented Nov 14, 2018 • edited

JLHwung commented Nov 14, 2018 • edited

MikaelEdebro commented Nov 15, 2018 • edited

thorn0 commented May 6, 2020

MikaelEdebro commented Nov 12, 2018 •

edited

MikaelEdebro commented Nov 13, 2018 •

edited

MikaelEdebro commented Nov 13, 2018 •

edited

JLHwung commented Nov 14, 2018 •

edited

thorn0 commented Nov 14, 2018 •

edited

JLHwung commented Nov 14, 2018 •

edited

MikaelEdebro commented Nov 15, 2018 •

edited