Js-beautify: التفاف ومحاذاة سمات html عندما يصل السطر إلى طول خط الالتفاف

تم إنشاؤها على ٢ نوفمبر ٢٠١٧ · 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

مصدر

Helayxa

👍12

التعليق الأكثر فائدة

ملاحظة جانبية حول هذا: كنت أبحث بالفعل عن مزيج من هذين الإعدادين ، لكن الآن أحب المثال المقترح. ما أحتاجه هو أن 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 حرفًا.

dietergeerts في ١٤ فبراير ٢٠١٨

👍20

ال 12 كومينتر

+1 ، أنا وفريقي بحاجة إلى نفس الميزة ، ويبدو أنها نفس الميزة كما هو مطلوب هنا: https://github.com/beautify-web/js-beautify/issues/1262
لقد رأيت هذه الميزة الدقيقة المطلوبة في VSCode github أيضًا: https://github.com/Microsoft/vscode/issues/2204 (التعليق الأخير)

لقد لعبت مع الكود المصدري قليلاً ولدي بعض التنفيذ الذي يبدو أنه يعمل: خيار جديد لـ "wrap_attributes" - "المحاذاة" والذي لا يجبر Attrs على الالتفاف ما لم يتم الوصول إلى طول السطر ، ويقوم بمحاذاةهم بشكل صحيح عند يتم لف الخط.

هل يمكن لشيء كهذا أن يعمل ياbitwiseman؟

إذا كان الأمر كذلك ، فيمكننا مناقشة التفاصيل أو يمكنني فتح العلاقات العامة. (ولكن لأكون صادقًا ، فأنا لست خبيرًا مفتوح المصدر تمامًا وأنا مرتبك بعض الشيء بشأن الاختبارات وإصدار Python وما إلى ذلك). حسنًا ، لا توجد أداة تجميل html في لغة Python ، لذا ربما لا تكون مشكلة :) لذا فإن التوجيه موضع تقدير!

cheerypick في ١٣ نوفمبر ٢٠١٧

تضمين التغريدة
شكرا لأخذ التأرجح في تنفيذ هذا.

نعم ، لا داعي للقلق بشأن إصدار Python لتغييرات أداة تجميل HTML - لا يوجد تطبيق Python لهذه الوحدة حتى الآن.

للاختبار ، تأكد من أنه يمكنك تشغيل الإنشاء وأنه يعمل محليًا. ثم حدِّث test / data / html / tests.js . عند تشغيل الإنشاء مرة أخرى ، فإنه سيعيد إنشاء الاختبارات القابلة للتشغيل من ملف البيانات هذا. يمكنك مشاهدة مثال على ذلك في # 1158. إذا كنت تريد تجربة بعض الاختبارات البسيطة أولاً ، فهذا رائع. إذا كان بإمكانك فهم الطريقة التي يعمل بها إنشاء الاختبار matrix ، فأضف القيمة الجديدة إلى اختبارات التفاف السمة في test / data / html / tests.js # L323 .

مهما كانت الحالة ، لا تتردد في بدء العلاقات العامة وقتما تشاء ويمكننا مناقشتها هناك.

شكرا لك مرة أخرى.

(إذا كنت على استعداد لتحديث CONTRIBUTING.md بأي تعليمات إضافية تشعر بالحاجة إليها ، فسيكون ذلك موضع تقدير أيضًا ولكن ليس مطلوبًا.)

bitwiseman في ١٣ نوفمبر ٢٠١٧

cheerypick - نشكرك أيضًا على ملاحظة النسخة المكررة. من فضلك أكمل هذا النقاش في # 1262.

bitwiseman في ١٣ نوفمبر ٢٠١٧

<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 حرفًا + تمت محاذاتها بالفعل.

dietergeerts في ١٤ فبراير ٢٠١٨

👍20

يقوم Visual Studio (ليس رمزًا) بتنسيق HTML بهذه الطريقة (محاذاة ، ولكن ليس قسريًا) افتراضيًا. سيكون لطيفا إذا كان كود يمكن أيضا.

kspearrin في ٢٧ أبريل ٢٠١٨

يُرجى إضافة الميزة حتى لا يصبح رمز قالب html طويلاً للغاية.

Piping في ٧ مايو ٢٠١٨

هذا مطلوب للغاية. cheerypick هل ما زلت تخطط لإجراء علاقات عامة لهذا الغرض؟

auderer في ٢٨ مايو ٢٠١٨

👍3

لا يعمل معي في VSCode.
في ملف .vue
الامتدادات: أجمل ، فيتور
:-(

christoferd في ٢٩ سبتمبر ٢٠١٨

تضمين التغريدة
لا أعرف ما تقوله ، من فضلك تعال إلى الدردشة على قناة gitter بدلاً من إضافة تعليقات على قضية مغلقة.

bitwiseman في ٢٩ سبتمبر ٢٠١٨

لقد رأيت هذه المشكلة مرة أخرى بعد أن قمت بتحديث VScode إلى أحدث إصدار. الإصدار 1.30.2 في نظام التشغيل Mac OS High Sierra. تم ضبطه على تلقائي وفجأة بدأ الكود الخاص بي في الالتفاف. حاولت محاذاة القوة وأنها لا تعمل أيضا.