🤦🏿 🕴🏾 👩🏼‍🤝‍👨🏿 विजुअल स्टूडियो कोड कोड संपादक। शुरुआती लोगों के लिए प्लगइन्स को स्थापित करने और स्थापित करने के लिए सबसे विस्तृत गाइड 🤚🏼 📮 ⚒️

नि: शुल्क, शक्तिशाली, बहुत लोकप्रिय, ऐड-ऑन का एक गुच्छा के साथ, मैं क्या कह सकता हूं, फेसबुक ने खुद इसे मुख्य संपादक के रूप में चुना!

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

यदि उदात्त पाठ 3 कोड संपादक अधिक दिलचस्प है, तो यहां लेख https://habr.com/en/post/458206/

सामग्री:

हटाएं

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

AppData को पथ बार में जोड़ा जाना चाहिए, फिर रोमिंग फ़ोल्डर पर जाएं और यहां आपको कोड फ़ोल्डर को हटाने की आवश्यकता है।

स्थापना

ठीक है, अब हम प्रोग्राम इंस्टॉल कर सकते हैं। कोड पर जाएं ।visualstudio.com वेबसाइट , डाउनलोड अनुभाग। मैक, लिनक्स के लिए एक संस्करण है। मुझे विंडोज में दिलचस्पी है। अपने पीसी पर क्लिक करें और डाउनलोड करें। वैसे, प्रोग्राम की वेबसाइट बहुत उपयोगी है, इसलिए मैं आपको इसका अध्ययन करने की सलाह देता हूं।

प्रोग्राम डाउनलोड किया गया है, इंस्टॉलर को चलाएं और निर्देशों का पालन करें: स्वीकार करें, सभी चेकमार्क जोड़ें, फिर हमारे पीसी पर प्रोग्राम स्थापित होने तक प्रतीक्षा करें।

कमजोर मशीन पर चल रहा है

जब प्रोग्राम स्थापित हो जाता है, तो हम इसे शुरू कर सकते हैं। लेकिन यह हर कंप्यूटर पर शुरू नहीं होगा। तथ्य यह है कि कार्यक्रम काफी संसाधन गहन है। इसलिए, एक कमजोर मशीन पर, आप यह परिणाम प्राप्त कर सकते हैं: प्रोग्राम इंटरफ़ेस के बजाय, एक काली स्क्रीन, और प्रोसेसर 100% पसीना करता है। लेकिन एक रास्ता है - आपको प्रोग्राम के शॉर्टकट के संदर्भ मेनू को खोलने और पथ में निम्नलिखित ध्वज को फ़ाइल में जोड़ने की आवश्यकता है: --disable-gpu

Great, अब प्रोग्राम कैलकुलेटर पर भी शुरू होगा।

भाषा सेटिंग

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

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

स्वागत स्क्रीन

मैं अब के लिए साइड पैनल को छिपाऊंगा, हम इसे एक से अधिक बार लौटाएंगे।
पहली चीज जो हम देखते हैं, वह है स्वागत स्क्रीन। यहां एक आइटम है जिसके साथ हम सभी सेटिंग्स, पहले से स्थापित संपादकों से चाबियाँ आयात कर सकते हैं, उदाहरण के लिए विम, उदात्त, एटम और अन्य।

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

मैं आपको इस स्क्रीन का अध्ययन करने की सलाह देता हूं, और जब आपको कार्यक्रम शुरू करने की आवश्यकता नहीं होती है, तो आपको इस चेकबॉक्स को अनचेक करना होगा। बाद में, आप इसे हमेशा मदद> ग्रीटिंग मेनू से कॉल कर सकते हैं।

बॉक्स से बाहर इंटरफ़ेस

पढ़ने में बहुत आलसी? यहाँ वीडियो संस्करण है।

सभी तैयारियां कर ली गई हैं और अब हम प्रोग्राम इंटरफ़ेस से खुद को परिचित कर सकते हैं और उसी समय देख सकते हैं कि वीएस कोड बॉक्स से बाहर क्या कर सकता है।

हम सामान्य इंटरफ़ेस जानकारी विंडो को कॉल करते हैं और कार्यक्रम के मुख्य तत्वों को देखते हैं।

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

आइए सभी अधिक विस्तार से विचार करें।

स्टेटस बार

समस्या

बाईं ओर, कोड के बगल में संख्या त्रुटियों और चेतावनियों की संख्या प्रदर्शित करेगी जो कोड निष्पादन के दौरान उत्पन्न हुई थी।

पैनल को खोलने के लिए, आपको इन आइकन पर क्लिक करना होगा या Ctrl + Shift + M दबाए रखना होगा, यहां हम त्रुटि संदेशों का पाठ देखेंगे।

पैनल में, आप इन संदेशों को फ़िल्टर कर सकते हैं, उन्हें छोटा कर सकते हैं, पूरे पैनल को पूर्ण स्क्रीन पर विस्तारित कर सकते हैं या इसे बंद कर सकते हैं।

डिबग कंसोल

इस पैनल में समस्याओं के आउटपुट के लिए टैब के अलावा, हमारे पास अभी भी डिबगिंग कंसोल है, हम इसमें वापस आएंगे।

निष्कर्ष

संपादक के सभी कार्यक्रमों और प्रणालियों का आउटपुट लॉग। यहां आप इस लॉग को फ़िल्टर भी कर सकते हैं, इसे साफ़ कर सकते हैं, संदेशों की स्क्रॉल ब्लॉक कर सकते हैं, पैनल का विस्तार कर सकते हैं या इसे बंद कर सकते हैं।

टर्मिनल

इस पैनल का अंतिम टैब एकीकृत टर्मिनल है। आप इसे Ctrl + `दबाकर कॉल कर सकते हैं ।

नियंत्रण कक्ष में, आप टर्मिनलों को भी जोड़ सकते हैं, विंडो को कई भागों में विभाजित कर सकते हैं, टर्मिनल विंडो को हटा सकते हैं, टर्मिनल विंडो के बीच स्विच कर सकते हैं और डिफ़ॉल्ट शेल का भी चयन कर सकते हैं।

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

सूचनाएं

स्थिति पट्टी में दाईं ओर हम सूचनाएं देखते हैं, अब वे वहां नहीं हैं। कार्यक्रम के बारे में प्रतिक्रिया के साथ एक ट्वीट भेजना भी संभव है।

साथ ही, कई अन्य आइटम स्टेटस बार में दिखाई देंगे।

संदर्भ की विकल्प - सूची

हम संदर्भ मेनू को भी कॉल कर सकते हैं और इस लाइन से हटा सकते हैं जो हम उपयोग नहीं करते हैं। उदाहरण के लिए, कमरे बनाने के लिए एक समीक्षा ट्वीट।

साथ ही इसी संदर्भ मेनू में हम इस लाइन को पूरी तरह से छिपा सकते हैं।

कार्रवाई बार

डिफ़ॉल्ट रूप से, 6 तत्वों वाला एक एक्शन पैनल संपादक के बाएं हिस्से में स्थित है:

एक्सप्लोरर, यह एक अंतर्निहित फ़ाइल प्रबंधक है;
खोज;
संस्करण नियंत्रण प्रबंधन प्रणाली;
लॉन्च और डिबगिंग अनुप्रयोगों;
विभिन्न ऐड-ऑन के लिए इंस्टॉलर हमारे संपादक हैं;
नीचे एक गियर है, जिस पर क्लिक करके हम मुख्य प्रोग्राम सेटिंग्स का एक मेनू देखेंगे।

कंडक्टर

एक्सप्लोरर के साथ शुरू करते हैं, इसे आइकन पर क्लिक करके या Ctrl + Shift + E दबाकर खोला जा सकता है ।

यह बहुत सुविधाजनक है कि जब आप आइकन पर मंडराते हैं, तो संपादक हमें कीबोर्ड शॉर्टकट के साथ संकेत देता है।

यहाँ हम 3 मुख्य टैब देखते हैं:

ओपन एडिटर - यहां एडिटिंग के लिए खुली हुई फाइलों की एक सूची होगी।
फ़ोल्डर्स, प्रोजेक्ट्स के साथ टैब। अब हमारे पास ओपन फोल्डर नहीं हैं।
संरचना - अब यहां कुछ भी नहीं है, हम बाद में इसे वापस कर देंगे।

स्वागत विंडो हम पहले से ही बंद कर सकते हैं। जब सभी विंडो बंद हो जाती हैं, तो संपादक एक स्टब प्रदर्शित करता है जहां यह मुख्य क्रियाओं के लिए कीबोर्ड शॉर्टकट दिखाता है:

संपादक में हमारे भविष्य की परियोजना के लिए एक खाली फ़ोल्डर जोड़ें। ऐसा करने के लिए, खोलें फ़ोल्डर पर क्लिक करें या बस इसे इस क्षेत्र में खींचें।

अब हमारे पास एक खाली hello_vscode फ़ोल्डर है, साथ ही कुछ नियंत्रण भी हैं:

फ़ाइल बनाएँ;
एक फ़ोल्डर बनाएं;
सभी फ़ाइलों और फ़ोल्डरों को अपडेट करें;
एक्सप्लोरर में सब कुछ संक्षिप्त करें।

आइए कुछ फाइलें बनाएं जो हमें प्रोजेक्ट के लिए चाहिए। फ़ाइल बनाएँ पर क्लिक करें, उदाहरण के लिए लिखें Index.html। आगे, हम एक css फोल्डर बना सकते हैं और उसमें एक style.css फ़ाइल बना सकते हैं। इस बिल्ट-इन फ़ाइल मैनेजर का उपयोग करना बहुत सुविधाजनक है।

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

अब हम Index.html पर जा सकते हैं और वहाँ कुछ दिलचस्प लिख सकते हैं, उदाहरण के लिए, "हैलो वीसी कोड"।

वाक्य - विन्यास पर प्रकाश डालना

सिंटैक्स हाइलाइटिंग के बारे में कुछ शब्द कहना चाहते हैं - यह संपादक की क्षमता है कि वह कोड को पहचान सके और अपने व्यक्तिगत तत्वों को चित्रित कर सके। जब हमने फ़ाइल खोली और उसमें काम करना शुरू किया, तो एक HTML तत्व अन्य नए तत्वों के अलावा स्टेटस बार के निचले भाग में दिखाई दिया। इसका मतलब यह है कि संपादक ने भाषा को मान्यता दी है और उसके अनुसार प्रकाश डाला है। इस तत्व पर क्लिक करने पर, हम विभिन्न भाषाओं के लिए हाइलाइट की एक बड़ी सूची देखेंगे।

इस सूची में पूरी तरह से सब कुछ शामिल नहीं हो सकता है। उदाहरण के लिए, यदि हम एक .kit फ़ाइल के साथ काम कर रहे हैं। आइए index.kit बनाएं और वहां अपना कोड कॉपी करें। हम देखेंगे कि कोई हाइलाइटिंग नहीं है, और html एलिमेंट के बजाय हम टेक्स्ट प्लेन टेक्स्ट देखते हैं। इस मामले में क्या करना है? हमें सादे पाठ पर क्लिक करने की आवश्यकता है और यहां हमारे पास एक विकल्प है - स्वचालित पहचान के बजाय, हम विशेष रूप से .kit फ़ाइलों के लिए सिंटैक्स हाइलाइटिंग के लिए ऐड-ऑन देखने का प्रयास कर सकते हैं।

यदि यह काम नहीं करता है, तो हम मैपिंग को कॉन्फ़िगर कर सकते हैं। यहां क्लिक करें और .kit फ़ाइलों के लिए एक मैपिंग भाषा चुनें। मेरे मामले में यह html है।

अब सभी .kit फाइलें प्रोग्राम को html फाइल के रूप में पहचानेंगी और तदनुसार हाइलाइट करेंगी। चलिए वापस अपनी असली html फाइल पर आते हैं। हम यहां संपादित की गई सभी चीज़ों को सहेज लेंगे। इस फ़ाइल को ब्राउज़र में खोलकर कार्य का परिणाम देखा जा सकता है। संरचना टैब में, हम देखेंगे कि हमारे दस्तावेज़ की ऐसी ट्री संरचना दिखाई दी है।

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

नतीजतन, मेरे पास केवल एक प्रोजेक्ट फ़ोल्डर होगा।

खोज

खोज ( Ctrl + Shift + F ) - वह चीज़ जो आपको चाहिए। हम हैलो शब्द लिखते हैं, जिसे हमने अपनी HTML फ़ाइल में इंगित किया है। खोज तुरंत पता चला, हाइलाइट किया गया, किस फ़ाइल में दिखाया गया। आप इस शब्द को तुरंत किसी अन्य के साथ बदल सकते हैं।

हमारे लिए यह सुविधाजनक है कि जिस शब्द को प्रतिस्थापित किया जाएगा, उस आइकन पर क्लिक करके यह सब दिखाया जाए।

संस्करण नियंत्रण प्रबंधन प्रणाली

टैब खोलें जिसे आप आइकन पर क्लिक कर सकते हैं या Ctrl + Shift + G दबाए रख सकते हैं । उन लोगों के लिए जो पहले से ही संस्करण नियंत्रण प्रणालियों से परिचित हैं, जैसे कि गिट, वह इस सुविधा की सराहना करेंगे। कुछ समय बाद मैं दिखाऊंगा कि कैसे अपने स्थानीय प्रोजेक्ट को GitHub पर रिपॉजिटरी से जोड़ना है।

आवेदन डिबगिंग

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

उदाहरण के लिए, हमारे पास कुछ प्रकार के जावास्क्रिप्ट कोड हैं, और डिबगिंग शुरू करने के लिए, हम यहां बटन पर क्लिक कर सकते हैं या 5 दबा सकते हैं।

डिबगिंग परिणाम नीचे पैनल में प्रदर्शित किया जाएगा, आप तथाकथित कोड ब्रेकप्वाइंट भी सेट कर सकते हैं और उनके बीच स्थानांतरित कर सकते हैं, जो बहुत सुविधाजनक है।

एक्सटेंशन

यहां हमारे पास हमारे संपादक के लिए एक्सटेंशन और प्लगइन्स का एक पूरा गोदाम है। भाषा पैक को स्थापित करने के लिए हम पहले ही इस टैब का उपयोग कर चुके हैं। हम आइकन पर क्लिक करते हैं या कुंजी संयोजन को दबाते हैं Ctrl + Shift + X हम एक्सटेंशन और तीन अतिरिक्त टैब के लिए एक खोज क्षेत्र देखेंगे:

सक्षम - सभी स्थापित एक्सटेंशन प्रदर्शित किए जाते हैं;
सिफारिश की
एक्सटेंशन जो इंस्टॉल किए गए हैं लेकिन अक्षम हैं।

हमारे इंस्टॉल किए गए एक्सटेंशन के साथ टैब में, हमारे पास उनकी त्वरित पहुंच है, हम देख सकते हैं, कुछ जानकारी पढ़ सकते हैं, गर्म कुंजी, इस एक्सटेंशन के बारे में सभी विवरणों का पता लगा सकते हैं। साथ ही, इसे डिलीट बटन पर क्लिक करके यहां डिलीट किया जा सकता है। हम एक्सटेंशन पर लौटेंगे और उनमें से सबसे अच्छा और सबसे उपयोगी इंस्टॉल करेंगे।

समायोजन

एक्शन पैनल में, हमारे पास अभी भी एक और तत्व - गियर - मुख्य सेटिंग्स मेनू है। यहां हम यहां या Ctrl + Shift + P क्लिक करके आदेशों का एक पैलेट कह सकते हैं । एक ब्लॉक खुल जाएगा, जहां हम किसी भी संपादक कमांड या इंस्टॉल किए गए प्लगइन्स को पा सकते हैं और निष्पादित कर सकते हैं।

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

एक्शन बार के साथ समाप्त होने पर, यह ध्यान देने योग्य है कि आप Ctrl + B के साथ अंतिम खुले टैब को जल्दी से कॉल कर सकते हैं। इसके अलावा, संदर्भ मेनू को छिपाते हुए, आप एक अनावश्यक आइटम छिपा सकते हैं। उदाहरण के लिए, मैं स्टार्ट और डीबग छिपाऊंगा। उसी संदर्भ मेनू में, आप संपूर्ण एक्शन बार छिपा सकते हैं।

संपादक क्षेत्र

पढ़ने में बहुत आलसी? यहाँ वीडियो संस्करण है।

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

सभी फ़ाइलों के प्रबंधन के लिए एक अतिरिक्त मेनू है।

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

कोड का सामान्य क्षेत्र - हम खुली फ़ाइल का कोड स्वयं देखते हैं, और दाईं ओर एक मिनी-मैप है जो आपको लंबी फ़ाइल के माध्यम से आसानी से नेविगेट करने की अनुमति देता है। बाईं ओर कोड क्षेत्र में एक छोटी सी जगह है, कोड को डीबग करने के लिए ब्रेकप्वाइंट सेट करने के लिए, लाइन नंबरिंग हैं।

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

हम यहां क्या कॉन्फ़िगर कर सकते हैं?

जैसा कि मैंने पहले ही दिखाया है, संपादक विंडो को कई भागों में विभाजित किया जा सकता है, विभिन्न फ़ाइलों के साथ काम करते समय यह सुविधाजनक है। विभिन्न विकल्पों को देखने के लिए, आपको व्यू> एडिटर लेआउट पर जाना होगा । यहां विकल्पों का एक गुच्छा है, उदाहरण के लिए, दो लाइनें, और हम यहां एक फ़ाइल स्थानांतरित कर सकते हैं और इस तरह से काम कर सकते हैं। एक 2x2 ग्रिड विकल्प भी है। यानी आप 4 फाइलों के साथ एक साथ काम कर सकते हैं।

आप फ़ाइलों को केवल खींचने और छोड़ने के द्वारा वांछित स्थिति को जल्दी से व्यवस्थित कर सकते हैं। मैंने तुरंत अपने लिए सही लेआउट का गठन किया। संपूर्ण संपादक क्षेत्र की उपस्थिति को अनुकूलित करना भी संभव है। मेनू> दृश्य> प्रकटन खोलें ।

नीचे पूरे कार्यक्रम के पैमाने को समायोजित करने की क्षमता है। फ़ॉन्ट आकार के साथ भ्रमित न करें। कीबोर्ड शॉर्टकट का उपयोग करना सुविधाजनक है। उदाहरण के लिए, मैं तत्वों को बढ़ाने के लिए Ctrl + , को कम करने के लिए - Ctrl- , रीसेट करने के लिए - Ctrl + 0 ।

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

इसके अलावा इस ब्लॉक में आप विभिन्न तत्वों को छिपा या दिखा सकते हैं। मैंने पहले कहा था कि हम पूरी अधिसूचना लाइन को छिपा सकते हैं, पूरी तरह से एक्शन बार को छिपा सकते हैं। इस ब्लॉक में हम यह सब जगह पर लौट सकते हैं।

स्क्रीन मोड

जब आप F11 दबाते हैं तो शीर्ष पर एक पूर्ण-स्क्रीन मोड होता है । शीर्ष मेनू, प्रोग्राम विंडो को प्रबंधित करने के लिए बटन छिपाए जाएंगे।

लेआउट का केंद्र संरेखण। कोड क्षेत्र केंद्रित है, आप चौड़ाई समायोजित कर सकते हैं। यह कोड पर बेहतर ध्यान केंद्रित करने के लिए है।

एक अद्भुत ज़ेन मोड है। यह सभी तत्वों को छुपाता है, यहां तक कि टैब भी फाइल करता है, हम केवल एक ही फाइल पर, एक कोड पर ध्यान केंद्रित करते हैं। हम एक कठिन कार्य को हल करते हैं जिसमें अधिकतम एकाग्रता की आवश्यकता होती है।

इसे बाहर निकलने के लिए, एस्केप दबाएं ।

पाठ रैपिंग

इसके अलावा, दृश्य मेनू में, हम टेक्स्ट रैपिंग को सक्षम या अक्षम कर सकते हैं, आप Alt + Z दबाकर ऐसा कर सकते हैं । इसका क्या मतलब है? उदाहरण के लिए, हमारे पास एक बहुत लंबा पाठ है जो कोड क्षेत्र में फिट नहीं है और क्षैतिज स्क्रॉलिंग दिखाई देती है। यदि यह असुविधाजनक लगता है, तो आप Alt + Z दबा सकते हैं , कोड क्षेत्र में फिट होने के लिए हमारे सभी पाठ लपेटे जाएंगे।

एक न्यूनतम, नियंत्रण, यानी ब्रेड क्रुम्ब्स को छिपाना या दिखाना संभव है। यदि यह अनावश्यक लगता है। यहां आप गैर-मुद्रण योग्य रिक्त स्थान और मुद्रण योग्य वर्ण प्रदर्शित कर सकते हैं और नियंत्रण वर्णों को आकर्षित कर सकते हैं जिन्हें पाठ में स्रोत से कॉपी किया जा सकता है।

रंग प्रणाली

हम Office पर जाकर, रंग विषय बिंदु में से एक स्थापित थीम चुन सकते हैं। हम सूची देखते हैं और कीबोर्ड पर तीर के साथ हम विषयों के बीच स्थानांतरित कर सकते हैं, अपने लिए सही विषय उठा सकते हैं। अंधेरे और प्रकाश दोनों विकल्प हैं।

यदि इनमें से कोई भी विषय उपयुक्त नहीं है, तो हम अपना स्वयं का सेट कर सकते हैं। ऐसा करने के लिए, मैं एक्सटेंशन्स टैब पर लौटता हूं, खोज क्षेत्र में मैं अपने विषय का नाम लिखता हूं - SpaceOceanKit। मुझे लगता है, स्थापित करें पर क्लिक करें। अगला, मेरे पास एक विकल्प है कि मैं किस विषय को चुनूं और मैं इसे चुनूं।

अब मेरे पास कोड सहित पूरा संपादक है, यह अलग दिखाई देगा। मैंने अपना थीम सेट किया है, आप कोई अन्य स्थापित कर सकते हैं।

कोड के साथ लंबे समय तक काम के लिए रंगों का संयोजन बहुत महत्वपूर्ण है, यह आपकी आंखों की धारणा, थकान और स्वास्थ्य को प्रभावित करता है। इसलिए सावधानी से अपने लिए एक विषय चुनें और ब्रेक लेना न भूलें।

प्रतीक

हम अपने एक्सप्लोरर में फ़ाइलों के लिए आइकन की उपस्थिति भी बदल सकते हैं। ऐसा करने के लिए, प्रबंधन> फ़ाइल आइकन थीम पर जाएं , यहां हम आइकन पूरी तरह से बंद कर सकते हैं या सूची से चुन सकते हैं।

अतिरिक्त आइकन पैक भी स्थापित करें। उदाहरण के लिए, माथेरियल आइकन थीम।

पैरामीटर

इसके अलावा, आप कोड के साथ और संपादक के साथ पूरी तरह से प्रोग्राम सेटिंग्स में काम करने के आराम को समायोजित कर सकते हैं। ऐसा करने के लिए, प्रबंधन> विकल्प पर जाएं या Ctrl + दबाए रखें ,

पैरामीटर्स को वैश्विक स्तर पर और किसी विशिष्ट प्रोजेक्ट के लिए कॉन्फ़िगर किया जा सकता है। यहां बहुत सारी सेटिंग्स हैं। हम मुख्य मार्गों से गुजरेंगे।

स्वत: सहेजना

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

इसे होने से रोकने के लिए, आप यहां मूल्य को तीन में से एक में बदल सकते हैं:

afterDelay - फ़ाइल को कुछ देरी के बाद सहेजा जाएगा, जिसे तुरंत यहां नीचे कॉन्फ़िगर किया जा सकता है। यदि आप किसी फ़ाइल को संपादित करते समय इस विकल्प का चयन करते हैं, तो यह तुरंत सहेज लिया जाएगा, एक बोल्ड डॉट भी दिखाई नहीं देगा।
onfocusChange - जब हम दूसरी फाइल में जाते हैं तो फाइल सेव हो जाएगी
onWindowChange - जब हम पूरी तरह से अलग प्रोग्राम पर जाते हैं, तो फाइल अपने आप सेव हो जाएगी।

अपने लिए एक सुविधाजनक विकल्प चुनें और आगे बढ़ें।

कोड प्रदर्शन

निम्नलिखित विकल्प आपको एक आरामदायक कोड डिस्प्ले सेट करने में मदद करेंगे। यह फ़ॉन्ट आकार और फ़ॉन्ट परिवार है। यहां आप वह मान चुन सकते हैं जो आपको सूट करता है।

मैं टैब करते समय इंडेंटेशन के आकार को समायोजित करता हूं। डिफ़ॉल्ट रूप से, यह 4 है। मेरे लिए, फ़ील्ड एक टैब के साथ बहुत चौड़ी है, इसलिए मैं इसे 3 में बदल देता हूं, इसलिए यह मेरे लिए अधिक कॉम्पैक्ट लगता है। आप उस मूल्य को इंगित करते हैं जो आपके लिए आरामदायक है।

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

किसी मौजूदा फ़ाइल को रिक्त स्थान के साथ परिवर्तित करने के लिए, आप स्थिति पट्टी पर जा सकते हैं, 4 रिक्त स्थान दबा सकते हैं और टैब चरणों में इंडेंट कन्वर्ट इंडेंट का चयन कर सकते हैं। इस प्रकार हम पहले से खोली गई फ़ाइलों को परिवर्तित कर सकते हैं।

और डिटेक्ट इंडेंटेशन विकल्प का उत्तर देता है कि नई खुली फ़ाइलों के लिए वर्णों के सम्मिलन का निर्धारण कैसे किया जाए। मैं चेकमार्क नहीं हटाऊंगा क्योंकि मैं चाहता हूं कि मेरी कॉन्फ़िगर सेटिंग्स सभी फाइलों के लिए काम करें।

टूलटिप्स छिपाएँ

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

लेकिन, इसके साथ ही, उपयोगी होने वाले कार्य गायब हो जाएंगे।
उदाहरण के लिए, स्टाइलशीट में हमारा रंग नीला है। इसे तुरंत उजागर किया जाता है। यदि होवर चालू होता है, तो जब आप किसी रंग पर मंडराते हैं, तो ऐसी चीज़ बाहर आती है:

हम इसे पारभासी बना सकते हैं, आरजीबीए मान सेट कर सकते हैं, या रंग को दूसरे में बदल सकते हैं। यदि हम हॉवर सक्षम चेकबॉक्स को साफ़ करते हैं, तो यह फ़ंक्शन भी गायब हो जाता है।

कलर डेकोरेटर्स पैरामीटर आउटपुट के लिए जिम्मेदार है, अगर इसकी आवश्यकता नहीं है, तो चेकमार्क हटाया जा सकता है और कोई रंग वर्ग नहीं होगा।

माउस व्हील ज़ूम - बॉक्स की जाँच करके, हम Ctrl दबाकर और माउस व्हील घुमाकर संपादक में फ़ॉन्ट आकार बदल सकते हैं ।

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

का प्रारूपण

सेटिंग्स का अगला समूह स्वरूपण के लिए जिम्मेदार है, जो पहले से ही वीसी कोड संपादक में बनाया गया है। स्वरूपण क्या है? उदाहरण के लिए, हम एक संरचना लिखते हैं, इसमें एक और संरचना है, लेकिन किसी कारण से एक टैब निकल गया है। जब आप Shift + Alt + F को पकड़ेंगे , तो सब कुछ उसी तरह से तैयार हो जाएगा, जैसा होना चाहिए।

वापस हमारी सेटिंग्स पर। यहां हम तीन चेकमार्क लगा सकते हैं:

फॉर्मेट ऑन पेस्ट - कोड पेस्ट करते ही फॉर्मेटिंग अपने आप हो जाएगी।
फ़ाइल सहेजने पर फ़ॉर्मेट ऑन सेव - फ़ॉर्मेटिंग हो जाएगी।
फॉर्मेट ऑन टाइप - फॉर्मेटिंग ऑटोमैटिक होगी, यानी हम प्रिंट करेंगे और सब कुछ एक ही बार में फॉर्मेट हो जाएगा।

मैंने एक चेकमार्क सेट किया - सहेजते समय स्वरूपण।
अब, जब टैब बंद हो जाता है, तो मैं ध्यान नहीं देता, फ़ाइल को बचाने के समय सब कुछ अपनी जगह पर होगा।

आप कार्यक्रम की वेबसाइट पर प्रलेखन को समझकर किसी विशेष भाषा के प्रारूपण के लिए बेहतर समायोजन कर सकते हैं। आप किसी विशिष्ट भाषा के लिए अतिरिक्त एक्सटेंशन भी स्थापित कर सकते हैं, साथ ही कई अन्य लोगों के लिए भी।

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

हमारे द्वारा कॉन्फ़िगर की गई हर चीज की त्वरित पहुंच के लिए, Ctrl + Shift + P दबाए रखें और खोज बार में लिखेंसेटिंग्स जब तक हम सेटिंग्स (JSON) नहीं देखते हैं। हम क्लिक करते हैं और हमारी सेटिंग्स हमारे सामने दिखाई देंगी, आप उन्हें तुरंत बदल सकते हैं।

उसी फ़ाइल में हम नए एक्सटेंशन को कॉन्फ़िगर करेंगे।

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

प्लगइन्स

पढ़ने में बहुत आलसी? यहाँ वीडियो संस्करण है।

चिंउंटी

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

यहाँ एक और उदाहरण है। हमें इसके लिए ब्लॉक वर्ग के साथ एक डिव बनाने की आवश्यकता है, मैं लिखता हूं । टैब को दबाएं और टैब दबाएं । किया हुआ!

या उदाहरण के लिए अधिक जटिल - हमें 10 तत्वों की एक बुलेटेड सूची बनाने की आवश्यकता है। उल> ली * 10 टैब लिखें । किया हुआ!

यही शैली फ़ाइलों पर लागू होती है। उदाहरण के लिए, बॉडी टैग के लिए, मैं फ़ॉन्ट आकार को 20 पिक्सेल पर सेट करना चाहता हूं। ऐसा करने के लिए, मेरे लिए fz20 लिखना पर्याप्त है । टैब दबाने से, मुझे एक तैयार-निर्मित पैरामीटर मिलता है।

आप इस ऐड- ऑन की वेबसाइट पर एम्मेट की विशेषताओं के बारे में अधिक जान सकते हैं ।

स्निपेट्स

लेकिन यह उस कोड के अन्य टुकड़े को जल्दी से कॉल करने के लिए अपने स्वयं के स्निपेट शॉर्टकट बनाने के लिए और भी ठंडा है।
पर जाएं प्रबंधन> कस्टम कोड स्निपेट्स । एक विकल्प है:

एक विशिष्ट भाषा के लिए स्निपेट बनाएं;
सभी भाषाओं के लिए स्निपेट बनाएं, लेकिन एक विशिष्ट परियोजना के लिए;
सभी भाषाओं के लिए और सभी परियोजनाओं के लिए वैश्विक स्निपेट बनाएं।

चलो वैश्विक बनाते हैं, यहां आपको स्निपेट की सूची में नाम दर्ज करने की आवश्यकता है।

मैं अपना टाइप करता हूं, क्लिक करता हूं और my.code-snippets फाइल खुलती है। कोई टिप्पणी की गई जानकारी है, साथ ही एक उदाहरण है। मैं उसे अनसुना कर दूंगा। यहाँ जावास्क्रिप्ट के लिए स्निपेट है।

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "