Js-beautify: 跨度标签无法正确缩进

创建于 2016-08-30 · 13评论 · 资料来源: beautify-web/js-beautify

_从@hhubik于2016年8月28日20：37_

VSCode版本：代码1.4.0（6276dcb0ae497766056b4c09ea75be1d76a8b679，2016-08-04T16：45：31.680Z）
操作系统版本：Windows_NT ia32 6.3.9600

重现步骤：

在VS Code中的附件zip存档中打开测试文件。
执行“格式化代码”命令（Alt-Shift-F）。
如快照所示，第68和79行没有正确缩进

_从原始发行版复制：Microsoft / vscode＃11069_

html fixed? bug

资料来源

aeschli

最有用的评论

是的，肯定有。您可以在设置中编辑"html.format.unformatted" 。添加时，它将自动使用默认值填充。然后删除span和select ，您就可以开始了。

HookyQR 于 2017-03-21

👍8 🎉1

所有13条评论

我们正在使用来自beautify-web / js-beautify的html beautifier。
在http://jsbeautifier.org/上尝试该示例将表明问题出在格式化程序上。

aeschli 于 2016-08-30

您能提供更紧凑的repro输入吗？

bitwiseman 于 2016-08-30

@bitwiseman-恐怕不是。格式化大多数时候对我有用。该特定模板文件只会失败。甚至可能是问题与输入不紧凑有关。

hhubik 于 2016-08-30

如前所述，这是一个Angular 2模板文件，不是有效的html，因此这可能是问题的一部分。如果您剔除Angular，则会有所改善。

但是看起来主要问题是span标签。此输入也代表了问题所在：

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <span class="ql-formats">
                            <select class="ql-header">
                                <option selected></option>
                                <option value="1"></option>
                                <option value="2"></option>
                                <option value="3"></option>
                            </select>
                        </span>
                <span class="ql-formats">
        <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                                  <button class="ql-strike"></button>
                        </span>
                <span class="ql-formats"> 
                            <button class="ql-list" value="ordered"></button> 
                            <button class="ql-list" value="bullet"></button> 
                        </span>
                <span class="ql-formats"> 
                     <select class="ql-align"> 
 <option selected></option> 
                         <option value="center"></option> 
                         <option value="right"></option> 
                         <option value="justify"></option> 
                     </select> 
                 </span>
            </header>
        </p-editor>
    </div>
</div>

如果将<span>替换<div>情况会变好，但<select>标记似乎也会复制：

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <div class="ql-formats">
                    <select class="ql-header">
                                <option selected></option>
                                <option value="1"></option>
                                <option value="2"></option>
                                <option value="3"></option>
                            </select>
                </div>
                <div class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </div>
                <div class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </div>
                <div class="ql-formats">
                    <select class="ql-align"> 
 <option selected></option> 
                         <option value="center"></option> 
                         <option value="right"></option> 
                         <option value="justify"></option> 
                     </select>
                </div>
            </header>
        </p-editor>
    </div>
</div>

bitwiseman 于 2016-09-01

我也测试过用div替换范围是可以的。该模板仍可在Angular2中使用。即使使用div，select语句的格式仍然不起作用。因此，至少应该解决该问题。

hhubik 于 2016-09-02

不过，请三思而后行……我不希望通过美化来验证我的HTML。我为此使用其他工具。我只是希望它可以使我的代码易于阅读。鉴于此，我认为格式化原始测试数据（带有跨度）也应该起作用。

hhubik 于 2016-09-02

这可能是由于span和select在"unformatted"的默认列表中引起的。

HookyQR 于 2017-03-21

👍1

@HookyQR是我作为Visual Studio Code用户的可以更改的内容吗？如果是这样，怎么办？我很乐意尝试。

hhubik 于 2017-03-21

是的，肯定有。您可以在设置中编辑"html.format.unformatted" 。添加时，它将自动使用默认值填充。然后删除span和select ，您就可以开始了。

HookyQR 于 2017-03-21

👍8 🎉1

谢谢@HookyQR。从unformatted列表中删除select和span可以解决我的问题。

hhubik 于 2017-03-21

谢谢@HookyQR。这肯定是要走的路。用divs取代spans是一个愚蠢的建议。这就像建议用冰鞋代替鞋子。从技术上讲，您是全力以赴吗？

Denis-Frolov 于 2017-05-08

我做了：
"html.format.contentUnformatted": "", "html.format.unformatted": "",

现在，我所有的标签都已正确格式化。

andreshg112 于 2017-05-24

👍4

在v1.8.0-rc4中，这似乎已得到解决（至少是bitewiseman输入示例）。

两个示例的输出：

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <div class="ql-formats">
                    <select class="ql-header">
                        <option selected></option>
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                    </select>
                </div>
                <div class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </div>
                <div class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </div>
                <div class="ql-formats">
                    <select class="ql-align">
                        <option selected></option>
                        <option value="center"></option>
                        <option value="right"></option>
                        <option value="justify"></option>
                    </select>
                </div>
            </header>
        </p-editor>
    </div>
</div>

@aeschli请看一下并在http://jsbeautifier.org/上进行验证

MacKLess 于 2018-08-04

此页面是否有帮助？

0 / 5 - 0 等级

Js-beautify: 跨度标签无法正确缩进

最有用的评论

所有13条评论

相关问题