invalid indentation for html code

[ChandraKantPaliwal]

Description

when i indent code then wrong indentation done in html. In this end tag keep in same line

The results of beautification are not what I expect.
proper indetation like with end tag

Input Before Beautification

This is what the code looked like before:

<lil-spinner ng-show="mycoursesCtrl.isAPICall"></lil-spinner>
<div ng-if="mycoursesCtrl.courses.length > 0">
  <div class="lil-card-fluid-container"
    ng-repeat="_c in mycoursesCtrl.courses">
      <lil-card ng-click="mycoursesCtrl.openCourse(_c.id, _c.type, _c.microCourseType)" thumbnail="_c.thumbnail.thumb"
        course-title="_c.title"
        curator="_c.name"
        meta-information="_c.metaInformation"
        avg-rating="_c.avgRating"
        course-type="_c.courseType || _c.microCourseType"
        published-date="_c.publishedDate">
        </lil-card>
      </div>
</div>

Expected Output

The beautified code should have looked like this:

<lil-spinner ng-show="mycoursesCtrl.isAPICall"></lil-spinner>
<div ng-if="mycoursesCtrl.courses.length > 0">
  <div class="lil-card-fluid-container"
    ng-repeat="_c in mycoursesCtrl.courses">
    <lil-card ng-click="mycoursesCtrl.openCourse(_c.id, _c.type, _c.microCourseType)" thumbnail="_c.thumbnail.thumb"
      course-title="_c.title"
      curator="_c.name"
      meta-information="_c.metaInformation"
      avg-rating="_c.avgRating"
      course-type="_c.courseType || _c.microCourseType"
      published-date="_c.publishedDate">
      </lil-card>
    </div>
</div>

Actual Output

The beautified code actually looked like this:

<lil-spinner ng-show="mycoursesCtrl.isAPICall"></lil-spinner>
<div ng-if="mycoursesCtrl.courses.length > 0">
  <div class="lil-card-fluid-container"
    ng-repeat="_c in mycoursesCtrl.courses">
    <lil-card ng-click="mycoursesCtrl.openCourse(_c.id, _c.type, _c.microCourseType)"
  
      thumbnail="_c.thumbnail.thumb"
      course-title="_c.title"
      curator="_c.name"
      meta-information="_c.metaInformation"
      avg-rating="_c.avgRating"
      course-type="_c.courseType || _c.microCourseType"
      published-date="_c.publishedDate">
      </lil-card>
</div>
</div>

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Editor
3. This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/ChandraKantPaliwal/7de186605549618072eb7c08478f48c5

Checklist

I have:

• Tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• Reloaded (or restarted) Atom to ensure it is not a caching issue
• Searched through existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues
  so I know this is not a duplicate issue
• Filled out the Input, Expected, and Actual sections above or have edited/removed them in a way that fully describes the issue.
• Generated debugging information and added link for debug.md Gist to this issue

[Glavin001]

Thanks for all of the info! I see the beautifier being used is JS Beautify so you should also take a look at https://github.com/beautify-web/js-beautify/issues/ to see if your issue already exists or create a new one.

[ChandraKantPaliwal]

its new issue please help, whats wrong going on with it.

[prettydiff]

The only problem that I see in the output is that the inner closing div tag </div> is not indented. I am not sure why that is. Perhaps what you dislike is that the attributes are indented. I ran this code sample through jsbeautifier.org (since JS Beautify is the beautifier you used in Atom Beautify) and everything looked good there, though attributes are not indented by default.

[ChandraKantPaliwal]

in the .jsbeautifyrc file configuration.
Is any issue in this ?
{
"html": {
"brace_style": "collapse",
"indent_char": " ",
"indent_scripts": "normal",
"indent_size": 2,
"max_preserve_newlines": 1,
"preserve_newlines": true,
"unformatted": ["a", "sub", "sup", "b", "i", "u"],
"wrap_attributes": "force",
"wrap_attributes_indent_size": 2,
"wrap_line_length": 80
},
"css": {
"indent_char": " ",
"indent_size": 2,
end_with_newline: true,
force_indentation: true,
indent_comments: true,
selector_separator_newline: true,
beautify_on_save: true
},
"js": {
"indent_size": 2,
"indent_char": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"jslint_happy": true,
"end_with_comma": true
}
}

[prettydiff]

Your options look pretty basic, so I don't believe they are responsible for any kind of problem.

[starstuffharvestingstarlight]

I'm having the same issue:

Source code input (in a new file set to HTML)

<div>
  <div class="some-very-big-class"
      other-attribute="some -- other complex === attribute">
    <div>
      <custom-tag />
    </div>
  </div>
</div>

Output after beautify:

<div>
  <div class="some-very-big-class"
      other-attribute="some -- other complex === attribute">
    <div>
      <custom-tag />
    </div>
</div> <!-- missing indentation -->
</div>

Very strange, and only started happening after I updated to the latest version. Here's my debug info: https://gist.github.com/starstuffharvestingstarlight/00d298f1d0ac847a3a4f663a0a9255b5

Note that I use force wrap at 100 chars. If I don't force wrap, beautify works as expected:

<div>
  <div class="some-very-big-class" other-attribute="some -- other complex === attribute">
    <div>
      <custom-tag />
    </div>
  </div>
</div>

[starstuffharvestingstarlight]

this issue on jsbeautify seems to be related: beautifier/js-beautify#1103

[ChandraKantPaliwal]

temporarily after changing default beautifier Pretty Diff then it working fine.

[Glavin001]

Looks like js-beautify should be fixed: beautifier/js-beautify#1103
And Pretty Diff should work already as well.

Closing this now.