研究

Question

对于我的Angular / MEAN Stack应用程序中的一小部分HTML文件，调用Auto Formatter会以许多非常奇怪的方式破坏角度代码。问题归结为以下几个主要问题：

在每个引用属性
的末尾插入的空格
<div class="hello">变为<div class="hello ">
将空格任意插入Angular特定指令

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

页面层次结构丢失，有“悬崖”和＃34;在缩进的代码中。这似乎与嵌套在span标记中的div标记有某种关联。

                <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 -->

这似乎重现了最糟糕的＆＃34;在我的环境中。我的其他开发人员使用共享工作区settings.json文件遇到了一些缩进问题，但没有遇到流氓space字符问题。我的用户settings.json文件中的唯一设置是editor.formatOnType: true，如果我将其删除，则问题仍然存在。

这仅影响项目中的文件子集。所有文件类型都为.html，其中一些为filename.client.view.html，其他为filename.client.template.html。这个问题似乎并不特定于命名类型

帮助？

Answer 1

研究

根据Joaozito的建议我尝试重新安装VSCode，擦除〜/ Library，然后重新启动。没有运气。

然后我从文件的顶部开始，确定问题的起始位置......果然，我的一个标签中有一个额外的"！

问题标记：

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

固定标签：

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

仔细观察，第二个"是白色的，但问题不会出现在任何突出显示或F8搜索中 - 这会很好......

问题解决了

其他问题

还有一个问题是角度和/或引导代码，或者只要代码中有很长的标签。问题是“非结构”标记，例如<span>，<button>等，以及VS代码如何在自动格式化中处理它们。

在最新版本的VSCode中添加了一个，您可以启用格式化时忽略哪些标记。

我已经改变了默认值（在> Workspace Settings下的命令面板中找到）：

// 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",

到

"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"

希望能帮助别人！

VSCode格式在某些文件上插入空格并中断Angular HTML

1 个答案:

研究

问题标记：

固定标签：

其他问题