🧖🏼 🧑🏻‍🤝‍🧑🏻 🤴🏿 मैंने एटम और वीएस कोड के लिए एक एक्सटेंशन कैसे बनाया: व्यक्तिगत अनुभव और स्रोत 🍪 🦄 🧠

उन्होंने आपके लिए फिलिप कोरिया के एक लेख का अनुवाद किया कि कैसे उन्होंने एटम और वीएस कोड संपादकों के लिए एक्सटेंशन विकसित किए। परियोजनाओं को जटिल नहीं कहा जा सकता है, लेकिन यह उनका लाभ है: आप तुरंत समझ सकते हैं कि अपना विस्तार बनाने के लिए क्या करना चाहिए।

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

वैसे, मैं एटम के साथ दो कारणों से काम करता हूं। सबसे पहले, हर हफ्ते शानदार एक्सटेंशन होते हैं। दूसरा - मैं स्टैक जानता हूं और समस्याओं के बिना इसके साथ काम कर सकता हूं, मेरे अपने एक्सटेंशन के संस्करण बना सकते हैं।

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

स्किलबॉक्स सिफारिश करता है: फ्रंटेंड डेवलपर पेशे ऑनलाइन कोर्स।

बड़ा कर्सर विस्तार

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

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

इसके बाद, मैंने दस्तावेज़ीकरण (फिर से) का अध्ययन किया ताकि यह पता लगाया जा सके कि आप कमांड को कैसे पंजीकृत कर सकते हैं और कर्सर वर्ग में परिवर्तन लागू कर सकते हैं। पहले पुनरावृति बहुत सरल थी।

module.exports = activate: (state) -> atom.workspaceView.command 'big-cursor:toggle', @toggle toggle: ()-> atom.workspaceView.getActiveView() .find(".cursor").toggleClass("big-cursor") .big-cursor { top: 0 !important; height:100%; }

यह एक सरल और काम करने वाला विस्तार है।

उसका क्या हुआ?

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

वीएस कोड

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

ZSH में कई प्लगइन्स हैं, साथ ही आप उन्हें चलाने के लिए कमांड के छोटे संस्करणों का उपयोग कर सकते हैं। उदाहरण - git चेकआउट प्लगइन चलाना gco के साथ किया जा सकता है, और rs कमांड के साथ रेल सर्वर प्लगइन।

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

वीएस कोड के लिए एक विस्तार लेखन

इसलिए, मैंने एक्सटेंशन बनाने की संभावनाओं का पता लगाना शुरू किया। मैं पहले से ही कुछ बिंदुओं से थोड़ा परिचित था, क्योंकि मैंने स्क्री (क्रिस्टल के लिए भाषा सर्वर) के लिए अपने परिवर्धन किए, इसलिए मैंने वीएस कोड के लिए क्रिस्टल एक्सटेंशन का अध्ययन किया।

तो, यह योमन जनरेटर का उपयोग करके बनाया गया था। ऐसा लग रहा था:

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

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

मुझे जो एक्सटेंशन चाहिए, उसे बनाने के लिए, मुझे कुछ चीजें जानने की जरूरत है:

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

सभी डेटा प्राप्त करने के लिए मुझे प्रलेखन में तल्लीन करना पड़ा। एपीआई बहुत सीमित है, यह एक समस्या है। लेकिन मैंने वही किया जो मैंने प्लान किया था।

1. पैलेट बॉक्स

इसके लिए आपको DOM या व्यूज एक्सेस करने की आवश्यकता नहीं है। यहां उन विचारों का एक सेट है, जिनका आप उपयोग कर सकते हैं (उनमें से एक HTML पैनल है)। पैलेट बॉक्स के लिए एक प्रस्तुति थी, इसलिए मैं यह समझने में सक्षम था कि यह सब कैसे काम करता है।

2. पैलेट बॉक्स को छानना

मुझे यहां कोशिश करनी थी, क्योंकि क्विकपिक एपीआई ऐसा अवसर नहीं देता है। लेकिन उसके पास एक ऐसी घटना है जिसे हर बार जब कोई उपयोगकर्ता कुछ लिखना शुरू करता है, तो मैं विकल्पों की सूची को बदल सकता हूं। यह विकल्प आश्चर्यजनक रूप से अच्छी तरह से काम करता है।

  let disposable = vscode.commands.registerCommand('short-commands.activatePalette', () => { let list = vscode.window.createQuickPick<CommandOption>(); list.placeholder = "Hello type some stuff"; list.onDidChangeValue((ee) => { if (ee.length === 0) { list.items = []; } else { list.items = options.filter((e) => e.short.startsWith(ee)) } }); });

3. उपलब्ध आदेशों की एक सूची प्राप्त करें

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

 function parseExtensionCommands( extensions: Extension<any>[] ): CommandOption[] { let options: CommandOption[] = []; extensions.forEach(ext => { let { packageJSON: { contributes: { commands } = { commands: [] } } } = ext; if (commands) { commands.forEach((c: Command) => { options.push(new CommandOption(c)); }); } }); return options; }

4. कमांड का निष्पादन

खैर, यहां सब कुछ सरल है, हम वांछित कमांड को कॉल करने के लिए एपीआई की ओर मुड़ते हैं।

vscode.commands.executeCommand (list.activeItems [0] .command.command)

निष्कर्ष के रूप में

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

स्किलबॉक्स अनुशंसा करता है:

प्रैक्टिकल कोर्स "मोबाइल डेवलपर प्रो"
ऑनलाइन पाठ्यक्रम "वेब डेवलपर पेशे"
दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक प्रो वेब डेवलपर हूं । "

मैंने एटम और वीएस कोड के लिए एक एक्सटेंशन कैसे बनाया: व्यक्तिगत अनुभव और स्रोत

बड़ा कर्सर विस्तार

वीएस कोड

निष्कर्ष के रूप में

More articles: