Js-beautify: تنسيق CSS أحادي الخط

نسخة مكررة من # 330. ولكن بالنظر إلى عمر هذا الطلب ، فأنا أبقي هذا الطلب مفتوحًا.

يحتوي الاستوديو المرئي على ميزة مضغوطة لملفات * .css ، تمامًا مثل @ Alex360hd تمنى.

لا يحتوي كود الاستوديو المرئي مع الإضافات الإضافية من js-beauty على هذه الميزة حتى الآن.

ميزة مضغوطة تجعل الكود 1000 صف (مضغوط) مقابل 5000 صف (تنسيق قديم) ، يمكنك التحكم في ملف * .css الخاص بك باستخدام God Perspective.

من ساس / أقل كره رمز طويل.

نعم ، +1 لذلك. يعجبني حقًا تنسيق سطر واحد من css ، فكل محدد يكون بجوار بعضه البعض ويعطي رؤية منظور جيدة جدًا.

أتوقع استخدام أداة تصغير الحجم لتحويل الأنماط متعددة الخطوط إلى سطر واحد ، ومُجمل لتحويل الخط الفردي إلى خط متعدد.

متابعة رأي evocateur 's # 330 ("وظيفة التجميل ليست تصغير الكود ، ولكن إعادة تنسيقها من أجل الاتساق وسهولة القراءة"): cssmin المذكور هناك تم إهماله لصالح clean-css (انظر أيضًا كيفية استخدام clean-css مع أدوات الإنشاء؟ ). من السهل الحصول على "تنسيق سطر واحد" باستخدام clean-css - أبسط الإعدادات هي

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

هذا يتحول

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

إلى

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

من هناك ، اضبط خيارات spaces

يكتب كل مطور شاب من زملائي كل سطر بمفرده مع أقل / ساس طويل وطويل ، ويتوافق في كل مكان.

اغفر رمز حوض السباحة الخاص بي -_- !!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

انتاج:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

فقط ضغط الشفرة بين {} ، يتم استبعاد ملف .scss &.
أريد أن أعرف ما إذا كان هناك خيار option.css. ضغط لتنسيق ملف * .css . :)

تضمين التغريدة

لا تقتصر مهمة المُجمل على تصغير الكود ، بل إعادة تنسيقه من أجل الاتساق وسهولة القراءة

هذا ليس تصغيرًا ، يحتفظ تنسيق السطر الفردي ببعض المسافات وبعض إرجاع السطر لقواعد المحدد المتعددة.

بالنسبة لي ولكثير من مطوري الويب ، هذا:

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

أكثر قابلية للقراءة من هذا:

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

لا.

في 22 آذار (مارس) 2017 ، الساعة 01:08 ، كتب Alex360hd [email protected] :

تضمين التغريدة

لا تقتصر مهمة المُجمل على تصغير الكود ، بل إعادة تنسيقه من أجل الاتساق وسهولة القراءة

بالنسبة لي ولكثير من مطوري الويب ، هذا:

.btn { border: 1px صلب أسود؛ الخلفية: #fff ؛ الحد - نصف القطر: 5 بكسل اللون: # 000 ؛ }
. btn: تحوم {background: # 000؛ اللون: #fff ؛ }
أكثر قابلية للقراءة من هذا:

.btn {
الحدود: 1 بكسل أسود خالص ؛
الخلفية: #fff ؛
الحد - نصف القطر: 5 بكسل ؛
اللون: # 000 ؛
}

. btn: تحوم {
الخلفية: # 000 ؛
اللون: #fff ؛
}
-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

جدال جميل ...

أنا شخصياً أحب أن أحصل على نظرة عامة رائعة لمحدد CSS الخاص بي وباستخدام بناء الجملة "العادي" ، بالكاد أرى أكثر من 3 أو 4 محددات في منفذ العرض الخاص بي.

باستخدام تنسيق سطر واحد ، يمكنني رؤية 20 أو 30 محددًا (على الأقل) ويمكنني بسهولة الحصول على نظرة عامة على مجموعة من العناصر.

وعندما تعرف جيدًا CSS ، استخدم التراث والمُحدِّد بذكاء ، نادرًا ما يكون لديك أكثر من 5 أو 6 قواعد للمُحدد ، ومع الشاشة التي لدينا اليوم ، (كبيرة جدًا) ، يمكنني رؤية جميع القواعد الخاصة بي بدون شريط تمرير أفقي. (وإذا كان الأمر كذلك ، فإن IDE الخاص بي لديه الكثير من الخيارات للعودة التلقائية للخط).

إذا كنت تبحث عن منسق css عبر الإنترنت ، يمكنك أن ترى أن العديد منهم لديهم خيارات سطر واحد ، ربما لأنه يثير اهتمام بعض الأشخاص ...

evocateur - نجمة ذهبية على انطباع القطة الغاضبة. 🌟 😃

@ Alex360hdjsonchou - تم أخذ نقاطك جيدًا. يقع هذا في مكان ما بين التصغير والتجميل ولهذا السبب تظل هذه المشكلة مفتوحة ومدرجة كتعزيز.

هذا طلب معقول ولكنه أقل أولوية بالنسبة لي وللمساهمين الرئيسيين الآخرين في هذا المشروع (مثلevocateur). إذا اختار شخص ما تقديم علاقات عامة مع تطبيقات جافا سكريبت وبايثون ونطاق كافٍ من الاختبارات ، فسيتم قبوله. لكن لدينا مهام أخرى نشعر بأنها ذات أولوية أعلى للمشروع ككل.

olets
نشكرك على الإشارة إلى أداة حل بديل وأداة css البديلة!

jsonchou -
عذرًا ، هناك دائمًا تعبير عادي يعمل مع معظم المدخلات ، أو على الأقل كل المدخلات التي سأحاولها أنت أو أنا. ومع ذلك ، فهي لا تعمل أبدًا مع جميع المدخلات ، وفي النهاية لا يمكن الحفاظ عليها وعرضة للخطأ - هكذا أصبح من الصعب الحفاظ على كود css-beautifier كما هو الحال اليوم. شكرًا لك على تقديم حل بديل يمكن للأشخاص اختراقه إذا اختاروا المخاطرة به ، ولكن آمل أن يستخدموا حل olets بدلاً من ذلك. 😄

jsonchou احترس من //inline comments في LESS و Sass

تضمين التغريدة

لقد قمت بكتابة مكون إضافي مضغوط css لـ VSCode.

https://marketplace.visualstudio.com/items؟itemName=jsonchou.css-compact

ممتاز ، سأحاول ذلك.

مرحبًا jsonchou - أعتقد أنك إذا أخذت المكون الإضافي الخاص بك إلى عالم sass / scss ، فسيستخدمه عدد كبير من الأشخاص. يذهلني التفكير في سبب انجذاب الناس في هذا اليوم من الشاشات التي يبلغ عرضها 3000 بكسل إلى استخدام 5٪ من مساحة الشاشة في CSS!

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

بالنسبة لي ، ثبت أن هذا قوي للغاية عندما كنت في فريق مع العديد من الأشخاص الذين يكتبون SCSS.

آسف يا رفاق ، شخص ما أعطاني سببًا واحدًا وجيهًا لجعل Vals key تكون في سطور منفصلة؟ كتابة CSS على جهاز محمول؟

ستيفن

@ tateman74 ربما سأحاول إنشاء ملف .scss ليكون سطرًا واحدًا ، لكنني أعتقد أن خصائص ORDER يجب أن تتم بواسطة الحل الثالث مثل csscomb.

آه مثير للاهتمام. CSSComb هو بالتأكيد ما كنت أبحث عنه لطلبه. يجب عمل امتداد VSCode لذلك على ما أعتقد.

قد يكون SCSS صعبًا بعض الشيء لأن الأسطر الجديدة تعني شيئًا ما في الواقع. للحصول على أفضل إمكانية للقراءة ، هذه هي دائمًا طريقة تنسيق الأشياء:

• دائمًا سطر جديد قبل قاعدة سواء كانت متداخلة أم لا
• يلتف دائمًا على خطوطهم الخاصة

عودة إلى الوراء (في أيام عملي في MySpace :)) ، استنتجت أنا وعدد قليل من رفاقي css أن بادئات البائع يجب أن تبدأ في سطر جديد لأنها (تم تجاهلها) الخصائص بشكل أساسي. أي أنها تعني شيئًا ما ، ولكنها موجودة فقط من أجل التوافق. أعتقد أنه في هذا اليوم وهذا العصر ، يجب أن نستخدم PostCSS على أي حال حتى لا توجد بادئات البائع هذه أبدًا.

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

ستيفن

هل يجد أي منكم هذه الميزة مفيدة يكون على استعداد لتطبيق الميزة لمُجمل css؟ ربما لن يكون بهذه الصعوبة.

سيتطلب هذا على الأقل ترميز css لجعله يعمل (# 545). حتى بمجرد القيام بذلك ، ستحتاج إلى بعض العمل لتحقيق ذلك.