Pat Fowler Pat Fowler - 1 month ago 27
AngularJS Question

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?

Answer

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!