Js-beautify: Перенос и выравнивание атрибутов html, когда строка достигает длины переноса строки

Созданный на 2 нояб. 2017  ·  12Комментарии  ·  Источник: beautify-web/js-beautify

Описание

Я хотел бы получить комбинацию мощности:
"wrap-attributes": "force-aligned",
"wrap-line-length": 120
Если моя строка достигает длины переноса, она должна обернуть всю строку и выровнять их с предыдущей строкой.

Вход

Код выглядел так до благоустройства:

<p-dataTable
    [value]="data"
    [(selection)]="selectedRows"
    (selectionChange)="onSelectionChange($event)"
    [editable]="editable"
    [selectionMode]="settings.selectionMode"
    [resizableColumns]="settings.resizable"
    [reorderableColumns]="settings.reorderable"
    responsive="true"
    scrollable="true"
    scrollHeight="550px"
    [lazy]="settings.lazy"
    [totalRecords]="totalRecords"
    [paginator]="settings.paginator"
    [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>

Ожидаемый результат

После добавления этой функции код должен выглядеть следующим образом:

<p-dataTable [value]="data" [(selection)]="selectedRows" (selectionChange)="onSelectionChange($event)" [editable]="editable"
             [selectionMode]="settings.selectionMode" [resizableColumns]="settings.resizable" [reorderableColumns]="settings.reorderable"
             responsive="true" scrollable="true" scrollHeight="550px" [lazy]="settings.lazy" [totalRecords]="totalRecords"
             [paginator]="settings.paginator" [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>
html enhancement

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

Примечание по этому поводу: на самом деле я искал комбинацию этих двух настроек, но теперь мне нравится предложенный пример. Что мне нужно, так это то, что VSCode оставляет атрибуты в покое, и когда элемент становится длиннее 120, он будет выравнивать атрибуты по новым строкам, поэтому я хотел бы следующее:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

к:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

Обратите внимание на второй ввод, где следует оставить атрибуты в покое, потому что они не длиннее 120 символов + они уже выровнены.

Итак, что я хотел бы видеть, так это то, что вместо силы убедитесь, что они выровнены в многострочном режиме, и поместите их в многострочный, когда строка превышает 120 символов.

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

+1, мне и моей команде нужна одна и та же функция, и, похоже, это та же функция, что и здесь: https://github.com/beautify-web/js-beautify/issues/1262 .
Я также видел эту точную функцию, запрошенную на VSCode github: https://github.com/Microsoft/vscode/issues/2204 (последний комментарий)

Я немного поиграл с исходным кодом и получил некоторую реализацию, которая, кажется, работает: новая опция для "wrap_attributes" - "aligned", которая не заставляет attrs переноситься, если длина строки не достигнута, и правильно выравнивает их, когда линия завернута.

Может ли что-то подобное работать, @bitwiseman?

Если да, то мы могли бы обсудить детали или я могу открыть PR. (Но, если честно, я не совсем эксперт по открытым исходным кодам и немного запутался в тестах, версии Python и многом другом). Ну, html beautifier не существует в python, так что, возможно, это не проблема :) Так что руководство приветствуется!

@cheerypick
Спасибо, что взялись за реализацию.

Да, вам не нужно беспокоиться о версии Python для изменений в HTML-улучшателе — для этого модуля еще нет реализации Python.

Для тестирования убедитесь, что вы можете запустить сборку и она работает локально. Затем обновите test/data/html/tests.js . Когда вы снова запустите сборку, она повторно создаст тесты, которые можно запустить, из этого файла данных. Вы можете увидеть пример этого в #1158. Если вы хотите сначала попробовать несколько простых тестов, круто. Если вы понимаете, как работает генерация тестов matrix , добавьте новое значение в тесты переноса атрибутов в test/data/html/tests.js#L323 .

В любом случае, не стесняйтесь начинать PR в любое время, и мы можем обсудить это там.

Еще раз спасибо.

(Если вы захотите обновить CONTRIBUTING.md любыми дополнительными инструкциями, которые, по вашему мнению, необходимы, это также приветствуется, но не является обязательным.)

@cheerypick - Также спасибо за то, что заметили дубликат. Пожалуйста, продолжите это обсуждение в #1262.

Примечание по этому поводу: на самом деле я искал комбинацию этих двух настроек, но теперь мне нравится предложенный пример. Что мне нужно, так это то, что VSCode оставляет атрибуты в покое, и когда элемент становится длиннее 120, он будет выравнивать атрибуты по новым строкам, поэтому я хотел бы следующее:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

к:

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

Обратите внимание на второй ввод, где следует оставить атрибуты в покое, потому что они не длиннее 120 символов + они уже выровнены.

Итак, что я хотел бы видеть, так это то, что вместо силы убедитесь, что они выровнены в многострочном режиме, и поместите их в многострочный, когда строка превышает 120 символов.

Visual Studio (не Code) форматирует HTML таким образом (выравнивая, но не принудительно) по умолчанию. Было бы неплохо, если бы Код тоже мог.

Пожалуйста, добавьте эту функцию, чтобы код моего HTML-шаблона не стал слишком длинным.

Это очень желательно. @cheerypick , ты все еще планируешь сделать пиар для этого?

У меня не работает в VSCode.
В файле .vue
Расширения: Prettier, Vetur
:-(

@кристоферд
Не знаю, что вы говорите, пожалуйста, приходите в чат на канале gitter, а не добавляйте комментарии к закрытой проблеме.

Я снова увидел эту проблему после того, как обновил VScode до последней версии. Версия 1.30.2 для Mac OS High Sierra. Он был установлен на автоматический, и вдруг мой код начинает оборачиваться. Пробовал принудительно выравнивать, тоже не работает.

@aybhalala @christoferd Пожалуйста, уточните, что вы видите. Заходите поболтать на Gitter или открыть новый вопрос.

@bitwiseman Прости. Только что понял, что это проблема с плагином Prettier. Спасибо за ответ.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги