दृश्य स्टूडियो कोड सीएसएस इंडेंटेशन और स्वरूपण


102

मैं अगर वहाँ सक्रिय ऑटो के लिए किसी भी तरह से शॉर्टकट के साथ दृश्य स्टूडियो कोड में एक सीएसएस फ़ाइल इंडेंट जानना चाहते हैं ALT+ SHIFT+ F?

यह जावास्क्रिप्ट के साथ ठीक काम कर रहा है, लेकिन अजीब सीएसएस के साथ नहीं।


क्या आपने इस एक्सटेंशन की कोशिश की है? marketplace.visualstudio.com/…
moped

जवाबों:


105

हां, vscode-css-formatter एक्सटेंशन इंस्टॉल करने का प्रयास करें
यह .cssफ़ाइलों को प्रारूपित करने के लिए कार्यक्षमता जोड़ता है और शॉर्टकट समान Alt+ Shift+ रहता है F


यह एक काम पूरी तरह से कर रहा है। मैंने मोपेड द्वारा सुझाए गए दूसरे को आज़माया लेकिन हर बार जब मैंने एक फ़ाइल को सहेजा, तो मुझे दो बार बचाना पड़ा ..
A. डीसी

1
खिड़कियों पर इस एक्सटेंशन का उपयोग कैसे करें? alt + shift + f काम नहीं करता है और राइट क्लिक करने पर कोई 'Format Code' विकल्प नहीं है।
किव

1
क्या आपने एक्सटेंशन की स्थापना के बाद बनाम कोड को फिर से शुरू किया है? इसके अलावा, आप किन फ़ाइलों में इस कमांड को निष्पादित करने की कोशिश कर रहे हैं?
एनवलचेव

13
मेरे लिए काम नहीं किया। Alt+Shift+Fअभी भी दे रहा है: क्षमा करें, लेकिन 'css' फ़ाइलों के लिए कोई फ़ॉर्मेटर स्थापित नहीं है। पुनः लोड करें। सुशोभित css / sass / scss / कम काम किया।
सिंह

मैक पर महान काम करता है, (Cmd + K, Cmd + F), और एक ही कीबोर्ड शॉर्टकट का उपयोग करके अन्य फ़ाइल प्रकारों के स्वरूपण को प्रभावित नहीं करता है। धन्यवाद
मोजावे

44

सुशोभित css / sass / scss / कम

इसे चलाने के लिए

दर्ज alt+shift+f

या

प्रेस F1या ctrl+shift+p फिर सुशोभित दर्ज करें ..

यहां छवि विवरण दर्ज करें


एक और एक - JS-CSS-HTML फॉर्मैटर

मुझे लगता है कि यह विस्तार आंतरिक रूप से js-beautify दोनों का उपयोग करता है


alt + shift + f ने कुछ नहीं किया, लेकिन टाइपिंग ब्यूटिफाइ ... काम किया।
rtaft

जेएस-सीएसएस-HTML फॉर्मैटर का उपयोग करने का दूसरा तरीका है -> संदर्भ मेनू खोलें और प्रारूप कोड चुनें
चनाका फर्नांडो

23

सबसे अच्छा विकल्प खोजने में एक घंटा बर्बाद हो गया।

बस इसे एक साथ रखना, आसान पढ़ने और उनमें से एक को चुनने के लिए।

टिप्पणियाँ:

  • CSS और SASS / SCSS / LESS सभी संबंधित हैं
  • HTML, जावास्क्रिप्ट, टाइपस्क्रिप्ट, JSON - VS कोड पहले से ही स्वरूपण है
  • CSS और संबंधित - VS कोड आज की तरह प्रारूपण नहीं है

विकल्प:

  • Css / sass / scss / less प्रारूपित करने के लिए:
    • खूबसूरत
      • सभी सीएसएस संबंधित समर्थित हैं, और अन्य नहीं, मैं इसे चुनता हूं, यह बहुत अच्छा काम करता है।
  • जावास्क्रिप्ट / टाइपस्क्रिप्ट / सीएसएस प्रारूपित करने के लिए:
  • JS, CSS, HTML, JSON फ़ाइल को प्रारूपित करने के लिए (wraps js-beautify)
  • CSS को फॉर्मेट करने के लिए
    • सीएसएस फ़ॉर्मेटर
      • लेकिन, केवल CSS ने समर्थन किया, सभी संबंधित नहीं - 6+ महीने का रखरखाव नहीं किया

फ़ॉर्मेट करने के लिए:

प्रेस Alt+ Shift+ Fवीएस कोड में, प्रीटीयर स्थापित करने के बाद।


Prettier सूची scss, लेकिन sass नहीं। सुशोभित सैस का समर्थन करने का दावा करता है, लेकिन मेरे अनुभव से सब कुछ एक पंक्ति में चला जाता है। (स्पष्ट रूप से सैस की बात कर रहे हैं, एससीएस नहीं)
फ्रैंक

5

दृश्य स्टूडियो कोड में स्थानीय बूटस्ट्रैप .min.css खोलने के बाद , यह बिना किसी बाधा के देखा गया। कमिट ALT + Shift + F की कोशिश की, लेकिन व्यर्थ में।

फिर स्थापित किया गया

सीएसएस प्रारूप विस्तार।

इसे पुनः लोड करें और ALT + Shift + F आकर्षण के साथ मेरी CSS फ़ाइल को इंडेंट करें।

बिंगो !!!


4

गैलरी से लेने के लिए कई हैं, लेकिन मैं जो उपयोग कर रहा हूं, जो विन्यास के काफी स्तर प्रदान करता है अभी भी बाकी सेटिंग्स के लिए विनीत है, मिशेल मेलूसो द्वारा सुशोभित है । यह CSS और SCSS दोनों पर काम करता है और आपको बाकी जगहों को 2 स्थानों पर रखने के लिए 3 रिक्त स्थान देता है, जो अच्छा है।

आप इसे GitHub से छीन सकते हैं और इसे अपने आप में ढाल सकते हैं, क्या आपको भी ऐसा महसूस करना चाहिए।


4

मैं Prettier का उपयोग करने की सलाह देता हूं क्योंकि यह बहुत ही एक्स्टेंसिबल है लेकिन फिर भी यह पूरी तरह से काम करता है:

1. CMD + Shift + P -> Format Document

या

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

3

फ़ाइलें मेनू पर जाएं -> वरीयता -> एक्सटेंशन फिर टाइप करें सीएसएस फॉर्मैटर इसे लोड करने और स्थापित करने के लिए प्रतीक्षा करें


1

HookyQR.beautify एक्सटेंशन स्थापित करें। यह आपकी जावास्क्रिप्ट, JSON, CSS, Sass और HTML को Visual Studio Code में सुशोभित करेगा। यह इस उद्देश्य के लिए सबसे अधिक उपयोग एक्सटेंशन है



-8

जब आप चाहें, तो विज़ुअल स्टूडियो में कोड को प्रारूपित करने के लिए: (Ctrl + K) और (Ctrl + F)

ऑटो स्वरूपण नियमों को पाया और बदला जा सकता है: उपकरण / विकल्प -> (बाएं साइडबार): पाठ संपादक / सीएसएस (या जो भी अन्य भाषा आप बदलना चाहते हैं)

CSS भाषा के लिए विकल्प दुर्भाग्य से बहुत सीमित हैं। आप इसमें कुछ परिवर्तन भी कर सकते हैं: ... / पाठ संपादक / सभी भाषाएँ


6
प्रश्न विज़ुअल स्टूडियो कोड (VSCode) के लिए है न कि विज़ुअल स्टूडियो
पियरे
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.