गुप्त हैक वीएस कोड

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



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

रूप में सुधार

1. सामग्री थीम और प्रतीक

यह वीएस कोड थीम में एक जानवर है। मुझे लगता है कि सामग्री विषय संपादक में कागज पर कलम के साथ लिखने के सबसे करीब है (विशेषकर गैर-विपरीत विषय का उपयोग करते समय)। आपका एडिटर लगभग सुचारू दिखता है, बिल्ट-इन टूल्स से टेक्स्ट एडिटर की ओर बढ़ रहा है।

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



2. केंद्र के साथ ज़ेन मोड

आप ज़ेन व्यू मोड को पहले से ही जान सकते हैं, जिसे डिस्ट्रेक्शन फ़्री व्यू (उदात्त पाठ जानने वालों के लिए) के रूप में भी जाना जाता है, जहाँ सब कुछ (कोड को छोड़कर) हटा दिया जाता है ताकि कोड संपादक से कुछ भी न हटे। क्या आप जानते हैं कि आप कोड पढ़ने के लिए स्थान को केंद्र में रख सकते हैं, जैसे कि एक पीडीएफ दर्शक का उपयोग करना? यह फ़ंक्शंस पर ध्यान केंद्रित करने या किसी और के कोड को सीखने में मदद करता है।

ज़ेन मोड : [देखें> सूरत> ज़ेन मोड टॉगल करें]

केंद्र लेआउट : [देखें> सूरत> टॉगल केंद्रित लेआउट]



3. ligatures के साथ फ़ॉन्ट्स

लेखन शैली पढ़ने को आसान और सुविधाजनक बनाती है। आप अपने संपादक को बढ़िया फोंट और लिगचर के साथ बेहतर बना सकते हैं। यहाँ 6 सर्वश्रेष्ठ फोंट हैं जो लिगिंग्स का समर्थन करते हैं।



फिरा कोड का उपयोग करके देखें। यह कमाल का और ओपन सोर्स है।

तो आप इसे स्थापित करने के बाद VSCode में फ़ॉन्ट बदल सकते हैं:

"editor.fontFamily": "Fira Code", "editor.fontLigatures": true 

4. रेनबो इंडेंट

शैली के साथ इंडेंट। यह विस्तार पाठ के इंडेंटेशन को रंग देता है, प्रत्येक चरण में चार अलग-अलग रंगों को वैकल्पिक करता है।



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

 "indentRainbow.colors": [ "rgba(16,16,16,0.1)", "rgba(16,16,16,0.2)", "rgba(16,16,16,0.3)", "rgba(16,16,16,0.4)", "rgba(16,16,16,0.5)", "rgba(16,16,16,0.6)", "rgba(16,16,16,0.7)", "rgba(16,16,16,0.8)", "rgba(16,16,16,0.9)", "rgba(16,16,16,1.0)" ], 

5. टाइटल बार सेट करना

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



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

कोड लेखन में तेजी

1. टैगिंग

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

देख लेना।



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

2. शेष अंदर की ओर और बाहर की ओर

मैं vscodecandothat.com देखने की सलाह देता हूं

आप इनवॉइस को balance inward और balance outward कमांड का उपयोग करके संपूर्ण टैग का चयन कर सकते हैं। इन कमांड को कीबोर्ड शॉर्टकट के साथ जोड़ना उपयोगी है, जैसे कि Ctrl+Shift+Up Arrow for Balance आउटवर्ड और Ctrl+Shift+Down Arrow for Balance इनवर्ड।



3. टर्बो कंसोल.लॉग ()

कोई भी लंबे कार्यों जैसे कंसोल.लॉग () को प्रिंट करना पसंद नहीं करता है। यह वास्तव में कष्टप्रद है यदि आप किसी चीज़ को तेज़ी से आउटपुट करना चाहते हैं, तो मूल्य देखें और कोड लिखना जारी रखें।

आप टर्बो कंसोल लॉग एक्सटेंशन का उपयोग करके ऐसा कर सकते हैं। यह आपको कोड संरचना के बाद एक स्वचालित उपसर्ग के साथ नीचे की रेखा में किसी भी चर को पंजीकृत करने की अनुमति देता है। आप एक्सटेंशन जोड़ने के बाद पूरे कंसोल को alt+shift+u/alt+shift+c भी अनलिमिटेड / कमेंट कर सकते हैं।



4. लाइव सर्वर

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

आप इसे यहाँ डाउनलोड कर सकते हैं ।



5. कई कर्सर के साथ कॉपी-पेस्ट

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



6. ब्रेडक्रंब और रूपरेखा

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

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

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

अन्य हैक

छोटी छोटी तरकीबें जो सब कुछ बदल देती हैं

1. कोड सीएलआई

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



कल्पना करें कि आपके पास केवल एक git clone <repo-url> repository और आप VS कोड के वर्तमान उदाहरण को बदलना चाहते हैं जिसे आप उपयोग कर रहे हैं। code. -r code. -r को छोड़े बिना ऐसा करेंगे।

2. पोलाकोड

आप अक्सर कस्टम फोंट और कस्टम फोंट और थीम के साथ स्निपेट पर आते हैं, जैसा कि नीचे दिखाया गया है। यह ध्रुवीय कोड विस्तार के साथ वीएस कोड में किया गया था।



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

3. क्वोकका (जेएस / टीएस स्क्रैचपैड)

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



Quokka का उपयोग करने का एक शानदार उदाहरण है जब आप एक तकनीकी साक्षात्कार की तैयारी कर रहे हैं, तो आप डिबगर्स में ब्रेकपॉइंट्स सेट किए बिना प्रत्येक चरण को आउटपुट कर सकते हैं।

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

4. वकाटम

दोस्तों आपको लगता है कि आप बहुत अधिक समय बिताते हैं? WakaTime एक ऐसा विस्तार है जो आपकी गतिविधि के बारे में मीट्रिक और विश्लेषण रिकॉर्ड करने और संग्रहीत करने में आपकी सहायता करता है। उन्हें बताएं कि दिन में 10 घंटे बहुत ज्यादा नहीं हैं।





आप लक्ष्य निर्धारित कर सकते हैं, उन प्रोग्रामिंग भाषाओं को ब्राउज़ कर सकते हैं जिन्हें आप अक्सर उपयोग करते हैं, आप खुद को प्रौद्योगिकी की दुनिया के अन्य नन्हों से भी तुलना कर सकते हैं।

5. VSCode हैकर टाइपर

क्या आपने कभी भीड़ के सामने कोड टाइप किया है? अक्सर हम मशीन पर प्रिंट करते हैं, समानांतर में बात करते हैं, इस वजह से हम गलतियां करते हैं। पूर्व-टाइप किए गए कोड की कल्पना करें, जब आप केवल टाइपिंग का अनुकरण करते हैं, जैसे कि geektyper में ।

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

6. फ़ोल्डरों को छोड़ दें

मैंने StackOverFlow की एक पोस्ट के लिए इस ट्रिक को सीखा। यह मुख्य चीज़ पर ध्यान केंद्रित करने में मदद करने के लिए एक्सप्लोरर ट्री से नोड_मॉड्यूल्स या किसी भी अन्य जैसे फ़ोल्डर को बाहर करने की एक त्वरित चाल है। व्यक्तिगत रूप से, मुझे संपादक में थकाऊ नोड_मॉडल फ़ोल्डर खोलने से नफरत है, इसलिए मैंने इसे छिपाने का फैसला किया।

नोड_मॉड्यूल्स को छिपाने के लिए आप यह कर सकते हैं:

1. फ़ाइल> वरीयताएँ> सेटिंग्स (या मैक कोड में> वरीयताएँ> सेटिंग्स ) पर जाएँ
2. सेटिंग्स में files.exclude खोजें
3. ऐड टेम्प्लेट चुनें और **/node_modules
4. देखा! नोड_मॉड्यूल खोजकर्ता पेड़ से गायब हो गए

ये मेरे हैक थे कि कोड को और भी बेहतर कैसे लिखा जाए। अपनी टिप्पणी में साझा करें