Js-beautify: Lines are not un-indented correctly when attributes are wrapped

Created on 5 Jan 2017 · 23Comments · Source: beautify-web/js-beautify

Description

Indenting is broken whenever attribute wrapping happens.

Using js-beautify v1.6.8.

Input

The code looked like this before beautification:

<div first second>content</div>
<div>content</div>

Expected Output

The code should have looked like this after beautification:

<div first 
     second>content</div>
<div>content</div>

Actual Output

The code actually looked like this after beautification:

<div first
     second>content</div>
    <div>content</div>

Steps to Reproduce

Beautify the code

Environment

OS: MacOS

Settings

Example:

{
    "wrap_attributes": "force-aligned"
}

Note: wrap_attributes doesn't have to be set to force-aligned. Any wrapping (excluding "force-expand-multiline") introduces, including if "auto" caused the wrapping will demonstrate this issue.

html bug

Source

HookyQR

👍9

Most helpful comment

Found the problem. Fixing now.

HookyQR on 10 Feb 2017

❤2 🎉2

All 23 comments

I'm experiencing the same issue (via atom-beautify #735 )

<p attr1 attr2 attr3>
  text
</p>

turns into

<p attr1
    attr2
    attr3>
  text
  </p>

my force wrap is on

starstuffharvestingstarlight on 6 Jan 2017

Same here, the code just keeps getting more and more indented up until the last moment. It's impossible to use this beautifier anymore like this, I have to manually format the code :/

<nav id="header"
  class="navbar navbar-default">
  <div class="header-container container-fluid">
    <div class="logo-container navbar-header">
      <a ui-sref="stats"
        class="navbar-brand pws-icon pws-pws"></a>
    </div>
    <div class="header-contents collapse navbar-collapse">
      <ul class="tab-list nav navbar-nav">
        <li class="tab tab-prospects"
          ui-sref-active="active">
          <a ui-sref="stats">
            Stats
          </a>
          </li>
          <li class="tab tab-prospects"
            ui-sref-active="active">
            <a ui-sref="upload">
              Importer
            </a>
            </li>
            <li class="tab tab-prospects"
              ui-sref-active="active">
              <a ui-sref="territories">
                Territory Assignment
              </a>
              </li>

      </ul>
    </div>
  </div>
  </nav>

chenasraf on 10 Jan 2017

👍2

I can confirm this bug, randomly started happening.
Whenever a tag' attributes wraps, the inner content starts to indent incorrectly.

[edit]
I had to disable this plugin to resume my work until a fix is delivered =/

renatoaraujoc on 10 Jan 2017

same here! =/

matheusdavidson on 31 Jan 2017

@bitwiseman Is anyone working on this? This is a pretty popular package and this is a pretty big issue... I'd love to see it fixed :( unfortunately I'm not sure I know what to change to contribute the code myself. Maybe some pointers?

chenasraf on 31 Jan 2017

seems like removing "wrap_attributes": "force" in html from the .jsbeautifyrc file solves the problem

matheusdavidson on 31 Jan 2017

@chenasraf - I would love to see this fixed. See Contributing.md for instructions on building locally.
Pull request #1104 shows what a good change looks like: add entries totest/data/html/tests.js, update the product code, and build (the changes to the generated files are done automatically).

bitwiseman on 31 Jan 2017

@matheusdavidson - that is good to know. @chenasraf - you'll want to add test to the matrix that already tests the wrap_attributes option.

bitwiseman on 31 Jan 2017

Anyone actually working on this? Too many forks to check them all. Maybe I can help.

kf-ireneuszpatalas on 3 Feb 2017

@kf-ireneuszpatalas I have not had time to work on it, and @chenasraf is the only other person who has expressed interest.

bitwiseman on 3 Feb 2017

@bitwiseman Seems that adding multi_parser.unindent() after js/lib/beautify-html.js:980 fixes this issue, though I'm not sure if this fits there logic-wise, what conditions to add, etc... If you still want me to take care of it it will take a few days 'til I get enough free time to go over the basics of what goes on in the package. Either that or maybe someone else want to take the reins

chenasraf on 5 Feb 2017

@chenasraf - that causes multiple tests to fail before I even do anything else. Yes, I still want you to address this if you can.

bitwiseman on 6 Feb 2017

@chenasraf, @bitwiseman. I have some time to take a look tomorrow.

HookyQR on 10 Feb 2017

Found the problem. Fixing now.

HookyQR on 10 Feb 2017

❤2 🎉2

PR submitted

HookyQR on 10 Feb 2017

@HookyQR - Thanks much! Merged and published.

bitwiseman on 11 Feb 2017

Would it be possible to extend the options of wrapping with "auto-align" ??

"force-align" will force wrapping + aligning them...

but let say i don't want to wrap EVERY SINGLE HTML ELEMENT, but only the long ones - and then do them manually ..

so, "auto-align" would only align those that are already wrapped.

Montago on 8 Jun 2017

@Montago - Please open a new issue describing what you want, including inputs, outputs, etc.

bitwiseman on 8 Jun 2017

@bitwiseman

there's already one open with the functionality i seek: https://github.com/beautify-web/js-beautify/issues/1125

Montago on 9 Jun 2017

I have just installed this and I'm getting the indentation issue with grunt and the following option: wrapAttributes: 'force-expand-multiline'
I'm running v1.7.5
Thanks