आप Visual Studio Code में स्वरूपण विकल्पों को कैसे बदलते हैं?

Question

मुझे पता है कि आप विज़ुअल स्टूडियो कोड में Ctrl+ F/ Cmd+ का उपयोग करके कोड को प्रारूपित कर सकते हैं Fलेकिन आप प्रत्येक भाषा के लिए स्वरूपण विकल्प कैसे बदलते हैं?

उदाहरण के लिए, विज़ुअल स्टूडियो 2013 में मैं सीएसएस के लिए कॉम्पैक्ट मोड चुन सकता हूं।

क्या ऐसा करने के लिए एक और छिपी JSON फाइल है?

Comments

शायद ऩही। यदि आपने ऑनलाइन दस्तावेज़ पढ़ा है , तो आप देख सकते हैं कि Microsoft ने केवल टाइपस्क्रिप्ट के लिए प्रारूप फ़ंक्शन का उल्लेख किया है।

— yushulx

यह C # और JavaScript के लिए काम करता है, मुझे कोई आधिकारिक सूची नहीं मिल सकती है लेकिन यह केवल टाइपस्क्रिप्ट से अधिक है।

— मैट मैककेबे

यह 2017 है और क्या यह अभी भी समर्थित नहीं है?

— असकान

Answer 1

VS कोड पर

प्रेस Ctrl+ Shift+P

फिर टाइप करें Format Document With...

सूची के अंत में क्लिक करें Configure Default Formatter...

अब आप सूची से अपना पसंदीदा ब्यूटीफायर चुन सकते हैं।

2021 अपडेट करें

यदि आपके "Format Document With..."पास कोई और मौजूद नहीं है, तो => => पर जाएं = फिर थोड़ा सा स्क्रॉल करें , फिर आप देखेंगे , अब आप किसी भी डॉक्यूमेंट फॉर्मेटर को चुन सकते हैं , जिसे आपने अलग-अलग फ़ाइल प्रकार एक्सटेंशन के लिए बोफ़र स्थापित किया है।file preferences settingsExtensions Veturformat > defaultFormatter:css

Comments

फ़ॉर्मेट डॉक्यूमेंट विथ ... अब नहीं है

— एयरो वांग

वेतुर भी मौजूद नहीं है!

— मार्टिज़न हीमस्ट्रा

@MartijnHiemstra FYI करें, Vetur एक VS कोड एक्सटेंशन है जो VS कोड मार्केटप्लेस पर उपलब्ध है :) marketplace.visualstudio.com/items?itemName=octref.vetur

— eriegie

Answer 2

मुझे यह एक्सटेंशन मार्केट प्लेस में सुशोभित कहा जाता है और हां, यह एक और config \ settings फ़ाइल है। :)

विजुअल स्टूडियो कोड में जावास्क्रिप्ट, JSON, CSS, Sass और HTML को सुशोभित करें।

VS कोड आंतरिक रूप से js-beautify का उपयोग करता है, लेकिन इसमें आपके द्वारा उपयोग की जाने वाली शैली को संशोधित करने की क्षमता का अभाव है। यह एक्सटेंशन VS कोड में js-beautify चलाने में सक्षम है, और आपके कोड स्टाइल को लोड करने के लिए खुली फ़ाइल के पथ ट्री में किसी भी .jsbeautifyrc फ़ाइल का सम्मान करता है। एफ 1 ब्यूटिफाई (चयन को सुशोभित करने के लिए) या एफ 1 ब्यूटिफाई फाइल चलाएं।

सेटिंग्स में मदद के लिए .jsbeautifyrc Settings.md देखें

यहाँ GitHub रिपॉजिटरी है: https://github.com/HookyQR/VSCodeBeautify

Comments

धन्यवाद, यह बहुत अच्छा लग रहा है, मैं इसे अपने सीएसएस में याद कर रहा हूं, जावास्क्रिप्ट / टाइपस्क्रिप्ट और एचटीएमएल बॉक्स से बाहर काम करने लगता है। ऐसा लगता है कि आप इसे अपने .editorconfig में कुछ डालने में सक्षम हो सकते हैं

— मैट

.jsbeautifyrcकॉन्फ़िगरेशन फ़ाइल का उपयोग करने के बाद से सबसे अच्छा समाधानों में से एक , जो बदले में अन्य टीम के सदस्यों के लिए सहायक होगा जो लेखन कोड के लिए अन्य आईडीई का उपयोग कर रहे होंगे। Sublime Text के लिए, HTML-CSS-JS-Prettify plugin सबसे अच्छा है। दुर्भाग्य से ग्रहण के लिए, बाज़ार पर कार्यान्वयन छोटी गाड़ी है। मुझे अभी भी उपयोग करने की आवश्यकता है editorconfigजो एक सभ्य काम करता है।

— शियाज

सुशोभित अच्छा है, लेकिन हमेशा मुझे समस्याएं दे रहा है। मुझे लगता है कि बेहतर और अधिक विन्यास के लिए सुंदर लगता है।

— ट्रेवर जेएक्स

Answer 3

संपादित करें:

यह है अब समर्थित (2019) के रूप में । कृपया निर्देशों के लिए साजद सदरी का जवाब नीचे देखें ।

नहीं, यह वर्तमान में समर्थित नहीं है (2015 में) ।

Comments

यह शर्म की बात है, मैं इसे वोट करूंगा और इंतजार करके देखूंगा। मुझे लगता है कि यह एक और json सेटिंग्स फ़ाइल होगी, ऐसा लगता है कि वे जिस दिशा में जा रहे हैं।

— मैट मैककेबे

अब सही नहीं है? तो कैसे? कम से कम उसके लिए एक URL प्रदान करें।

— लानत सब्जियाँ

अस्पष्टता के लिए क्षमा करें। VisualStudio uservoice लिंक टूट गया है। शायद एक github मुद्दा होना चाहिए, और मैं github.com/Microsoft/vscode/issues/1533 खोजने में सक्षम था । आप "प्रारूप" के लिए अपनी सेटिंग्स में भी खोज सकते हैं और आपको javascript.format विकल्प मिलेंगे।

— SgtPooki

Answer 4

यदि हम आजकल विजुअल स्टूडियो कोड की बात कर रहे हैं, तो आप अपने में एक डिफ़ॉल्ट फॉर्मैटर सेट करते हैं settings.json:

  // Defines a default formatter which takes precedence over all other formatter settings. 
  // Must be the identifier of an extension contributing a formatter.
  "editor.defaultFormatter": null,

किसी भी स्थापित एक्सटेंशन के पहचानकर्ता को इंगित करें, अर्थात

"editor.defaultFormatter": "esbenp.prettier-vscode"

आप ऐसा प्रारूप-विशिष्ट भी कर सकते हैं :

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
},

इसके अलावा यहाँ देख ।

---

आप अपने कीबोर्ड शॉर्टकट ( ) में अलग-अलग फॉर्मेटर्स के लिए अन्य कुंजी भी असाइन कर सकते हैं keybindings.json। डिफ़ॉल्ट रूप से, यह पढ़ता है:

{
  "key": "shift+alt+f",
  "command": "editor.action.formatDocument",
  "when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
}

---

अंत में, यदि आप Prettier pluginprettier.rc का उपयोग करने का निर्णय लेते हैं , और आप html, scss, json ... के लिए अलग इंडेंटेशन चाहते हैं।

{
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false,

    "overrides": [
        {
            "files": "*.component.html",
            "options": {
                "parser": "angular",
                "tabWidth": 4
            }
        },
        {
            "files": "*.scss",
            "options": {
                "parser": "scss",
                "tabWidth": 2
            }
        },
        {
            "files": ["*.json", ".prettierrc"],
            "options": {
                "parser": "json",
                "tabWidth": 4
            }
        }
    ]
}

Answer 5

आप "सेटिंग" से कुछ बदलाव कर सकते हैं। उदाहरण के लिए जावास्क्रिप्ट नियम "javascript.format" से शुरू होते हैं। लेकिन उन्नत स्वरूपण नियंत्रण के लिए, अभी भी कुछ एक्सटेंशन का उपयोग करने की आवश्यकता है।

प्रारूप कोड कमांड के लिए नियम सेटिंग्स

Answer 6

एक समाधान जो मेरे लिए काम करता है (जुलाई 2017), ESLint का उपयोग करना है । जैसा कि सभी जानते हैं, आप लिंटर को कई तरीकों से, विश्व स्तर पर या स्थानीय रूप से उपयोग कर सकते हैं। मैं इसे स्थानीय स्तर पर और गूगल स्टाइल गाइड के साथ उपयोग करता हूं। वे जिस तरह से मैंने इसे स्थापित किया है वह इस प्रकार है ...

• cd to your working directory
• npm init
• npm install --save-dev eslint
• node_modules/.bin/eslint --init
• I use google style and json config file

अब आपके पास .eslintrc.jsonआपके वर्किंग डायरेक्टरी की रूट फाइल होगी । आप उस फ़ाइल को खोल सकते हैं और संशोधित कर सकते हैं जैसे कि आप एस्लिंट नियमों का उपयोग करते हैं । सिस्टम वरीयताओं cmd+,को खोलने के लिए अगला vscode। खोज बार में टाइप करें eslintऔर देखें "eslint.autoFixOnSave": false। सेटिंग को कॉपी करें और यूजर सेटिंग फाइल में पेस्ट करें और बदल falseदें true। आशा है कि यह किसी को vscode का उपयोग करने में मदद कर सकता है ।

Answer 7

विशेष रूप से C # (OmniSharp) स्वरूपण सेटिंग्स बदलने के लिए आप एक json फ़ाइल का उपयोग कर सकते हैं:
उपयोगकर्ता: ~/.omnisharp/omnisharp.json या %USERPROFILE%\.omnisharp\omnisharp.json
कार्यक्षेत्र: omnisharp.json कार्य निर्देशिका में फ़ाइल जो OmniSharp पर इंगित की गई है।

उदाहरण:

{
  "FormattingOptions": {
    "NewLinesForBracesInMethods": false,
    "NewLinesForBracesInProperties": false,
    "NewLinesForBracesInAccessors": false,
    "NewLinesForBracesInAnonymousMethods": false,
    "NewLinesForBracesInControlBlocks": false,
    "NewLinesForBracesInObjectCollectionArrayInitializers": false,
    "NewLinesForBracesInLambdaExpressionBody": false
  }
}

इस पोस्ट पर विवरण | omnisharp.json स्कीमा (यह पहले से ही vscode में है, आप इसे केवल CTRL + SPACE कर सकते हैं)

अन्य भाषा एक्सटेंशन में इसे सेट करने के लिए समान फाइलें हो सकती हैं।

Answer 8

मेरे साथ भी ऐसा ही हुआ। मैंने सेटिंग में डिफ़ॉल्ट फ़ॉर्मेटर के रूप में प्रिटियर सेट किया और फिर से काम करना शुरू कर दिया। मेरा डिफ़ॉल्ट प्रारूप अशक्त था ।

VSCODE डिफ़ॉल्ट फ़ॉर्मेटर सेट करने के लिए

फ़ाइल -> वरीयताएँ -> सेटिंग्स (विंडोज के लिए) कोड -> वरीयताएँ -> सेटिंग्स (मैक के लिए)

"डिफ़ॉल्ट फ़ॉर्मेटर" खोजें। ड्रॉपडाउन में, प्रेटियर esbenp.prettier-vscode के रूप में दिखाई देगा।