मुखपृष्ठ » वेब डिजाइन » विज़ुअल स्टूडियो कोड कैसे कस्टमाइज़ करें

    विज़ुअल स्टूडियो कोड कैसे कस्टमाइज़ करें

    विजुअल स्टूडियो कोड, माइक्रोसॉफ्ट का नया ओपन-सोर्स कोड एडिटर डेवलपर्स को कई भयानक सुविधाएँ प्रदान करता है जो महत्वपूर्ण हैं स्रोत कोड संपादन की प्रक्रिया को सुविधाजनक बनाना. इसके अलावा, विजुअल स्टूडियो कोड यह भी सुनिश्चित करता है कि जब वे इसके साथ काम करते हैं, तो उपयोगकर्ता ऊब नहीं होंगे इसकी उपस्थिति के कई भागों को अनुकूलित करें, जैसे रंग, फोंट, रिक्ति, और पाठ स्वरूपण, जैसे कई कार्यशीलता, जैसे linting तथा वैध नियम.

    इस पोस्ट में, सबसे पहले हम पर एक नज़र डालेंगे विज़ुअल स्टूडियो कोड कार्यक्षेत्र के रूप को कैसे बदलना है, फिर मैं आपको दिखाऊंगा कि दो की मदद से डिफ़ॉल्ट सेटिंग्स को कैसे कस्टमाइज़ किया जाए JSON-स्वरूपित कॉन्फ़िगरेशन फ़ाइलें.

    VS कोड पर कलर थीम कैसे सेट करें

    विजुअल स्टूडियो कोड आपको अनुमति देता है एक कस्टम रंग विषय सेट करें आपके संपादक के लिए.

    पूर्व-निर्मित थीम को उपयोग में लाने के लिए, पर क्लिक करें फ़ाइल> प्राथमिकताएँ> रंग थीम शीर्ष मेनू बार में मेनू। जब तुम मारो “दर्ज”, कमांड पैलेट पॉप अप करता है, और उन विषयों की ड्रॉपडाउन सूची दिखाता है जिन्हें आप चुन सकते हैं.

    यदि आप दबाते हैं तो आप उसी प्रभाव को प्राप्त कर सकते हैं एफ 1 कमांड पैलेट खोलने के लिए, और टाइप करें प्राथमिकताएं: रंग थीम इनपुट फ़ील्ड में कमांड करें.

    जैसा कि आप ड्रॉपडाउन सूची में विकल्पों पर रोल करते हैं, कार्यक्षेत्र की उपस्थिति वास्तविक समय में परिवर्तन करती है, तो आप जल्दी से देख सकते हैं कि कौन सा विषय आपकी आवश्यकताओं के अनुसार सबसे उपयुक्त है.

    मैं चुनता हूं “उच्च विषमता” रंग विषय, क्योंकि मेरी आँखें सर्वश्रेष्ठ नहीं हैं। यहाँ मेरा नज़रिया कैसा है.

    वीएस कोड मार्केटप्लेस से एक थीम कैसे स्थापित करें

    यदि आप डिफ़ॉल्ट रूप से किसी भी रंग थीम वीएस कोड प्रदान नहीं करते हैं, तो आप वीएस कोड मार्केटप्लेस से कई अन्य डाउनलोड कर सकते हैं.

    यहां आप उन विषयों पर एक नज़र डाल सकते हैं जो वर्तमान में मार्केटप्लेस के पास हैं। यदि आप मार्केटप्लेस से एक थीम स्थापित करना चाहते हैं, तो हिट करें एफ 1 कमांड पैलेट खोलने के लिए अपने वीएस कोड संपादक के ठीक अंदर, फिर टाइप करें ext स्थापित इनपुट फ़ील्ड में कमांड करें, अंत में चुनें एक्सटेंशन: इंस्टॉल एक्सटेंशन सूची से विकल्प जो पॉप अप करता है.

    जब आप इस विकल्प पर क्लिक करते हैं, तो कमांड पैलेट का एक नया उदाहरण सामने आता है। लिखें "एक्स्ट इंस्टॉल थीम" नए इनपुट फ़ील्ड में कमांड करें, और आप करेंगे सभी विषयों की एक सूची प्राप्त करें जो VS कोड मार्केटप्लेस से उपलब्ध हैं.

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

    नए सामग्री थीम के साथ, मेरा संपादक अब इस तरह दिखता है:

    आप पिछले विषय पर वापस जा सकते हैं (जैसे मैंने किया, क्योंकि मैं अभी भी उस विषय को पसंद करता हूं) या आप कुछ अन्य विषयों के साथ खेल सकते हैं, यह देखने के लिए कि कौन सा आपके लिए सबसे उपयुक्त है.

    अगर आप चाहें, तो आप भी कर सकते हैं अपनी कस्टम थीम बनाएं, और vsce एक्सटेंशन मैनेजर टूल का उपयोग करके इसे VS कोड मार्केटप्लेस पर प्रकाशित करें.

    उपयोगकर्ता और कार्यक्षेत्र सेटिंग्स बदलें

    वीएस कोड आपको न केवल एक कस्टम थीम सेट करने की अनुमति देता है, बल्कि आप भी कर सकते हैं कई अन्य सेटिंग्स कॉन्फ़िगर करें, जैसे कि प्रारूपण नियम, विभिन्न विशेषताओं का उपयोग, क्रैश रिपोर्ट, HTTP सेटिंग्स, फ़ाइल संघ, लाइनिंग नियम, और बहुत कुछ.

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

    सबसे पहले, आइए देखें कि दो कॉन्फ़िगरेशन फ़ाइलों के बीच अंतर क्या है। VS कोड में दो स्कोप हैं (वैश्विक तथा स्थानीय) सेटिंग्स के लिए, इसलिए दो अलग-अलग फाइलें:

    1. वैश्विक settings.json, जिसमें कॉन्फ़िगरेशन नियम प्रत्येक कार्यक्षेत्र के लिए मान्य हैं
    2. कार्यक्षेत्र से संबंधित .vscode / settings.json, यह केवल एक व्यक्तिगत कार्यक्षेत्र से संबंधित है

    वैश्विक settings.json फ़ाइल को उस फ़ोल्डर में पाया जा सकता है जहाँ आपका ऑपरेटिंग सिस्टम क्रमशः हर दूसरे ऐप-संबंधित कॉन्फ़िगरेशन फ़ाइलों को संग्रहीत करता है:

    • विंडोज पर: % APPDATA% \ कोड \ उपयोगकर्ता \ settings.json
    • लिनक्स पर: $ HOME / .config / कोड / प्रयोक्ता / settings.json
    • मैक पर: $ घर / पुस्तकालय / आवेदन सहायता / कोड / उपयोगकर्ता / सेटिंग्स। json

    कार्यक्षेत्र से संबंधित settings.json फ़ाइल आपके वर्तमान प्रोजेक्ट के फ़ोल्डर में संग्रहीत है। डिफ़ॉल्ट रूप से, यह फ़ाइल मौजूद नहीं है, लेकिन जैसे ही आप एक कस्टम वर्कस्पेस सेटिंग जोड़ते हैं, वीएस कोड बनाता है .vscode / settings.json एक ही बार में फ़ाइल करें, और इसमें कस्टम कार्यक्षेत्र-विशिष्ट कॉन्फ़िगरेशन रखता है.

    तो आप कब उपयोग करते हैं settings.json फ़ाइलें?

    यदि आप अपने कस्टम कॉन्फ़िगरेशन नियमों का उपयोग करने के लिए VS कोड चाहते हैं सब अपनी परियोजनाओं, उन्हें वैश्विक में डाल दिया settings.json फ़ाइल.

    यदि आप चाहते हैं कि आपकी सेटिंग केवल आपके लिए मान्य हो वर्तमान परियोजना, उन्हें कार्यक्षेत्र-संबंधी में रखें settings.json फ़ाइल.

    कार्यक्षेत्र सेटिंग्स वैश्विक सेटिंग्स को ओवरराइड करती हैं, तो सावधान रहें.

    वैश्विक सेटिंग्स कहा जाता है “उपयोगकर्ता सेटिंग” बनाम कोड में। उन पर क्लिक करके या तो खोलें फ़ाइल> प्राथमिकताएँ> उपयोगकर्ता सेटिंग्स मेनू, या अभिव्यक्ति टाइप करने के लिए शुरुआत से “उपयोगकर्ता सेटिंग” कमांड पैलेट में (इसे F1 से खोलें).

    VS कोड एक-दूसरे के बगल में दो पैन खोलता है: बाएं वाले में वे सभी विकल्प हैं जो कॉन्फ़िगर करना संभव है, और दायां एक वैश्विक रूप से प्रदर्शित होता है settings.json फ़ाइल। आपको इस फ़ाइल में अपने कस्टम कॉन्फ़िगरेशन नियमों को रखने की आवश्यकता है.

    जैसा कि आप देख सकते हैं, आपको कुछ और करने की ज़रूरत नहीं है, बस उन सेटिंग्स को कॉपी-पेस्ट करें जिन्हें आप बाईं ओर से दाईं ओर बदलना चाहते हैं, और संशोधित मान जोड़ें.

    आइए एक संक्षिप्त उदाहरण देखें (लेकिन आप अपनी व्यक्तिगत आवश्यकताओं के अनुसार कोई अन्य संशोधन कर सकते हैं)। मैं फ़ॉन्ट परिवार को बदल दूंगा, की लंबाई कम कर दूंगा टैब डिफ़ॉल्ट चार रिक्त स्थान से दो तक, अधिकतम काम करने वाली फ़ाइलों को नौ से घटाकर पाँच कर दें, और डुप्लिकेट चित्रों से सीएसएस लाइनिंग नियमों में से एक को बदल दें "नज़रअंदाज़ करना" सेवा मेरे "चेतावनी".

    कॉपी-पेस्ट करने के बाद, मेरा वैश्विक settings.json फ़ाइल इस तरह दिखती है:

     // डिफ़ॉल्ट सेटिंग्स "editor.fontFamily": "कूरियर न्यू", "editor.tabSize": 2, "explorer.workingFiles.maxVanish": 5, "css.lint.duplicateProperties": को अधिलेखित करने के लिए इस फाइल में अपनी सेटिंग्स रखें। : "चेतावनी"

    संशोधित करने के बाद बचत settings.json फ़ाइल, मेरे संपादक के परिवर्तन एक ही बार में दिखाई देते हैं (नीचे स्क्रीनशॉट में केवल फ़ॉन्ट परिवार का परिवर्तन दिखाई देता है):

    आप समान रूप से कार्यक्षेत्र सेटिंग्स बदल सकते हैं। अब आपको पर क्लिक करने की आवश्यकता है फ़ाइल> प्राथमिकताएँ> कार्यक्षेत्र सेटिंग्स कार्यक्षेत्र से संबंधित उपयोग करने के लिए शीर्ष मेनू बार में .vscode / settings.json फ़ाइल.

    कार्यक्षेत्र सेटिंग्स में उपयोगकर्ता सेटिंग्स के समान कॉन्फ़िगरेशन विकल्प हैं, और आप उसी कॉपी-पेस्टिंग तकनीक का उपयोग कर सकते हैं। केवल दो अंतर हैं, स्कोप (वैश्विक के बजाय स्थानीय), और द settings.json वह फ़ाइल जिसमें आपका कस्टम कॉन्फ़िगरेशन सहेजा जाएगा.