वेबस्टॉर्म में क्विक कोडिंग का राज

आज वेबस्टॉर्म के साथ काम करने के लिए कुछ व्यावहारिक सुझाव दिए गए हैं।

सबसे पहले, हम बहुत सरल HTML लिखते हैं, रंग के बाद : <Ctrl-space> दबाएं और रंगों की एक सूची प्राप्त करें।



KO संकेत देता है: सभी JetBrains IDEs में, <Ctrl-space> एक संदर्भ मदद है।

जैसे ही हम एक रंग चुनते हैं, उसी रंग का एक छोटा वर्ग तुरंत पाठ के बाईं ओर ऊर्ध्वाधर पट्टी पर दिखाई देता है। अब आप उस पर क्लिक कर सकते हैं, और एक पैलेट खुल जाएगा, जिसमें से आप किसी भी रंग का चयन कर सकते हैं।



अब अधिक जटिल परियोजना की कल्पना करें, नोड के तहत एक छोटा अनुप्रयोग।


कहा जाता है कि JetBrains IDE में विस्तार और प्रासंगिक समझ पर अच्छा ध्यान दिया जाता है। यहां, यह प्रतीत होता है, एक तिपहिया: मुझे HTML में एक फॉर्म के साथ एक सरल पृष्ठ बनाने के लिए इस एप्लिकेशन का परीक्षण करने की आवश्यकता है। मैंने इसे किया, इसे आज़माया, आवेदन को जटिल कर दिया, परीक्षण को भी जटिल बनाने की आवश्यकता है: मैंने प्रपत्र फिर से बनाया ताकि यह कई क्षेत्रों को भरने के लिए सुविधाजनक लगे।

मैंने लाइन टैग के अंत में प्रवेश करना शुरू किया

<br> 

मैं < कुंजी दबाता हूं, वेबस्टॉर्म खुद अनुमान लगाता है कि मुझे क्या चाहिए

 <br> 

और पहले से ही चुने गए टैग के साथ विकल्पों की एक सूची प्रदान करता है जो मुझे चाहिए। मैं सिर्फ एंटर दबाता हूँ और आपका काम हो गया है!



.Js फ़ाइल में एक नया फ़ंक्शन जोड़ें। मैं मजेदार लिख रहा हूं <Ctrl-space>, स्वत: पूर्ण होने से ट्रिगर होता है, मुझे एक फ़ंक्शन मिलता है, फिर आप जारी रख सकते हैं: फ़ंक्शन का नाम और शरीर। WebStorm में स्वतः पूर्ण करने के दो तरीके हैं:

  <Ctrl-space>, <Enter> 

- यह पाठ प्रविष्टि के साथ पूरक है, और

  <Ctrl-space>, <Tab> 

- पाठ के प्रतिस्थापन के साथ कर्सर के दाईं ओर विभाजक (गलत तरीके से लिखे गए कीवर्ड और नाम हटाता है)।

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

फॉर्म के एक ही क्षेत्र, एक पंक्ति का प्रचार करना आवश्यक है? <Ctrl-D> (डुप्लिकेट शब्द से)।

हमें कुछ (चर, फलन, वर्ग?) <Ctrl-B> (आधार शब्द से) की परिभाषा पर आगे बढ़ना होगा। और अब आपको वापस जाने की आवश्यकता है? <Ctrl-Alt-Left Arrow>।


उन लोगों के लिए कुछ और तरकीबें, जो मुझे पसंद हैं, हाल ही में node.js के तहत लिखते हैं:

1) अगर WebStorm से एप्लिकेशन शुरू करते समय नोड में कोई त्रुटि होती है

 throw arguments[1]; // Unhandled 'error' event Error: listen EADDRINUSE 

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

2) यदि एप्लिकेशन को ('मॉड्यूल') की आवश्यकता होती है, और इस मॉड्यूल से परिभाषाएं (उदाहरण के लिए, फ़ंक्शन) IDE में दिखाई नहीं देती हैं, और Ctrl-B द्वारा अनुपलब्ध हैं, तो ऐसा लगता है कि आप नोड .js डेवलपर्स की सिफारिशों का उल्लंघन करते हैं: यदि आप मॉड्यूल का उपयोग करते हैं परियोजना में, आपको इसे स्थानीय रूप से स्थापित करने की आवश्यकता है।

इसका मतलब है (स्पष्टीकरण के लिए सर्गेई साइमनचिक के लिए धन्यवाद !) कि परियोजना फ़ोल्डर में एक नोड_मॉड्यूल फ़ोल्डर होना चाहिए, और इसमें संबंधित मॉड्यूल के फ़ोल्डर होने चाहिए। यदि कोई फ़ोल्डर नहीं है, और कमांड npm स्थापित मॉड्यूल नहीं बनाया गया है, तो इसे हाथ से बनाया जाना चाहिए, और कमांड प्रॉम्प्ट पर प्रोजेक्ट के रूट फ़ोल्डर में, कमांड npm स्थापित मॉड्यूल दें ।

एनपीएम प्रोग्राम गूंगा (या बहुत स्मार्ट) है: यदि आपके पास प्रोजेक्ट रूट में कोई नोड_मॉड्यूल नहीं है, और प्रोजेक्ट रूट के ऊपर एक नोड_मॉडल फ़ोल्डर है, तो मॉड्यूल की स्थानीय स्थापना इसमें होगी।

यदि मॉड्यूल सही ढंग से स्थापित हैं, और WebStorm एक ग्रे लहराती रेखा ("परिभाषित नहीं") के साथ मॉड्यूल से कार्यों को रेखांकित करना जारी रखता है, तो यह ध्यान दिया जाना चाहिए कि आप किन नोड्स से कनेक्ट होते हैं:





3) वेबस्टॉर्म में कोड "मक्खी पर" की जाँच तीन अलग-अलग तरीकों से की जा सकती है, तीनों बहुत लचीले हैं: जेएसएलआईएनटी, जेएसहिंट और आंतरिक कोड निरीक्षक। डिफ़ॉल्ट रूप से, केवल आंतरिक निरीक्षक सक्षम होता है, जो सेटिंग्स-> निरीक्षण मेनू में अमानवीय रूप से लचीले ढंग से कॉन्फ़िगर किया जा सकता है।

यदि आपको JSHint या JSLint को सक्षम करने की आवश्यकता है, तो यह जावास्क्रिप्ट में किया जाता है | कोड गुणवत्ता उपकरण। ये दोनों उपकरण बाहरी हैं, लेकिन वे WebStorm के साथ बंडल में आते हैं और पारदर्शी रूप से IDE में एकीकृत होते हैं।



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

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

बेशक, ये वेबस्टॉर्म में सुविधाजनक कोडिंग के सभी रहस्य नहीं हैं, और यदि हेब्रोसोसिटी पाठ को मंजूरी देता है, तो अगली रिलीज़ में हम टाइपस्क्रिप्ट, सोर्समैप्स और कुछ उपयोगी हॉट कुंजियों के समर्थन के बारे में बात करेंगे।

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