🙌🏾 🛠️ 👩‍🔧 एक सामान्य व्यक्ति की आईडीई या हमने मोनाको को क्यों चुना 🤶🏻 👨🏽‍🚀 ⏯️

संपादक का नोट

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

कोड संपादक के लिए कौन सी लाइब्रेरी चुनें?

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

अंत में, हमारे पास चुनने के लिए 3 पुस्तकालय हैं: ऐस , कोडमिरर और मोनाको संपादक । इनमें से सबसे पहला, कोडमिरर , बर्लिनर मेरीजन हावेर्बके की एक निजी पहल थी, जिसे अपने ऑनलाइन ट्यूटोरियल, एलक्वेंटेंट जावास्क्रिप्ट में एक व्यायाम कोड संपादक की आवश्यकता थी। संपादक का पहला संस्करण 2007 में जारी किया गया था। 2010 में, ऐस का पहला संस्करण JSConf.eu में उसी बर्लिन में प्रस्तुत किया गया था, जिसे तब Ajax.org ने अपने क्लाउड IDE Cloud9 के लिए विकसित किया था (वास्तव में, Ace का अर्थ Ajax.org Cloud9 Editor है)। 2016 में, Cloud9 को अमेज़न द्वारा खरीदा गया था और अब यह AWS का हिस्सा है। नवीनतम, मोनाको संपादक, वीएस कोड का एक घटक है और 2015 के अंत में माइक्रोसॉफ्ट द्वारा प्रकाशित किया गया था।

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

	पुस्तकालयों
	ऐस	CodeMirror	मोनाको
डेवलपर	Cloud9 IDE (Ajax.org), अब AmazonMozilla का हिस्सा है	मरिजन हैवरबेके	माइक्रोसॉफ्ट
ब्राउज़र का समर्थन	फ़ायरफ़ॉक्स ^ 3.5 क्रोम सफारी ^ 4.0 IE ^ 8.0 ओपेरा ^ 11.5	फ़ायरफ़ॉक्स ^ 3.0 क्रोम सफारी ^ 5.2 IE ^ 8.0 ओपेरा ^ 9.2	फ़ायरफ़ॉक्स ^ 4.0 क्रोम सफ़ारी (v -?) IE ^ 11.0 ओपेरा ^ 15.0
भाषा का समर्थन (वाक्य रचना हाइलाइटिंग)	> 120	> 100 रु	> २०
में वर्णों की संख्या पर नवीनतम संस्करण cndjs.com	366 608 (v1.4.3)	394,269 (v5.44.0)	2,064,949 (v0.16.2)
नवीनतम संस्करणों का वजन, gzip	२.१४ 2. केबी	१.४११ केबी	10.898 केबी
प्रतिपादन	डोम	डोम	डोम और आंशिक रूप से <कैनवास> (स्क्रॉलिंग और मिनिमैप के लिए)
प्रलेखन	10 में से 7: कोई खोज नहीं, हमेशा स्पष्ट नहीं वह विधियां लौटती हैं, संदेह होते हैं पूर्णता और प्रासंगिकता में (डॉक में सभी लिंक काम नहीं करते हैं)	10 में से 6: उपयोगकर्ता गाइड के साथ विलय, Ctrl + F, द्वारा खोजें पूर्णता के बारे में संदेह हैं	10 में से 9: सुंदर, खोज के साथ और पार संदर्भ -1 स्पष्टीकरण की कमी के लिए बिंदु कुछ झंडे जिनके आवेदन नाम से बिल्कुल स्पष्ट नहीं है
क्विकस्टार्ट डेमो	कैसे, कोड उदाहरण के साथ पाठ दस्तावेज़, अलग से कोड उदाहरण के साथ डेमो हैं (सच है, वे विभिन्न पृष्ठों पर बिखरे हुए हैं, हर कोई काम नहीं करता है और उन्हें Google के माध्यम से सबसे आसानी से खोजा जाता है), एक डेमो है जहाँ आप विभिन्न विशेषताओं को छू सकते हैं, लेकिन UI नियंत्रण के माध्यम से उन्हें प्रबंधित करना प्रस्तावित है तो फिर, हमें अभी भी अलग-अलग तरीकों की खोज करनी चाहिए उन्हें जोड़ने के लिए	कैसे-कैसे गरीब हैं मूल रूप से सब कुछ गीथब पर बिखरा हुआ है और stackoverflow, लेकिन उदाहरण के साथ सुविधाओं के डेमो हैं उनके कार्यान्वयन के लिए कोड	खेल के मैदान के प्रारूप में संयुक्त: टिप्पणियों के साथ कोड और कई डेमो, आप कर सकते हैं तुरंत प्रयास करें और मूल्यांकन करें कई संभावनाएं
सामुदायिक गतिविधि	केंद्रीय	उच्च	केंद्रीय
डेवलपर गतिविधि	केंद्रीय	केंद्रीय	उच्च

यह आकार से पुस्तकालयों की तुलना करने के लिए कोई मतलब नहीं है, क्योंकि यह सब इस बात पर निर्भर करता है कि किसी विशेष परियोजना के लिए क्या और कैसे कनेक्ट किया जाए: तैयार फ़ाइल को किसी प्रकार के कलेक्टर के माध्यम से बिल्ड (जो भी भिन्न हो) या npm पैकेज के साथ लोड करें। और सबसे महत्वपूर्ण यह है कि संपादक का कितना उपयोग किया जाता है: चाहे सभी शैलियों और विषयों को लोड किया गया हो, कितने और कौन से ऐड-ऑन और प्लग-इन का उपयोग किया जाता है। उदाहरण के लिए, CodeMirror में, बॉक्स से बाहर मोनाको और ऐस में काम करने वाली अधिकांश कार्यक्षमता केवल ऐड-ऑन के साथ उपलब्ध है। तालिका CDN पर हाल के संस्करणों में वर्णों की संख्या और आदेशों को शामिल करने के सामान्य विचार के लिए उनकी संपीड़ित फ़ाइलों के वजन को दर्शाती है।

सभी पुस्तकालयों में लगभग समान सुविधाएँ हैं: कोड ऑटोफ़ॉर्मेटिंग, फोल्डिंग लाइन्स, कट / कॉपी / पेस्ट, हॉट कीज़, हाइलाइटिंग और ऑर्डर करने के लिए नए सिंटैक्स जोड़ने की क्षमता, सिंटैक्स चेकिंग (कोडमिरर में केवल ऐड-ऑन के माध्यम से, ऐस में केवल जावास्क्रिप्ट के लिए अब तक। / CoffeeScript / CSS / XQuery), टूलटिप्स और ऑटो-कम्प्लीट (कोडमिरर में - एड-ऑन के माध्यम से), कोड द्वारा एडवांस्ड सर्च (कोडमिरर में - ऐड-ऑन के माध्यम से), टैब और स्प्लिट-मोड को लागू करने के लिए तरीके, अंतर मोड और एक मर्ज टूल (CodeMirror में) - या तो एक खिड़की में pluses और minuses के साथ, या एक addon के माध्यम से दो-पैनल, ऐस - अलग Lieb)। इसकी आयु के कारण, कोडमिरर के लिए कई ऐड-ऑन लिखे गए हैं, लेकिन उनकी संख्या संपादक के वजन और गति दोनों को प्रभावित करेगी। मोनाको बॉक्स से बाहर बहुत सारी चीजें कर सकता है, और मेरी राय में, ऐस और कोडमिरर से बेहतर और बड़ी मात्रा में।

हम कई कारणों से मोनाको में रहे:

सबसे विकसित उपकरण जिन्हें हमने अपनी परियोजना के लिए महत्वपूर्ण माना:
- IntelliSense - युक्तियां और ऑटो-पूर्ण;
- संदर्भ मेनू में और न्यूनतम के माध्यम से स्मार्ट कोड नेविगेशन;
- दो-पैनल अंतर बॉक्स से बाहर मोड।
टाइपस्क्रिप्ट में लिखा है। हमारा नियंत्रण कक्ष Vue + Typescript में लिखा गया है, इसलिए TS समर्थन महत्वपूर्ण था। वैसे, ऐस हाल ही में टीएस का समर्थन भी करता है, लेकिन यह मूल रूप से जेएस में लिखा गया था। CodeMirror के लिए, निश्चित रूप से टाइप किए गए हैं।
इसे सबसे अधिक सक्रिय रूप से विकसित किया जा रहा है (संभवतः क्योंकि यह बहुत पहले जारी नहीं किया गया था), बग्स को तेजी से ठीक किया जाता है और पूल अनुरोधों को लड़ा जाता है। तुलना के लिए, कोडमिरर के साथ हमें एक दुखद अनुभव हुआ, जब बग्स ने वर्षों तक ठीक नहीं किया और हमने एक बैसाखी पर बैसाखी लगाई और एक बैसाखी निकाली।
इंटरफेस और तरीकों के बीच क्रॉस-रेफरेंस के साथ सुविधाजनक ऑटो-जनरेट (जो इसकी पूर्णता की उम्मीद करता है) प्रलेखन।
हमारे स्वाद के लिए, सबसे सुंदर यूआई (शायद निर्माण के समय से संबंधित) और एक संक्षिप्त एपीआई।
डेवलपर्स के दोस्तों से पूछने के बाद कि संपादकों में से कौन सबसे अधिक सिरदर्द पैदा करता है, ऐस और कोडमिरर नेता थे।

अलग से, यह काम की गति के बारे में कहा जाना चाहिए। एक समानांतर श्रमिक धागे में महंगा पार्सिंग होता है। साथ ही, सभी गणना व्यूपोर्ट के आकार तक सीमित हैं (सभी प्रकार, रंग, प्रतिपादन केवल उन पंक्तियों के लिए गणना की जाती हैं जो दिखाई देते हैं)। यह तभी ब्रेक करना शुरू करता है जब कोड में 100,000 लाइनें होती हैं - संकेतों को कई सेकंड के लिए गणना की जा सकती है। ऐस, जो भारी कंप्यूटिंग के लिए श्रमिकों का भी उपयोग करता है, तेजी से निकला: समान लंबाई के कोड में, संकेत लगभग तुरंत दिखाई देते हैं, और यह जल्दी से 200,000 लाइनों के साथ मुकाबला करता है (आधिकारिक वेबसाइट पर यह कहा गया है कि 4 मिलियन लाइनें भी समस्या नहीं होनी चाहिए, हालांकि शिकंजा त्वरित किया गया, इनपुट धीमा होने लगा और संकेत 1 मिलियन के बाद गायब हो गए)। कोडमिरर, जहां कोई समानांतर गणना नहीं है, शायद ही ऐसे वॉल्यूम को खींच सकते हैं: यह टेक्स्ट और सिंटैक्स हाइलाइटिंग दोनों को झिलमिलाहट कर सकता है। चूंकि किसी फ़ाइल में 100,000 लाइनें वास्तविक दुनिया में दुर्लभ हैं, इसलिए हमने इस पर आंखें मूंद लीं। यहां तक कि 40-50 हजार लाइनों के साथ मोनाको एक उत्कृष्ट काम करता है।

मोनाको को जोड़ना और मूलभूत सुविधाओं का उपयोग करना (उदाहरण के लिए, Vue के साथ एकीकरण)

संबंध

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

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

हमने मोनाको-एडिटर और एक प्लग-इन विधानसभा के लिए रखा:

npm i -S monaco-editor npm i -D monaco-editor-webpack-plugin

वेबपैक कॉन्फ़िगरेशन में, जोड़ें:

 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { // ... plugins: [ // ... new MonacoWebpackPlugin() ] };

यदि आप निर्माण करने के लिए Vue और vue-cli-service का उपयोग करते हैं, तो vue.config.js में जोड़ें:

 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { // ... configureWebpack: (config) => { // ... config.plugins.push(new MonacoWebpackPlugin()); } };

यदि आपको बंडल के आकार को कम करने के लिए मोनाको की सभी भाषाओं और विशेषताओं की आवश्यकता नहीं है, तो आप सेटिंग्स को MonacoWebpackPlugin साथ स्थानांतरित कर सकते हैं:

 new MonacoWebpackPlugin({ output: '', // ,     languages: ['markdown'], //     ,     features: ['format', 'contextmenu'] //      })

प्लगइन के लिए सुविधाओं और भाषाओं की एक पूरी सूची यहां है ।

एक संपादक बनाएं और अनुकूलित करें

हम editor आयात करते हैं और editor.create(el: HTMLElement, config?: IEditorConstructionOptions) , उस DOM एलिमेंट को पास कर रहे हैं जिसमें हम एडिटर को पहले तर्क के रूप में बनाना चाहते हैं।

संपादक घटक में:

 <template> <div ref='editor' class='editor'></div> </template> <script> import {editor} from 'monaco-editor'; import {Component, Prop, Vue} from 'vue-property-decorator'; @Component() export default class Monaco extends Vue { private editor = null; mounted() { this.editor = editor.create(this.$refs.editor); } } </script> <style> .editor { margin: auto; width: 60vw; height: 200px; } </style>

संपादक के लिए कंटेनर को आवश्यक रूप से ऊंचाई निर्धारित करनी चाहिए ताकि यह शून्य न हो। यदि आप एक खाली डिव में संपादक बनाते हैं (शून्य ऊंचाई के साथ - आपका K.O.), तो मोनाको संपादक विंडो पर इनलाइन शैली में समान ऊंचाई लिखेगा।

editor.create लिए दूसरा वैकल्पिक तर्क संपादक editor.create है। इसमें सौ से अधिक विकल्प हैं, दस्तावेज में IEditorConstructionOptions इंटरफ़ेस का पूर्ण विवरण है।

एक उदाहरण के लिए, हम भाषा, विषय और प्रारंभिक पाठ सेट करेंगे और लाइन रैपिंग को सक्षम करेंगे (डिफ़ॉल्ट रूप से वे लिपटे नहीं हैं):

 const config = { value: `function hello() { alert('Hello world!'); }`, language: 'javascript', theme: 'vs-dark', wordWrap: 'on' }; this.editor = editor.create(this.$refs.editor, config);

Editor.create फ़ंक्शन IStandaloneCodeEditor इंटरफ़ेस के साथ एक ऑब्जेक्ट देता है। इसके माध्यम से, आप अब संपादक में होने वाली हर चीज़ को नियंत्रित कर सकते हैं, जिसमें प्रारंभिक सेटिंग्स को बदलना भी शामिल है:

 //        read-only  this.editor.updateOptions({wordWrap: 'off', readOnly: true});

अब दर्द के लिए: updateOptions एक ऑब्जेक्ट को IEditorOptions इंटरफ़ेस के साथ स्वीकार करता है, न कि IEditorConstructionOptions पर। वे थोड़ा अलग हैं: IEditorConstructionOptions व्यापक है, इसमें इस संपादक उदाहरण और कुछ वैश्विक लोगों के गुण शामिल हैं। updateOptions गुण updateOptions माध्यम से बदले updateOptions , वैश्विक - वैश्विक editor के तरीकों के माध्यम से। और तदनुसार, जो लोग विश्व स्तर पर बदलते हैं वे सभी उदाहरणों के लिए बदलते हैं। इन विकल्पों में theme । विभिन्न विषयों के साथ 2 उदाहरण बनाएं; दोनों का y आखिरी में दिया गया एक (यहाँ अंधेरा) होगा। वैश्विक editor.setTheme('vs') विधि भी दोनों के लिए विषय को बदल देगी। यह उन खिड़कियों को भी प्रभावित करेगा जो आपके एसपीए के दूसरे पृष्ठ पर हैं। ऐसे कुछ स्थान हैं, लेकिन आपको उनका पालन करने की आवश्यकता है।

 <template> <div ref='editor1' class='editor'></div> <div ref='editor2' class='editor'></div> </template> <script> // ... this.editor1 = editor.create(this.$refs.editor1, {theme: 'vs'}); this.editor2 = editor.create(this.$refs.editor2, {theme: 'vs-dark'}); // ... </script>

संपादक को हटा दें

जब आप मोनाको विंडो को नष्ट करते हैं, तो आपको dispose विधि को कॉल करना होगा, अन्यथा सभी श्रोताओं को मंजूरी नहीं दी जाएगी और इसके बाद बनाई गई विंडो सही ढंग से काम नहीं कर सकती हैं, कुछ घटनाओं पर प्रतिक्रिया करते हुए कई बार:

 beforeDestroy() { this.editor && this.editor.dispose(); }

टैब

फ़ाइल संपादक में खुले टैब एक ही मोनाको विंडो का उपयोग करते हैं। उनके बीच स्विच करने के लिए, IStandaloneCodeEditor विधियों का उपयोग किया जाता है: बचत के लिए setModel और संपादक मॉडल को अपडेट करने के लिएModel। मॉडल पूर्ववत करने के लिए पाठ, कर्सर स्थिति, कार्रवाई इतिहास संग्रहीत करता है। एक नई फ़ाइल का एक मॉडल बनाने के लिए, editor.createModel(text: string, language: string) वैश्विक पद्धति का उपयोग किया जाता है। यदि फ़ाइल खाली है, तो आप एक मॉडल नहीं बना सकते हैं और null को setModel पास कर सकते हैं:

कोड देखें

 <template> <div class='tabs'> <div class='tab' v-for="tab in tabs" :key'tab.id' @click='() => switchTab(tab.id)'> {{tab.name}} </div> </div> <div ref='editor' class='editor'></div> </template> <script> import {editor} from 'monaco-editor'; import {Component, Prop, Vue} from 'vue-property-decorator'; @Component() export default class Monaco extends Vue { private editor = null; private tabs: [ {id: 1, name: 'tab 1', text: 'const tab = 1;', model: null, active: true}, {id: 2, name: 'tab 2', text: 'const tab = 2;', model: null, active: false} ]; mounted() { this.editor = editor.create(this.$refs.editor); } private switchTab(id) { const activeTab = this.tabs.find(tab => tab.id === id); if (!activeTab.active) { //    (     )    const model = !activeTab.model && activeTab.text ? editor.createModel(activeTab.text, 'javascript') : activeTab.model; //          this.tabs = this.tabs.map(tab => ({ ...tab, model: tab.active ? this.editor.getModel() : tab.model, active: tab.id === id })); //    this.editor.setModel(model); } } </script>

डिफ मोड

विधा मोड के लिए, आपको संपादक विंडो बनाते समय किसी अन्य editor विधि का उपयोग करने की आवश्यकता है - createDiffEditor :

 <template> <div ref='diffEditor' class='editor'></div> </template> // ... mounted() { this.diffEditor = editor.createDiffEditor(this.$refs.diffEditor, config); } // ...

यह Editor.create के समान पैरामीटर लेता है, लेकिन कॉन्फ़िगरेशन में IDiffEditorConstructionOptions इंटरफ़ेस होना चाहिए, जो नियमित संपादक कॉन्फ़िगरेशन से थोड़ा अलग है, विशेष रूप से, इसका value नहीं है। तुलना के लिए ग्रंथों को सेट किए गए IStandaloneDiffEditor द्वारा setModel के बाद सेट किया गया है:

 this.diffEditor.setModel({ original: editor.createModel('const a = 1;', 'javascript'), modified: editor.createModel('const a = 2;', 'javascript') });

प्रसंग मेनू, कमांड पैलेट और हॉट की

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

  मोनाको संदर्भ मेनू

  मोनाको कमांड पैलेट

संदर्भ मेनू को addAction विधि के माध्यम से विस्तारित किया गया है (यह IStandaloneCodeEditor और IStandaloneDiffEditor में उपलब्ध है), जो IActionDescriptor ऑब्जेक्ट को स्वीकार करता है:

कोड देखें

 // ... <div ref='diffEditor' :style='{display: isDiffOpened ? "block" : "none"}'></div> // ... //  KeyCode  KeyMod     import {editor, KeyCode, KeyMod} from "monaco-editor"; // ... private editor = null; private diffEditor = null; private isDiffOpened = false; private get activeTab() { return this.tabs.find(tab => tab.active); } mounted() { this.diffEditor = editor.createDiffEditor(this.$refs.diffEditor); this.editor = editor.create(this.$refs.editor); this.editor.addAction({ //  ,     . contextMenuGroupId: '1_modification', //   : 1 - 'navigation', 2 - '1_modification', 3 - '9_cutcopypaste'; //    contextMenuOrder: 3, //       label: 'Show diff', id: 'showDiff', keybindings: [KeyMod.CtrlCmd + KeyMod.Shift + KeyCode.KEY_D], //   // ,     //    run: this.showDiffEditor }); } //      private showDiffEditor() { this.diffEditor.setModel({ original: this.activeTab.initialText, modified: this.activeTab.editedText }); this.isDiffOpened = true; }

केवल एक संदर्भ के मेनू में दिखाए बिना किसी शॉर्टकट को किसी क्रिया में बाँधने के लिए, उसी विधि का उपयोग किया जाता है, केवल contextMenuGroupId कार्रवाई के contextMenuGroupId निर्दिष्ट नहीं किया जाता है:

कोड देखें

 // ... //   private myActions = [ { contextMenuGroupId: '1_modification', contextMenuOrder: 3, label: <string>this.$t('scenarios.showDiff'), id: 'showDiff', keybindings: [KeyMod.CtrlCmd + KeyMod.Shift + KeyCode.KEY_D], run: this.showDiffEditor }, // ,   Ctrl + C + L      { label: 'Get content length', id: 'getContentLength', keybindings: [KeyMod.CtrlCmd + KeyCode.Key_C + KeyCode.Key_L], run: () => this.editor && alert(this.editor.getValue().length) } ]; mounted() { this.editor = editor.create(this.$refs.editor); this.myActions.forEach(this.editor.addAction); //     }

कमांड पैलेट में सभी जोड़े गए कार्य शामिल होंगे।

टिप्स और ऑटो-पूर्ण

इन उद्देश्यों के लिए, मोनाको IntelliSense का उपयोग करता है, जो शांत है। आप स्क्रीनशॉट पर लिंक को पढ़ और देख सकते हैं कि वह कितनी उपयोगी जानकारी दिखा सकता है। यदि आपकी भाषा अभी तक स्वत: पूर्ण नहीं है, तो आप इसे registerCompletionItemProvider के माध्यम से जोड़ सकते हैं। और JS और TS के लिए, पहले से ही एक addExtraLib विधि है जो आपको टूलटिप्स और ऑटो-पूर्ण के लिए टाइपस्क्रिप्ट परिभाषाएँ लोड करने की अनुमति देती है:

 // ... import {languages} from "monaco-editor"; // ... // ,          private myAddedLib = null; mounted() { // languages     Monaco this.myAddedLib = languages.typescript.javascriptDefaults.addExtraLib('interface MyType {prop: string}', 'myLib'); } beforeDestroy() { //  ,   this.myAddedLib && this.myAddedLib.dispose(); }

पहले पैरामीटर में, लाइन परिभाषाओं को पारित करती है, दूसरे में, वैकल्पिक, लिब का नाम।

कस्टम भाषा और विषय-वस्तु

मोनाको में अपनी भाषाओं के वाक्य विन्यास का निर्धारण करने के लिए एक मोनार्क मॉड्यूल है। वाक्यविन्यास को काफी मानक रूप से वर्णित किया गया है: इस भाषा के लिए नियमित और टोकन के बीच पत्राचार निर्धारित किया जाता है।

कोड देखें

 // ... //  ,    : private myLanguage = { defaultToken: 'text', //  , brackets: [{ open: '(', close: ')', token: 'bracket.parenthesis' }], // ,   , keywords: [ 'autumn', 'winter', 'spring', 'summer' ], //     tokenizer: { root: [{ regex: /\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}/, action: { token: 'date' } }, { regex: /(boy|girl|man|woman|person)(\s[A-Za-z]+)/, action: ['text', 'variable'] } ] } }; mounted() { //     languages.register({ id: 'myLanguage' }); //      languages.setMonarchTokensProvider('myLanguage', this.myLanguage); // ... }

आप अपने टोकन के लिए एक थीम भी बना सकते हैं - IStandaloneThemeData इंटरफ़ेस के साथ एक वस्तु - और इसे वैश्विक editor में स्थापित करें:

 // ... private myTheme = { base: 'vs', // ,      inherit: true, //       rules: [ {token: 'date', foreground: '22aacc'}, {token: 'variable', foreground: 'ff6600'}, {token: 'text', foreground: 'd4d4d4'}, {token: 'bracket', foreground: 'd4d4d4'} ] }; mounted() { editor.defineTheme('myTheme', this.myTheme); // ... }

अब वर्णित भाषा में पाठ इस तरह दिखेगा:

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

निष्कर्ष

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

एक सामान्य व्यक्ति की आईडीई या हमने मोनाको को क्यों चुना

संपादक का नोट

कोड संपादक के लिए कौन सी लाइब्रेरी चुनें?

मोनाको को जोड़ना और मूलभूत सुविधाओं का उपयोग करना (उदाहरण के लिए, Vue के साथ एकीकरण)

संबंध

एक संपादक बनाएं और अनुकूलित करें

संपादक को हटा दें

टैब

डिफ मोड

प्रसंग मेनू, कमांड पैलेट और हॉट की

टिप्स और ऑटो-पूर्ण

कस्टम भाषा और विषय-वस्तु

निष्कर्ष

More articles: