CODEWITHSUNDEEP
angularjsvisual-studio-code
Patrick Fowler
Patrick Fowler

Reputation: 176

VSCode Format Inserts Spaces and Breaks Angular HTML on some files

For a small subset of HTML Files in my Angular/MEAN Stack app, invoking the Auto Formatter breaks the angular code in a number of very strange ways. The problems boil down into the following major issues:

  1. Spaces inserted at the end of every quoted attribute

    <div class="hello"> turns into <div class="hello ">

  2. Spaces inserted arbitrarily into Angular specific directives

    <div ng-click="vm.selected = null"> becomes <div ng-click="vm.selected = n ull">

  3. Page hierarchy gets lost and there are "cliffs" in the indented code. This seems to be in some way related to span tags nested in div tags.

                    <div class="row ">
                    <div class="col col-xs-6 ">
                        <div class="row ">
                        </div>
                        <div class="row ">
                            <div class="col col-xs-6 text-left label-text ">Endorsements</div>
                            <div class="col col-xs-6 text-right " ng-if="job.endorsements.length ">
                                <span class="endorsement-tile " ng-repeat="e in job.endorsements ">{{e}}<span ng-if="!$last ">, </span> </span>
                            </div>
                            <div class="info-text text-right col col-xs-6 " ng-if="!job.endorsements "><span>- - -</span></div>
                        </div>
    </div>
    <div class="col col-xs-6 ">
        <div class="row ">
            <!-- more content below -->

This seems to reproduce "worst" in my environment. My other developers, using a shared workspace settings.json file, run into some of the indentation issues, but not the rogue space characters issues. The only setting in my user settings.json file is editor.formatOnType: true, and the problem persists if I remove it.

This only affects a subset of files in the project. All have the file type .html, with some being filename.client.view.html, with others being filename.client.template.html. The problem doesn't seem to be specific to either naming type

help?

Upvotes: 1

Views: 2192

Answers (1)

Patrick Fowler
Patrick Fowler

Reputation: 176

Investigation

per the suggestion by Joaozito I tried reinstalling VSCode, wiping ~/Library, and restarting. No Luck.

I then started at the top of the file and identified where the problems started ... Sure enough, I had an extra " in one of my tags!

Problem Tag:

<a ng-click="vm.toggleFilter('today')""><span class="list-text"> Today </span></a>

Fixed Tag:

<a ng-click="vm.toggleFilter('today')"><span class="list-text"> Today </span></a>

Looking closer, the second " is white, but the problem doesn't show up in any highlighting or F8 searching - which would be nice...

Problem solved

Additional Problems

There's an additional problem that comes up with angular and/or bootstrap code, or really whenever you have really long tags in your code. The problem comes with "non-structural" tags, such as <span>, <button>, etc, and how VS Code handles them in auto-formatting.

Added in one of the more recent versions of VSCode, you can enable which tags are ignored for formatting.

I've changed the default (found in the command palette under > Workspace Settings) from:

// List of tags, comma separated, that shouldn't be reformatted. 'null' defaults to all tags listed at https://www.w3.org/TR/html5/dom.html#phrasing-content.
"html.format.unformatted": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var",

to

"html.format.unformatted": "a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, img, input, kbd, label, map, object, q, samp, script, select, small, strong, sub, sup, textarea, tt, var"

Hope that helps someone!

Upvotes: 2

Related Questions