Js-beautify: जब लाइन रैप-लाइन-लम्बाई तक पहुंचती है तो एचटीएमएल विशेषताओं को लपेटें और संरेखित करें

को निर्मित 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

स्रोत

Helayxa

👍12

सबसे उपयोगी टिप्पणी

इस पर एक साइड नोट: मैं वास्तव में उन दो सेटिंग्स के संयोजन की तलाश में था, लेकिन अब प्रस्तावित उदाहरण की तरह। मुझे जो चाहिए वह यह है कि वीएससीओडी अकेले विशेषताओं को छोड़ देता है, और जब तत्व 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 14 फ़र॰ 2018

👍20

सभी 12 टिप्पणियाँ

+1, मुझे और मेरी टीम को समान सुविधा की आवश्यकता है, और ऐसा लगता है कि यह वही सुविधा है जैसा यहां अनुरोध किया गया है: https://github.com/beautify-web/js-beautify/issues/1262
मैंने VSCode जीथब पर भी अनुरोध की गई यह सटीक सुविधा देखी: https://github.com/Microsoft/vscode/issues/2204 (अंतिम टिप्पणी)

मैंने स्रोत कोड के साथ थोड़ा सा खेला और कुछ कार्यान्वयन है जो काम करता प्रतीत होता है: "wrap_attributes" - "गठबंधन" के लिए एक नया विकल्प जो एटीआर को तब तक लपेटने के लिए मजबूर नहीं करता जब तक कि रेखा की लंबाई तक नहीं पहुंच जाती है, और उन्हें ठीक से संरेखित करता है जब लाइन लपेटी गई है।

क्या ऐसा कुछ काम कर सकता है, @bitwiseman?

यदि हां, तो हम विवरण पर चर्चा कर सकते हैं या मैं एक पीआर खोल सकता हूं। (लेकिन ईमानदार होने के लिए, मैं बिल्कुल ओपन सोर्स विशेषज्ञ नहीं हूं और परीक्षणों और पायथन संस्करण और क्या नहीं के बारे में थोड़ा उलझन में हूं)। खैर, html ब्यूटिफायर अजगर में मौजूद नहीं है, इसलिए शायद यह कोई मुद्दा नहीं है :) तो मार्गदर्शन की सराहना की जाती है!

cheerypick 13 नव॰ 2017

@cheerypick
इसे लागू करने पर जोर देने के लिए धन्यवाद।

हाँ, आपको HTML ब्यूटिफायर परिवर्तनों के लिए अजगर संस्करण के बारे में चिंता करने की आवश्यकता नहीं है - उस मॉड्यूल के लिए अभी तक कोई अजगर कार्यान्वयन नहीं है।

परीक्षण के लिए, सुनिश्चित करें कि आप बिल्ड चला सकते हैं और यह स्थानीय रूप से काम करता है। फिर test/data/html/tests.js अपडेट करें। जब आप बिल्ड को फिर से चलाते हैं, तो यह उस डेटा फ़ाइल से चलने योग्य परीक्षणों को पुन: उत्पन्न करेगा। इसका उदाहरण आप #1158 में देख सकते हैं। यदि आप पहले कुछ सरल परीक्षण आज़माना चाहते हैं, तो बढ़िया। यदि आप matrix परीक्षण पीढ़ी के काम करने के तरीके को समझ सकते हैं, तो test/data/html/tests.js#L323 पर विशेषता रैप परीक्षणों में अपना नया मान जोड़ें।

जो भी मामला हो, जब भी आप चाहें पीआर शुरू करने के लिए स्वतंत्र महसूस करें और हम वहां चर्चा कर सकते हैं।

एक बार फिर धन्यवाद।

(यदि आप किसी भी अतिरिक्त निर्देश के साथ CONTRIBUTING.md को अपडेट करने के इच्छुक हैं, तो आपको लगता है कि इसकी भी सराहना की जाएगी लेकिन इसकी आवश्यकता नहीं है।)

bitwiseman 13 नव॰ 2017

@cheerypick - साथ ही, डुप्लिकेट को नोट करने के लिए धन्यवाद। कृपया इस चर्चा को #1262 में जारी रखें।

bitwiseman 13 नव॰ 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>

प्रति:

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

dietergeerts 14 फ़र॰ 2018

👍20

विजुअल स्टूडियो (कोड नहीं) डिफ़ॉल्ट रूप से एचटीएमएल को इस तरह से प्रारूपित करता है (गठबंधन, लेकिन मजबूर नहीं)। अच्छा होगा अगर कोड भी हो सकता है।

kspearrin 27 अप्रैल 2018

कृपया सुविधा जोड़ें ताकि मेरा एचटीएमएल टेम्पलेट कोड बहुत लंबा न हो जाए।

Piping 7 मई 2018

यह अत्यधिक वांछित है। @cheerypick क्या आप अभी भी इसके लिए पीआर बनाने की योजना बना रहे हैं?

auderer 28 मई 2018

👍3

VSCode में मेरे लिए काम नहीं कर रहा।
.vue फ़ाइल में
एक्सटेंशन: प्रीटियर, वेटुर
:-(

christoferd 29 सित॰ 2018

@christoferd
पता नहीं आप क्या कह रहे हैं, कृपया किसी बंद मुद्दे पर टिप्पणी जोड़ने के बजाय गटर चैनल पर चैट करें।

bitwiseman 29 सित॰ 2018

वीएसकोड को नवीनतम संस्करण में अपडेट करने के बाद मैंने इस मुद्दे को फिर से देखा। मैक ओएस हाई सिएरा पर संस्करण 1.30.2। इसे ऑटो पर सेट किया गया था और अचानक मेरा कोड रैप करना शुरू कर देता है। बल संरेखित करने की कोशिश की और यह भी काम नहीं करता है।

aybhalala 9 जन॰ 2019

@aybhalala @christoferd कृपया आप जो देख रहे हैं उसके बारे में विशिष्ट रहें। गटर पर चैट करें या एक नया मुद्दा खोलें।

bitwiseman 9 जन॰ 2019

@bitwiseman क्षमा करें। बस पता चला कि यह प्रीटीयर प्लगइन के साथ एक समस्या थी। उत्तर देने के लिये धन्यवाद।