मराठी

सानुकूल एक्सटेंशन्स तयार करायला शिकून VS कोडची शक्ती अनलॉक करा. हे मार्गदर्शक सेटअपपासून ते प्रकाशन करण्यापर्यंत संपूर्ण माहिती देते, ज्यामुळे तुम्ही तुमचे कोडिंग वातावरण सुधारू शकता आणि तुमच्या निर्मिती जगासोबत शेअर करू शकता.

VS कोड एक्सटेंशन डेव्हलपमेंटमध्ये प्राविण्य: जागतिक डेव्हलपर्ससाठी एक सर्वसमावेशक मार्गदर्शक

व्हिज्युअल स्टुडिओ कोड (VS कोड) जगभरातील लाखो डेव्हलपर्ससाठी एक पसंतीचा कोड एडिटर बनला आहे. त्याची लोकप्रियता त्याच्या हलकेपणामुळे, शक्तिशाली वैशिष्ट्यांमुळे आणि, सर्वात महत्त्वाचे म्हणजे, त्याच्या विस्तारक्षमतेमुळे (extensibility) आहे. सानुकूल (custom) एक्सटेंशन्स तयार करण्याची क्षमता डेव्हलपर्सना त्यांच्या विशिष्ट गरजांनुसार एडिटरला अनुकूल बनविण्याची संधी देते, ज्यामुळे उत्पादकता वाढते आणि वर्कफ्लो सुव्यवस्थित होतो. हे सर्वसमावेशक मार्गदर्शक तुम्हाला तुमचे स्वतःचे VS कोड एक्सटेंशन्स तयार करण्याच्या प्रक्रियेतून घेऊन जाईल, सुरुवातीच्या सेटअपपासून ते तुमची निर्मिती जगासमोर प्रकाशित करण्यापर्यंत.

VS कोड एक्सटेंशन्स का विकसित करावे?

VS कोड एक्सटेंशन्स विकसित केल्याने वैयक्तिक डेव्हलपर्स आणि संस्था दोघांनाही अनेक फायदे मिळतात:

पूर्व-आवश्यकता

एक्सटेंशन डेव्हलपमेंटमध्ये जाण्यापूर्वी, तुमच्याकडे खालील गोष्टी इंस्टॉल असल्याची खात्री करा:

तुमचे डेव्हलपमेंट वातावरण सेट करणे

पूर्व-आवश्यकता पूर्ण झाल्यावर, तुम्ही तुमचे डेव्हलपमेंट वातावरण सेट करण्यास तयार आहात:

  1. नवीन एक्सटेंशन प्रोजेक्ट तयार करा: तुमचा टर्मिनल उघडा आणि एक्सटेंशन जनरेटर सुरू करण्यासाठी खालील कमांड चालवा:
  2. yo code
  3. प्रॉम्प्ट्सना उत्तरे द्या: जनरेटर तुम्हाला तुमच्या एक्सटेंशनबद्दल काही प्रश्न विचारेल. येथे काही सामान्य प्रॉम्प्ट्स आणि शिफारस केलेल्या उत्तरांचे विवरण दिले आहे:
    • तुम्ही कोणत्या प्रकारचे एक्सटेंशन तयार करू इच्छिता? टाइपस्क्रिप्ट-आधारित एक्सटेंशनसाठी "New Extension (TypeScript)" निवडा, जो शिफारस केलेला दृष्टिकोन आहे.
    • तुमच्या एक्सटेंशनचे नाव काय आहे? तुमच्या एक्सटेंशनसाठी एक वर्णनात्मक आणि अद्वितीय नाव निवडा. उदाहरणे: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • तुमच्या एक्सटेंशनचा आयडेंटिफायर काय आहे? हा तुमच्या एक्सटेंशनसाठी एक अद्वितीय आयडेंटिफायर आहे, सामान्यतः `publisher.extension-name` या स्वरूपात. एक प्रकाशक नाव निवडा (उदा. तुमचे GitHub वापरकर्तानाव किंवा कंपनीचे नाव).
    • तुमच्या एक्सटेंशनचे वर्णन काय आहे? तुमचे एक्सटेंशन काय करते याचे संक्षिप्त आणि माहितीपूर्ण वर्णन द्या.
    • एक गिट रिपॉझिटरी सुरू करायची आहे का? आवृत्ती नियंत्रणासाठी (version control) गिट रिपॉझिटरी सुरू करण्यासाठी "Yes" निवडा.
    • कोड लिंट करण्यासाठी तुम्हाला eslint वापरायचे आहे का? कोड शैलीची सुसंगतता लागू करण्यासाठी "Yes" निवडा.
  4. VS कोडमध्ये प्रोजेक्ट उघडा: जनरेटर पूर्ण झाल्यावर, नव्याने तयार झालेला प्रोजेक्ट फोल्डर VS कोडमध्ये उघडा.

प्रोजेक्टची रचना समजून घेणे

एक्सटेंशन जनरेटर खालील प्रमुख फाइल्ससह एक मूलभूत प्रोजेक्ट रचना तयार करतो:

तुमचे पहिले एक्सटेंशन लिहिणे

चला, एक साधे एक्सटेंशन तयार करून सुरुवात करूया जे कमांड कार्यान्वित झाल्यावर "Hello World" संदेश प्रदर्शित करेल:

  1. `src/extension.ts` उघडा: या फाइलमध्ये `activate` फंक्शन आहे, जे तुमचे एक्सटेंशन सक्रिय झाल्यावर कॉल केले जाते.
  2. `activate` फंक्शनमध्ये बदल करा: विद्यमान कोडला खालील कोडने बदला:
  3. import * as vscode from 'vscode';
    
    export function activate(context: vscode.ExtensionContext) {
    	console.log('Congratulations, your extension \"my-extension\" is now active!');
    
    	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
    		vscode.window.showInformationMessage('Hello World from My Extension!');
    	});
    
    	context.subscriptions.push(disposable);
    }
    
    export function deactivate() {}
  4. स्पष्टीकरण:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: `my-extension.helloWorld` या ID सह एक कमांड नोंदणीकृत करते. ही कमांड VS कोड कमांड पॅलेटमध्ये उपलब्ध असेल.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: VS कोड विंडोमध्ये एक माहिती संदेश प्रदर्शित करते.
    • `context.subscriptions.push(disposable)`: एक्सटेंशनच्या सबस्क्रिप्शनमध्ये कमांड जोडते, ज्यामुळे एक्सटेंशन निष्क्रिय झाल्यावर ते योग्यरित्या डिस्पोझ होईल याची खात्री होते.
  5. `package.json` मध्ये बदल करा: कमांड परिभाषित करण्यासाठी `contributes` विभागात खालील माहिती जोडा:
  6. "contributes": {
    		"commands": [{
    			"command": "my-extension.helloWorld",
    			"title": "Hello World"
    		}]
    	}
  7. स्पष्टीकरण:
    • `"commands"`: तुमचे एक्सटेंशन योगदान देत असलेले कमांड्स परिभाषित करते.
    • `"command": "my-extension.helloWorld"`: `extension.ts` मध्ये वापरलेल्या ID शी जुळणारा कमांड ID निर्दिष्ट करते.
    • `"title": "Hello World"`: कमांड पॅलेटमधील कमांडसाठी प्रदर्शन नाव सेट करते.

तुमचे एक्सटेंशन तपासणे

आता तुमचे एक्सटेंशन तपासण्याची वेळ आली आहे:

  1. F5 दाबा: हे तुमचे एक्सटेंशन इंस्टॉल केलेली एक नवीन VS कोड विंडो सुरू करेल. ही "एक्सटेंशन डेव्हलपमेंट होस्ट" आहे.
  2. कमांड पॅलेट उघडा: कमांड पॅलेट उघडण्यासाठी `Ctrl+Shift+P` (किंवा macOS वर `Cmd+Shift+P`) दाबा.
  3. "Hello World" टाइप करा: तुम्हाला तुमची कमांड कमांड पॅलेटमध्ये सूचीबद्ध दिसेल.
  4. "Hello World" निवडा: कमांडवर क्लिक केल्याने ती कार्यान्वित होईल आणि VS कोड विंडोमध्ये "Hello World" संदेश प्रदर्शित होईल.

तुमचे एक्सटेंशन डीबग करणे

तुमच्या एक्सटेंशनमधील समस्या ओळखण्यासाठी आणि त्या दूर करण्यासाठी डीबगिंग महत्त्वपूर्ण आहे. VS कोड उत्कृष्ट डीबगिंग समर्थन प्रदान करते:

  1. ब्रेकपॉइंट्स सेट करा: तुमच्या कोडमध्ये ब्रेकपॉइंट्स सेट करण्यासाठी ओळींच्या क्रमांकाच्या पुढील एडिटर गटरमध्ये क्लिक करा.
  2. F5 दाबा: हे डीबग मोडमध्ये एक्सटेंशन डेव्हलपमेंट होस्ट सुरू करेल.
  3. तुमचे एक्सटेंशन ट्रिगर करा: ज्या कोडला तुम्ही डीबग करू इच्छिता तो ट्रिगर करणारी कमांड किंवा क्रिया कार्यान्वित करा.
  4. व्हेरिएबल्स आणि कॉल स्टॅक तपासा: VS कोड डीबगर तुमच्या ब्रेकपॉइंट्सवर कार्यान्वयन थांबवेल, ज्यामुळे तुम्हाला व्हेरिएबल्स तपासता येतील, कोडमधून स्टेप-थ्रू करता येईल आणि कॉल स्टॅक तपासता येईल.

VS कोड API सोबत काम करणे

VS कोड API एडिटरशी संवाद साधण्यासाठी इंटरफेस आणि फंक्शन्सचा एक समृद्ध संच प्रदान करते. API ची काही प्रमुख क्षेत्रे येथे आहेत:

उदाहरण: कोड स्निपेट एक्सटेंशन तयार करणे

चला एक एक्सटेंशन तयार करूया जे एक मूलभूत रिॲक्ट कॉम्पोनेंट तयार करण्यासाठी कोड स्निपेट जोडेल:

  1. `snippets` फोल्डर तयार करा: तुमच्या प्रोजेक्टच्या रूटमध्ये `snippets` नावाचा एक नवीन फोल्डर तयार करा.
  2. स्निपेट फाइल तयार करा: `snippets` फोल्डरमध्ये `react.json` नावाची फाइल तयार करा.
  3. स्निपेटची व्याख्या जोडा: `react.json` मध्ये खालील JSON जोडा:
  4. {
    	"React Component": {
    		"prefix": "reactcomp",
    		"body": [
    			"import React from 'react';",
    			"",
    			"interface Props {\n\t[key: string]: any;\n}",
    			"",
    			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};", "", "export default ${1:ComponentName};" ], "description": "Creates a basic React component" } }
  5. स्पष्टीकरण:
    • `"React Component"`: स्निपेटचे नाव.
    • `"prefix": "reactcomp"`: स्निपेटला ट्रिगर करणारा उपसर्ग. `reactcomp` टाइप करून `Tab` दाबल्यास स्निपेट टाकला जाईल.
    • `"body"`: स्निपेटमधील कोडच्या ओळी दर्शविणारी स्ट्रिंगची ॲरे.
    • `${1:ComponentName}`: एक टॅब स्टॉप जो तुम्हाला पटकन कॉम्पोनेंटचे नाव बदलण्याची परवानगी देतो.
    • `"description"`: स्निपेटचे वर्णन.
  6. `package.json` मध्ये बदल करा: `contributes` विभागात खालील माहिती जोडा:
  7. "contributes": {
    		"snippets": [{
    			"language": "javascriptreact",
    			"path": "./snippets/react.json"
    		}]
    	}
  8. स्पष्टीकरण:
    • `"snippets"`: तुमचे एक्सटेंशन योगदान देत असलेले स्निपेट्स परिभाषित करते.
    • `"language": "javascriptreact"`: ज्या भाषेसाठी स्निपेट लागू आहे ती निर्दिष्ट करते.
    • `"path": "./snippets/react.json"`: स्निपेट फाइलचा मार्ग निर्दिष्ट करते.
  9. तुमचे स्निपेट तपासा: एक `.jsx` किंवा `.tsx` फाइल उघडा आणि `reactcomp` टाइप करा. स्निपेट टाकण्यासाठी `Tab` दाबा.

प्रगत एक्सटेंशन डेव्हलपमेंट तंत्र

एकदा तुम्ही मूलभूत गोष्टींमध्ये प्रभुत्व मिळवल्यानंतर, तुम्ही अधिक प्रगत एक्सटेंशन डेव्हलपमेंट तंत्र शोधू शकता:

आंतरराष्ट्रीयीकरण आणि स्थानिकीकरण (i18n आणि L10n)

जागतिक प्रेक्षकांपर्यंत पोहोचण्यासाठी, तुमच्या एक्सटेंशनचे आंतरराष्ट्रीयीकरण आणि स्थानिकीकरण करण्याचा विचार करा. यामध्ये तुमच्या एक्सटेंशनला विविध भाषा आणि प्रदेशांना समर्थन देण्यासाठी अनुकूल करणे समाविष्ट आहे.

तुमचे एक्सटेंशन प्रकाशित करणे

एकदा तुमचे एक्सटेंशन तयार झाल्यावर, तुम्ही ते इतरांना वापरण्यासाठी VS कोड मार्केटप्लेसवर प्रकाशित करू शकता:

  1. एक Azure DevOps संस्था तयार करा: तुमचे एक्सटेंशन प्रकाशित करण्यासाठी तुम्हाला Azure DevOps संस्थेची आवश्यकता असेल. तुमच्याकडे ती नसल्यास, Azure DevOps वेबसाइटवर एक विनामूल्य खाते तयार करा.
  2. `vsce` टूल इंस्टॉल करा: VS कोड एक्सटेंशन मॅनेजर (`vsce`) हे एक्सटेंशन्स पॅकेज आणि प्रकाशित करण्यासाठी एक कमांड-लाइन टूल आहे. ते npm वापरून जागतिक स्तरावर इंस्टॉल करा:
  3. npm install -g vsce
  4. एक प्रकाशक (Publisher) तयार करा: प्रकाशक ही एक ओळख आहे जी मार्केटप्लेसवर तुमच्या एक्सटेंशन्सची मालकी ठेवते. `vsce create-publisher` कमांड वापरून एक प्रकाशक तयार करा. तुम्हाला एक प्रकाशक नाव आणि Azure DevOps वरून एक वैयक्तिक प्रवेश टोकन (PAT) प्रदान करणे आवश्यक असेल.
  5. एक वैयक्तिक प्रवेश टोकन (PAT) तयार करा: Azure DevOps मध्ये, "User Settings" -> "Personal Access Tokens" वर जा आणि "Marketplace (Publish)" स्कोपसह एक नवीन PAT तयार करा.
  6. तुमचे एक्सटेंशन पॅकेज करा: तुमचे एक्सटेंशन `.vsix` फाइलमध्ये पॅकेज करण्यासाठी `vsce package` कमांड वापरा.
  7. तुमचे एक्सटेंशन प्रकाशित करा: तुमचे एक्सटेंशन मार्केटप्लेसवर प्रकाशित करण्यासाठी `vsce publish` कमांड वापरा. तुम्हाला तुमचे प्रकाशक नाव आणि तुमचा PAT प्रदान करणे आवश्यक असेल.

एक्सटेंशन डेव्हलपमेंटसाठी सर्वोत्तम पद्धती

उच्च-गुणवत्तेची आणि देखरेख करण्यायोग्य VS कोड एक्सटेंशन्स तयार करण्यासाठी या सर्वोत्तम पद्धतींचे अनुसरण करा:

समुदाय संसाधने

VS कोड एक्सटेंशन डेव्हलपमेंटबद्दल अधिक जाणून घेण्यासाठी येथे काही मौल्यवान संसाधने आहेत:

निष्कर्ष

VS कोड एक्सटेंशन्स विकसित करणे हे तुमचे कोडिंग वातावरण सानुकूलित करण्याचा, उत्पादकता वाढवण्याचा आणि जागतिक डेव्हलपर समुदायासोबत तुमचे उपाय शेअर करण्याचा एक शक्तिशाली मार्ग आहे. या सर्वसमावेशक मार्गदर्शकाचे अनुसरण करून, तुम्ही एक्सटेंशन डेव्हलपमेंटच्या कलेत प्रभुत्व मिळवू शकता आणि तुमच्यासाठी आणि इतरांसाठी VS कोड अनुभव वाढवणारी नाविन्यपूर्ण साधने तयार करू शकता. समुदायाला स्वीकारण्याचे, ओपन-सोर्स प्रोजेक्ट्समध्ये योगदान देण्याचे आणि VS कोड एक्सटेंशन डेव्हलपमेंटच्या सतत विकसित होणाऱ्या जगात सतत शिकण्याचे आणि अन्वेषण करण्याचे लक्षात ठेवा. शुभेच्छा आणि हॅपी कोडिंग!