Js-beautify: Отступ в тегах Span изменяется неправильно

Созданный на 30 авг. 2016 · 13Комментарии · Источник: beautify-web/js-beautify

_From @hhubik 28 августа 2016 г., 20:37_

Версия VSCode: Код 1.4.0 (6276dcb0ae497766056b4c09ea75be1d76a8b679, 2016-08-04T16: 45: 31.680Z)
Версия ОС: Windows_NT ia32 6.3.9600

Действия по воспроизведению:

Откройте тестовый файл в прикрепленном zip-архиве в VS Code.
Выполните команду «Форматировать код» (Alt-Shift-F).
Линии 68 и 79 должным образом не отступа , как показано на этом снимке

_Копировано из оригинального выпуска: Microsoft / vscode # 11069_

html fixed? bug

Источник

aeschli

Самый полезный комментарий

Да, конечно. Вы можете изменить "html.format.unformatted" в своих настройках. При добавлении он должен автоматически заполниться значениями по умолчанию. Затем удалите span и select и все готово.

HookyQR 21 мар. 2017

👍8 🎉1

Все 13 Комментарий

Мы используем html beautifier из beautify-web / js-beautify.
Пример на http://jsbeautifier.org/ показывает, что проблема связана с форматированием.

aeschli 30 авг. 2016

Можете ли вы предоставить более компактный ввод для воспроизведения?

bitwiseman 30 авг. 2016

@bitwiseman - боюсь, что нет. Форматирование у меня работает большую часть времени. Это не работает только с этим конкретным файлом шаблона. Возможно даже, что проблема связана с некомпактностью ввода.

hhubik 30 авг. 2016

Как уже отмечалось, это файл шаблона 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> s на <div> s, все станет лучше, но теги <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 1 сент. 2016

Я тоже это тестировал. Допускается замена промежутков на блоки div. Шаблон по-прежнему работает в Angular2. Форматирование оператора select по-прежнему не работает, даже с div. По крайней мере, это нужно исправить.

hhubik 2 сент. 2016

Но если подумать ... Я не ожидаю, что beautify подтвердит мой HTML. Я использую для этого другие инструменты. Я просто ожидаю, что это упростит чтение моего кода. Учитывая это, я думаю, что форматирование исходных тестовых данных (с промежутками) также должно работать.

hhubik 2 сент. 2016

Вероятно, это вызвано тем фактом, что span и select находятся в списке по умолчанию для "unformatted" .

HookyQR 21 мар. 2017

👍1

@HookyQR - это то, что я, как пользователь Visual Studio Code, могу изменить? Если да, то как? Я был бы счастлив попробовать это.

hhubik 21 мар. 2017

HookyQR 21 мар. 2017

👍8 🎉1

Спасибо, @HookyQR. Удаление select и span из списка unformatted устранило проблему для меня.

hhubik 21 мар. 2017

Спасибо, @HookyQR. Это верный путь. Замена промежутков на div, какой глупый совет. Это все равно, что предлагать заменить обувь коньками. Технически вы их всех ставите на ноги, не так ли?

Denis-Frolov 8 мая 2017

Я сделал:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Теперь все мои теги хорошо отформатированы.

andreshg112 24 мая 2017

👍4

Кажется, это было решено (по крайней мере, примеры ввода bitewiseman) в v1.8.0-rc4

Вывод для обоих примеров:

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