Js-beautify: CSS सिंगल लाइन फॉर्मेटिंग

#330 का डुप्लिकेट। लेकिन उस अनुरोध की उम्र को देखते हुए, मैं इसे खुला रख रहा हूं।

विजुअल स्टूडियो में *.css फाइलों के लिए एक कॉम्पैक्ट फीचर है, ठीक वैसे ही जैसे @Alex360hd चाहता था।

जेएस-ब्यूटी से एक्सटेंशन-प्लगइन्स के साथ विजुअल स्टूडियो कोड में अभी तक यह सुविधा नहीं है।

कॉम्पैक्ट फीचर आपके कोड को 1000 पंक्तियों (कॉम्पैक्ट) बनाम 5000 पंक्तियों (पुरानी स्वरूपण) बनाता है, आप अपनी *.css फ़ाइल को गॉड पर्सपेक्टिव से नियंत्रित कर सकते हैं।

sass/कम लंबे कोड से नफरत करने वाले से।

हाँ, इसके लिए +1। मुझे वास्तव में सीएसएस सिंगल लाइन स्वरूपण पसंद है, प्रत्येक चयनकर्ता एक दूसरे के बगल में हैं और यह एक बहुत अच्छा परिप्रेक्ष्य दृश्य देता है।

मैं मल्टी-लाइन शैलियों को सिंगल-लाइन में बदलने के लिए एक मिनीफ़ायर का उपयोग करने की अपेक्षा करता हूं, और सिंगल-लाइन को मल्टी-लाइन में बदलने के लिए एक ब्यूटीफायर का उपयोग करता हूं।

@evocateur की #330 राय के बाद ("ब्यूटीफायर का काम कोड को छोटा करना नहीं है, बल्कि स्थिरता और पठनीयता के लिए इसे पुन: स्वरूपित करना है"): cssmin उल्लेख इसके पक्ष में किया गया है 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&.less फ़ाइल के बीच कोड को संकुचित करें।
मैं जानना चाहता हूं कि कोई विकल्प है या नहीं। सीएसएस। *.css को प्रारूपित करने के लिए कॉम्पैक्ट । :)

@evocateur

ब्यूटिफायर का काम कोड को छोटा करना नहीं है, बल्कि स्थिरता और पठनीयता के लिए इसे पुन: स्वरूपित करना है

यह छोटा नहीं है, एकल पंक्ति स्वरूपण कुछ रिक्त स्थान रखता है और कुछ पंक्ति एकाधिक चयनकर्ता नियमों के लिए वापस आती है।

मेरे लिए, और बहुत सारे वेब डेवलपर के लिए, यह:

.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] ने लिखा:

@evocateur

ब्यूटिफायर का काम कोड को छोटा करना नहीं है, बल्कि स्थिरता और पठनीयता के लिए इसे पुन: स्वरूपित करना है

मेरे लिए, और बहुत सारे वेब डेवलपर के लिए, यह:

.बीटीएन { बॉर्डर: 1 पीएक्स सॉलिड ब्लैक; पृष्ठभूमि: # एफएफएफ; सीमा- त्रिज्या:5px रंग:#000; }
. बीटीएन: होवर {पृष्ठभूमि: # 000; रंग: # एफएफएफ; }
इससे कहीं अधिक पठनीय है:

.बीटीएन {
सीमा: 1px ठोस काला;
पृष्ठभूमि: # एफएफएफ;
सीमा- त्रिज्या: 5px;
रंग:#000;
}

. बीटीएन: होवर {
पृष्ठभूमि:#000;
रंग: # एफएफएफ;
}
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

सुंदर तर्क...

व्यक्तिगत रूप से मुझे अपने सीएसएस चयनकर्ता का एक अच्छा अवलोकन करना पसंद है और "नियमित" वाक्यविन्यास का उपयोग करके, मुझे अपने व्यूपोर्ट में शायद ही 3 या 4 से अधिक चयनकर्ता दिखाई देते हैं।

सिंगल लाइन फॉर्मेटिंग का उपयोग करके, मैं 20 या 30 चयनकर्ता (कम से कम) देख सकता हूं और मैं आसानी से तत्वों के समूह पर एक सिंहावलोकन कर सकता हूं।

और जब आप सीएसएस को अच्छी तरह जानते हैं, विरासत और चयनकर्ता का बुद्धिमानी से उपयोग करते हैं, तो आपके पास चयनकर्ता के लिए शायद ही कभी 5 या 6 से अधिक नियम होते हैं, और आज हमारे पास स्क्रीन के साथ, (बहुत बड़ा), मैं क्षैतिज स्क्रॉलबार के बिना अपने सभी नियम देख सकता हूं। (और यदि ऐसा है, तो मेरे आईडीई में स्वचालित लाइन रिटर्न के लिए बहुत सारे विकल्प हैं)।

यदि आप ऑनलाइन सीएसएस फॉर्मेटर की खोज करते हैं, तो आप देख सकते हैं कि उनमें से कई के पास सिंगल लाइन विकल्प हैं, यह शायद इसलिए है क्योंकि इसमें कुछ लोगों को दिलचस्पी है ...

@evocateur - आपके ग्रम्पी कैट इंप्रेशन पर गोल्ड स्टार। मैं

@Alex360hd @jsonchou - आपकी बातों को अच्छी तरह से लिया गया है। यह खनन और सौंदर्यीकरण के बीच में कहीं पड़ता है और यही कारण है कि यह मुद्दा खुला रहता है और वृद्धि के रूप में सूचीबद्ध होता है।

यह उचित अनुरोध है लेकिन यह मेरे लिए और इस परियोजना के अन्य प्रमुख योगदानकर्ताओं (जैसे @evocateur) के लिए कम प्राथमिकता है। अगर किसी ने जावास्क्रिप्ट और पायथन दोनों कार्यान्वयन और पर्याप्त परीक्षणों के साथ पीआर जमा करना चुना है, तो इसे स्वीकार किया जाएगा। लेकिन हमारे पास अन्य कार्य हैं जो हमें लगता है कि पूरी परियोजना के लिए उच्च प्राथमिकता है।

@ ओलेट्स
वर्कअराउंड और वैकल्पिक सीएसएस टूल को इंगित करने के लिए धन्यवाद!

@jsonchou -
क्षमा करें, हमेशा एक नियमित अभिव्यक्ति होती है जो अधिकांश इनपुट के लिए काम करेगी, या कम से कम सभी इनपुट जो आप या मैं कोशिश करेंगे। हालांकि, वे वास्तव में कभी भी सभी इनपुट के लिए काम नहीं करते हैं और अंततः वे अचूक और त्रुटि प्रवण होते हैं - इस तरह सीएसएस-ब्यूटीफायर कोड को बनाए रखना उतना ही कठिन हो जाता है जितना आज है। एक समाधान प्रदान करने के लिए धन्यवाद जिसे लोग हैक कर सकते हैं यदि वे इसे जोखिम में डालना चुनते हैं, लेकिन मुझे आशा है कि वे इसके बजाय @olets समाधान का उपयोग करेंगे। मैं

@jsonchou LESS और Sass . में //inline comments के लिए देखें

@Alex360hd @Zmove

मैंने वीएससीओडी के लिए एक सीएसएस कॉम्पैक्ट प्लगइन लिखा है।

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

बढ़िया, मैं कोशिश करूँगा।

अरे @jsonchou - मुझे लगता है कि अगर आप अपनी प्लगइन को sass/scss दुनिया में ले गए तो एक टन लोग इसका इस्तेमाल करेंगे। मुझे यह सोचकर हैरानी होती है कि आज के इस युग में 3000 पिक्सेल चौड़े मॉनिटर के साथ, लोगों का रुझान सीएसएस में 5% स्क्रीन रियल एस्टेट का उपयोग करने की ओर क्यों है!

मैं आपकी प्लगइन को यहां तक ​​ले जाऊंगा ताकि लोगों को ORDER निर्दिष्ट करने की अनुमति मिल सके जिसमें संपत्तियों को जाने की आवश्यकता है। स्थिति और प्रदर्शन जैसी चीजें सूची में जल्दी होनी चाहिए और फिर मार्जिन, पैडिंग इत्यादि, और फिर रंग, फोंट इत्यादि।

मेरे लिए, यह बहुत शक्तिशाली साबित हुआ है जब एक टीम में कई लोग SCSS लिख रहे हैं।

क्षमा करें दोस्तों, कोई मुझे संपत्ति कुंजी वैल अलग लाइनों पर होने का एक अच्छा कारण देता है? मोबाइल डिवाइस पर CSS लिख रहे हैं?

स्टीवन

@ tateman74 शायद मेरे पास .scss फ़ाइल को सिंगल लाइन बनाने की कोशिश होगी, लेकिन मुझे लगता है कि ORDER गुण csscomb जैसे तीसरे समाधान द्वारा किए जाने चाहिए।

आह दिलचस्प। CSSComb निश्चित रूप से वह है जिसे मैं ऑर्डर करने के लिए ढूंढ रहा हूं। मुझे लगता है कि इसके लिए मुझे एक वीएससीओडी एक्सटेंशन बनाना होगा।

एससीएसएस थोड़ा चुनौतीपूर्ण हो सकता है क्योंकि न्यूलाइन्स का वास्तव में कुछ मतलब होता है। सर्वोत्तम पठनीयता के लिए, मैं हमेशा सामग्री को प्रारूपित करता हूं:

• नियम से पहले हमेशा एक नई पंक्ति चाहे नेस्टेड हो या नहीं
• हमेशा अपनी ही तर्ज पर घुंघराले होते हैं

एक तरह से वापस (मेरे माइस्पेस रोजगार के दिनों में :)), कुछ सीएसएस दोस्त और मैंने तर्क दिया कि विक्रेता उपसर्ग एक नई लाइन पर शुरू होना चाहिए क्योंकि वे मूल रूप से (अनदेखा) गुण हैं। यानी उनका मतलब कुछ है, लेकिन केवल अनुकूलता के लिए हैं। मुझे लगता है कि इस दिन और उम्र में, हमें वैसे भी PostCSS का उपयोग करना चाहिए ताकि वे विक्रेता उपसर्ग कभी मौजूद न हों।

फिर से धन्यवाद और मुझे बताएं कि क्या मैं मदद कर सकता हूं। यहाँ एक बहुत ही विशिष्ट SCSS फ़ाइल है जिसे मैं पसंद करता हूँ।
कोई मुझे बताओ कि पढ़ने योग्य नहीं है! :)

स्टीवन

क्या आप में से कोई भी जो इस सुविधा को उपयोगी पाता है, सीएसएस ब्यूटीफायर के लिए सुविधा को लागू करने के इच्छुक होगा? शायद इतना मुश्किल नहीं होगा।

इसे काम करने के लिए कम से कम सीएसएस टोकननाइजेशन की आवश्यकता होगी (#545)। एक बार यह हो जाने के बाद भी इसे पूरा करने के लिए कुछ काम करना होगा।