Js-beautify: علامات السبان لا تعيد المسافة البادئة بشكل صحيح

تم إنشاؤها على ٣٠ أغسطس ٢٠١٦ · 13تعليقات · مصدر: beautify-web/js-beautify

_ Fromhubik في 28 أغسطس 2016 20:37_

إصدار VSCode: كود 1.4.0 (6276dcb0ae497766056b4c09ea75be1d76a8b679، 2016-08-04T16: 45: 31.680Z)
إصدار نظام التشغيل: Windows_NT ia32 6.3.9600

خطوات الاستنساخ:

افتح ملف الاختبار في أرشيف zip المرفق في VS Code.
نفذ أمر "Formate Code" (Alt-Shift-F).
لم يتم وضع مسافة بادئة للسطرين 68 و 79 بشكل صحيح كما هو موضح في هذه اللقطة

_النسخ من الإصدار الأصلي: Microsoft / vscode # 11069_

html fixed? bug

مصدر

aeschli

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

نعم ، هناك بالتأكيد. يمكنك تعديل "html.format.unformatted" في إعداداتك. يجب أن تملأ تلقائيًا بالإعدادات الافتراضية عند إضافتها. ثم قم بإزالة span و select وأنت على ما يرام.

HookyQR في ٢١ مارس ٢٠١٧

👍8 🎉1

ال 13 كومينتر

نحن نستخدم مُجمل html من beautify-web / js-beautify.
توضح تجربة المثال الموجود على

aeschli في ٣٠ أغسطس ٢٠١٦

هل يمكنك توفير مدخلات repro أكثر إحكاما؟

bitwiseman في ٣٠ أغسطس ٢٠١٦

bitwiseman - لا أخشى ذلك. التنسيق يعمل معي معظم الوقت. فشل فقط مع ملف القالب هذا. يمكن أن يكون أن المشكلة لها علاقة بأن المدخلات ليست مضغوطة .

hhubik في ٣٠ أغسطس ٢٠١٦

كما لوحظ ، هذا ملف نموذج Angular 2 ، وليس html صالحًا ، لذلك قد يكون جزءًا من المشكلة. إذا قمت بإخراج الشيء الزاوي من التحسن.

ولكن يبدو أن المشكلة الرئيسية تتعلق بعلامات النطاق. هذا الإدخال أيضًا يعيد المشكلة:

<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 في ١ سبتمبر ٢٠١٦

لقد اختبرت ذلك أيضًا. يُقبل استبدال المسافات بـ divs. لا يزال القالب يعمل في Angular2. لا يزال تنسيق عبارة select لا يعمل ، حتى مع divs. لذلك على الأقل يجب إصلاح ذلك.

hhubik في ٢ سبتمبر ٢٠١٦

على الرغم من فكرة ثانية ... لا أتوقع تجميل للتحقق من صحة HTML الخاص بي. أستخدم أدوات أخرى لذلك. أنا فقط أتوقع أن يجعل الكود الخاص بي سهل القراءة. بالنظر إلى ذلك ، أعتقد أن تنسيق بيانات الاختبار الأصلية (مع الامتدادات) يجب أن يعمل أيضًا.

hhubik في ٢ سبتمبر ٢٠١٦

من المحتمل أن يكون هذا بسبب حقيقة أن span و select موجودون في القائمة الافتراضية لـ "unformatted" .

HookyQR في ٢١ مارس ٢٠١٧

👍1

HookyQR هل هذا شيء يمكنني ، كمستخدم Visual Studio Code ، تغييره؟ إذا كان الأمر كذلك ، فكيف؟ سأكون سعيدا لتجربة ذلك.

hhubik في ٢١ مارس ٢٠١٧

HookyQR في ٢١ مارس ٢٠١٧

👍8 🎉1

شكراHookyQR. أدت إزالة التحديد والامتداد من قائمة unformatted إصلاح المشكلة بالنسبة لي.

hhubik في ٢١ مارس ٢٠١٧

شكراHookyQR. هذا بالتأكيد هو الطريق للذهاب. استبدال المسافات مع divs ما هي نصيحة غبية. إنه مثل اقتراح استبدال الأحذية بالزلاجات. من الناحية الفنية تضعهم جميعًا على قدميك أليس كذلك؟

Denis-Frolov في ٨ مايو ٢٠١٧

فعلت:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

الآن يتم تنسيق جميع علاماتي بشكل جيد.

andreshg112 في ٢٤ مايو ٢٠١٧

👍4

يبدو أن هذا قد تم حله (على الأقل أمثلة إدخال bitewiseman) في الإصدار 1.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/