Js-beautify: Bungkus dan ratakan atribut html saat garis mencapai panjang garis bungkus

Dibuat pada 2 Nov 2017 · 12Komentar · Sumber: beautify-web/js-beautify

Keterangan

Saya ingin mendapatkan kombinasi kekuatan:
"wrap-attributes": "force-aligned",
"wrap-line-length": 120
Jika garis saya mencapai panjang garis bungkus, itu harus membungkus seluruh garis dan menyelaraskannya dengan baris sebelumnya.

Memasukkan

Kodenya terlihat seperti ini sebelum mempercantik:

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

Keluaran yang diharapkan

Kode akan terlihat seperti ini setelah mempercantik dengan fitur itu:

<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

Sumber

Helayxa

👍12

Komentar yang paling membantu

Catatan tambahan tentang ini: Saya sebenarnya mencari kombinasi dari dua pengaturan itu, tetapi sekarang seperti contoh yang diusulkan. Yang saya butuhkan adalah VSCode meninggalkan atribut saja, dan ketika elemen menjadi lebih panjang dari 120, itu akan menyelaraskan atribut pada baris baru, jadi yang saya inginkan adalah sebagai berikut:

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

ke:

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

Perhatikan input kedua, di mana atributnya harus dibiarkan saja, karena tidak lebih dari 120 karakter + sudah disejajarkan.

Jadi yang ingin saya lihat adalah alih-alih gaya, pastikan mereka sejajar saat menggunakan multiline, dan letakkan multiline saat garis melebihi 120 karakter.

dietergeerts pada 14 Feb 2018

👍20

Semua 12 komentar

+1, saya dan tim saya membutuhkan fitur yang sama, dan sepertinya fitur tersebut sama seperti yang diminta di sini: https://github.com/beautify-web/js-beautify/issues/1262
Saya melihat fitur persis ini diminta di VSCode github juga: https://github.com/Microsoft/vscode/issues/2204 (komentar terakhir)

Saya bermain dengan kode sumber sedikit dan memiliki beberapa implementasi yang tampaknya berfungsi: opsi baru untuk "wrap_attributes" - "aligned" yang tidak memaksa attrs untuk membungkus kecuali panjang garis tercapai, dan menyelaraskannya dengan benar ketika garis dibungkus.

Bisakah sesuatu seperti ini berfungsi, @bitwiseman?

Jika demikian, kita bisa mendiskusikan detailnya atau saya bisa membuka PR. (Tapi sejujurnya, saya bukan ahli open source dan agak bingung tentang tes dan versi python dan yang lainnya). Nah, html beautifier tidak ada di python jadi mungkin itu bukan masalah :) Jadi panduan sangat dihargai!

cheerypick pada 13 Nov 2017

@cheerypick
Terima kasih telah mengambil ayunan dalam menerapkan ini.

Ya, Anda tidak perlu khawatir tentang versi python untuk perubahan HTML beautifier - belum ada implementasi python untuk modul itu.

Untuk pengujian, pastikan Anda dapat menjalankan build dan berfungsi secara lokal. Kemudian perbarui test/data/html/tests.js . Saat Anda menjalankan build lagi, itu akan membuat ulang pengujian yang dapat dijalankan dari file data tersebut. Anda dapat melihat contohnya di #1158 . Jika Anda ingin mencoba beberapa tes sederhana terlebih dahulu, keren. Jika Anda dapat memahami cara kerja pembuatan pengujian matrix , tambahkan nilai baru Anda ke pengujian bungkus atribut di test/data/html/tests.js#L323 .

Apapun masalahnya jangan ragu untuk memulai PR kapan pun Anda mau dan kita bisa berdiskusi di sana.

Terima kasih lagi.

(Jika Anda bersedia memperbarui CONTRIBUTING.md dengan instruksi tambahan apa pun yang Anda rasa diperlukan, itu juga akan dihargai tetapi tidak diperlukan.)

bitwiseman pada 13 Nov 2017

@cheerypick - Juga, terima kasih telah mencatat duplikatnya. Silakan lanjutkan diskusi ini di #1262.

bitwiseman pada 13 Nov 2017

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

ke:

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

Perhatikan input kedua, di mana atributnya harus dibiarkan saja, karena tidak lebih dari 120 karakter + sudah disejajarkan.

Jadi yang ingin saya lihat adalah alih-alih gaya, pastikan mereka sejajar saat menggunakan multiline, dan letakkan multiline saat garis melebihi 120 karakter.

dietergeerts pada 14 Feb 2018

👍20

Visual Studio (bukan Kode) memformat HTML dengan cara ini (sejajar, tetapi tidak dipaksakan) secara default. Akan lebih baik jika Code juga bisa.

kspearrin pada 27 Apr 2018

Silakan tambahkan fitur tersebut agar kode template html saya tidak menjadi terlalu panjang.

Piping pada 7 Mei 2018

Ini sangat diinginkan. @cheerypick apakah Anda masih berencana membuat PR untuk ini?

auderer pada 28 Mei 2018

👍3

Tidak bekerja untuk saya di VSCode.
Dalam file .vue
Ekstensi: Lebih Cantik, Vetur
:-(

christoferd pada 29 Sep 2018

@christoferd
Tidak tahu apa yang Anda katakan, silakan datang mengobrol di saluran gitter daripada menambahkan komentar ke masalah yang ditutup.

bitwiseman pada 29 Sep 2018

Saya melihat masalah ini lagi setelah saya memperbarui VScode ke versi terbaru. Versi 1.30.2 di Mac OS High Sierra. Itu disetel ke otomatis dan tiba-tiba kode saya mulai membungkus. Mencoba menyelaraskan kekuatan dan tidak berhasil juga.