VS Code Snippets

विजुअल स्टूडियो कोड के भीतर हम स्वयं का शॉर्टकट्स भी बना सकते हैं। स्वयं का शॉर्टकट्स बनाने के लिए हमें Preferences के भीतर जाना होता है जो सेटिंग्स का एक पार्ट है आप File मेंनू के भीतर भी इसे पा सकते है Preferences की भीतर जाकर आप Keyboard Shortcuts को सर्च कर सकते हैं सर्च करने के बाद आप JavaScript सर्च करेंगे क्योंकि विजुअल स्टूडियो कोड का उपयोग अलग-अलग तरह के प्रोग्रामिंग लैंग्वेज के लिए होता है तो आप किस लैंग्वेज के लिए शॉर्टकट बनाना चाहते हैं यह विजुअल स्टूडियो को पहले बताना होगा जब आपने जावास्क्रिप्ट का चयन कर लिया तो उससे संबंधित शॉर्टकट को आप बना सकते हैं। बने हुए शॉर्टकट्स को भी आप परिवर्तित कर सकते हैं।

विजुअल स्टूडियो कोड के भीतर Keyboard Shortcuts के अलावा आप अपने Snippet को भी तैयार कर सकते हैं Snippet से अभिप्राय:- VS Code Editor के भीतर संक्षिप्त कोड लिखकर Tab दबाने के बाद वह कोड Expand कर जाता है इसे ही Snippet कहते हैं उदाहरण के लिए जावास्क्रिप्ट के कोडिंग के भीतर console.log लिखने के लिए आप एक छोटा सा शब्द clg लिखिए और Tab को प्रेस कीजिए तो वह एक्सपेंड होकर console.log बन जाएगा इसके लिए आपके आपको नीचे दिए गया Snippet कोड लिखना होगा। 

"Console Log": {

    "prefix": "clg",

    "body": [

        "console.log($1);"

    ],

    "description": "Console log with placeholder"

}

ऊपर लिखे गए Snippet के कोड की व्याख्या कुछ इस प्रकार है सबसे पहले हम JSON सिंटेक्स को use करते हुए अपने Snippet को लिखते हैं।

Key और value दोनो को double quotation के भीतर लिखते हैं।

सबसे पहले Snippet का एक मीनिंगफुल नाम देते हैं जैसे कि हमने Console Log लिखा है यह एक मीनिंगफुल नाम है जो बताता है कि यह console.log लिखने के लिए snippet है।

हमें क्या करना होगा इसकी व्याख्या उसके बॉडी के भीतर अर्थात curly braces के भीतर है। बॉडी के भीतर हमें prefix key का जो वैल्यू दिख रहा है वह keys के संजोग को बता रहा है जिसको लिखने के बाद Tab दबाने पर

हमारा कोड एक्सपेंड होकर console.log बन जाएगा। ध्यान दीजिए कि प्रीफिक्स keys के संयोग को बताता है जिसको लिखने के बाद tab प्रेस करना है।

body key के value के द्वारा उस expansion को दिया गया है जो Tab के दबाव के बाद बनेगा। body का value एक array है क्योंकि हम कई सारे statements को एक snippet के द्वारा लिख सकते हैं। उदाहरण के लिए, console.log(); लिखने के लिए हम value के लिए console.log(); लिखेंगे। 

अब प्रश्न है कि Tab दबाने पर कर्सर की position कहाँ होगी। इसके लिए $1 का उपयोग किया गया है। चूँकि $1 को () के भीतर लिखा गया है। अतः कर्सर पोजिशन () के भीतर होगा।

NOTE: बस आपको $1 का अर्थ समझना है बाकी जो आप एक्सपेंशन चाहते हैं वह नॉर्मल तरीके से लिखना है। $1 बताता है की कीबोर्ड के Tab को प्रेस करने के बाद कीबोर्ड का कर्सर कहां पर पहुंचेगा। जैसा कि हमने console.log के parentheses के भीतर $1 लिखा है इसका अर्थ यह है कि Tab प्रेस करने पर एक्सपेंशन के बाद पेरैंथेसिस के भीतर cursor blink करेगा।

अब हम एक दूसरी स्थिति को देखते हैं जो नीचे दिए गए परिवर्तित Snippet के code में $2 के साथ है।

"Console Log": {

    "prefix": "clg",

    "body": [

        "console.log($1);$2"

    ],

    "description": "Console log with placeholder"

}

ऊपर के दिए गए Snippet में $2 का अर्थ यह है कि यदि यूजर दूसरी बार Tab को प्रेस करेगा तो कर्सर कहां पर पहुंचेगा। जैसा कि ऊपर Snippet दिया गया है उसमें $2 सेमीकलन के बाद है इसका अर्थ है कि जब यूजर दूसरी बार Tab प्रेस करेगा तो सेमीकॉलन के बाद कर्सर बिलिंग करेगा

अब हम तीसरी स्थिति को देखते हैं जो कि नीचे दिए गए Snippet में परिवर्तित कोड से स्पष्ट है

"Console Log": {

    "prefix": "clg",

    "body": [

        "console.log('$1');$2"

    ],

    "description": "Console log with placeholder"

}

इस बार हमने $1 को सिंगल quotation के भीतर लिखा है इसका अर्थ यह है कि जब पहली बार Tab प्रेस होगा तो कर्सर जहां बिलिंग करेगा उसके अराउंड एक सिंगल quotation बन जाएगा और जब यूजर टाइप करेगा तो सिंगल quotation के भीतर टेक्स्ट appear होगा।

आशा है कि आपको यह छोटा सा Tips पसंद आया होगा