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:

Spaces inserted at the end of every quoted attribute <div class="hello"> turns into <div class="hello "> Spaces inserted arbitrarily into Angular specific directives <div ng-click="vm.selected = null"> becomes <div ng-click="vm.selected = n ull"> 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?