साइट लेआउट के लिए उदात्त पाठ 3। उपस्थिति को अनुकूलित करें और प्लगइन्स इंस्टॉल करें। शुरुआती गाइड

आज मैं आपको उस कोड संपादक के बारे में बताऊंगा जिसका उपयोग मैं कई वर्षों से साइट लेआउट के लिए कर रहा हूं। तेज, सुविधाजनक और पूरी तरह से अनुकूलन उदात्त पाठ 3 ।



हम स्क्रैच से इसकी उपस्थिति को अनुकूलित करेंगे, साथ ही AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration और Tag plugins का उपयोग करेंगे, जो साइट लेआउट के साथ हमारी काफी मदद करेंगे! खैर, शब्दों से कार्रवाई तक!

कार्यक्रम की उपस्थिति

सबसे पहले, उदात्त पाठ 3 को स्थापित करने के बाद, मैं कार्यक्रम के रूप को अनुकूलित करता हूं।

साइड पैनल

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

रंग योजना

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



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

नई रंग योजनाओं, प्लगइन्स और अन्य ऐड-ऑन को स्थापित करने के लिए, मुझे सबसे पहले इन ऐड-ऑन के इंस्टॉलर को स्थापित करना होगा। यह जटिल लगता है, लेकिन वास्तव में, सब कुछ बहुत सरल है।

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



ऐसा करने के लिए, मैं फिर से Ctrl + Shift + P पकड़कर कमांड पैलेट को कॉल करता हूं, मैं फिर से खोज फ़ील्ड में इंस्टॉल करता हूं जब तक कि मुझे पैकेज कंट्रोल आइटम नहीं दिखता : पैकेज स्थापित करें (ऐड-ऑन पैकेज स्थापित करें), उस पर क्लिक करें। थोड़ा इंतजार करने के बाद, मुझे सब्लिम के लिए सभी उपलब्ध ऐड-ऑन की सूची के साथ एक विंडो दिखाई देती है। खैर, लगभग सभी।

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



मेरी पसंदीदा रंग योजना निर्धारित है, निश्चित रूप से आप अपने लिए कोई अन्य चुन सकते हैं।

मुझे कार्यक्रम का सामान्य रूप अधिक अंधेरा पसंद है , इसलिए मैं वरीयताएँ - थीम पर जाता हूं, और Adaptive.subbime- विषय पर स्विच करता हूं



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

उन्नत सेटिंग्स

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

"margin": 0, //   "font_size": 10, //     "draw_indent_guides": true, // /   "draw_white_space": "all", //    "tab_size": 3, //  "remeber_open_files": true, //     

मैं प्रत्येक सेटिंग की व्याख्या करूंगा।

 "margin": 0, //   

कोड और साइडबार के बीच कार्यक्रम में अजीब इंडेंटेशन को हटाता है, जो समग्र चित्र को अधिक कॉम्पैक्ट बनाता है।

 "font_size": 10, //     

डिफ़ॉल्ट फ़ॉन्ट आकार सेट करता है। आप नियंत्रण को पकड़कर और माउस व्हील को घुमाते हुए कोड के साथ काम करते हुए फ़ॉन्ट आकार को जल्दी से बदल सकते हैं।

यदि आपने अचानक दुर्घटना से आकार बदल दिया है, तो आप इसे वरीयताएँ - फ़ॉन्ट - रीसेट पर जाकर रीसेट कर सकते हैं

 "draw_indent_guides": true, // /   

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

व्यक्तिगत रूप से, मैं उन्हें (झूठे) दो कारणों से अक्षम करता हूं। पहला यह है कि मैं अब एक नौसिखिया नहीं हूं और उनके बिना बहुत अच्छा कर सकता हूं, दूसरा कारण निम्नलिखित सेटिंग है।

 "draw_white_space": "all", //   

अदृश्य टैब और स्थान प्रदर्शित करता है। यही है, यह कोड का हिस्सा नहीं है, लेकिन आसानी से उपयोग के लिए मार्कअप है। और इसलिए, यदि आप दोनों draw_indent_guides और draw_white_space को चालू करते हैं, तो आपको एक घोल मिलता है जो व्यक्तिगत रूप से मुझे परेशान करता है। आपके लिए क्या उपयोग करना है और क्या नहीं।

 "tab_size": 3, //  

टैब दबाने पर इंडेंट लाइन की चौड़ाई का आकार। व्यक्तिगत रूप से, मुझे तीसरा आकार पसंद है :)

 "remember_open_files": true, //   

उदाहरण के लिए, हमने काम किया, काम किया, और फिर अप्रत्याशित रूप से कार्यक्रम को बंद कर दिया :) क्या ऐसा होता है? मेरे पास यह हर समय है, इसलिए इस सेटिंग में उदात्त "मेमोरी" शामिल है, और अगली बार जब आप प्रोग्राम खोलते हैं, तो सभी नवीनतम फाइलें खुलेंगी। और हाँ, कंप्यूटर को रिबूट करने के बाद मेमोरी भी काम करती है।

काम करने वाली खिड़की को विभाजित करना

वर्किंग विंडो को विभाजित करने से हमें कोड की धारणा को बेहतर बनाने और लेआउट प्रक्रिया को गति देने में मदद मिलेगी।

चूंकि लगभग हमेशा आपको कई अलग-अलग फ़ाइलों के साथ काम करना पड़ता है, उदाहरण के लिए, index.html style.css और कुछ प्रकार की js फ़ाइल, यह विंडो को सेक्टरों में कोड के साथ विभाजित करने के लिए एक अतिरिक्त सुविधा होगी। कई विकल्प हैं। व्यू - लेआउट पर जाएं और देखें कि हमारे पास यहां क्या है।



तदनुसार, एकल विभाजन के बिना एक दृश्य है क्योंकि यह अब है, कॉलम: 2, 3, 4 एक ऊर्ध्वाधर टूटना है। उदाहरण के लिए, कॉलम: 2 पर क्लिक करके, कोड के साथ हमारी स्क्रीन आधे में विभाजित हो जाएगी, और हम फाइलों का एक हिस्सा एक खाली कॉलम में स्थानांतरित कर सकते हैं, उदाहरण के लिए, HTML के बाईं ओर सीएसएस और दाईं ओर जेएस, जो काम को अधिक दृश्य और तेज बनाता है।



हमारे पास स्क्रीन को क्षैतिज रूप से विभाजित करने के लिए भी विकल्प हैं: पंक्तियाँ: 2 और पंक्तियाँ: 3, उदाहरण के लिए पंक्तियों पर क्लिक करके: 3 हमें तीन क्षैतिज खिड़कियां मिलती हैं और आप जेएस फ़ाइल को तीसरी खिड़की पर स्थानांतरित कर सकते हैं। और अंतिम विकल्प ग्रिड: 4 है, जो स्क्रीन को क्षैतिज और लंबवत रूप से आधे हिस्से में विभाजित करता है। परिणाम चार खिड़कियां है। कृपया ध्यान दें कि आप हॉट कुंजी Alt + Shift + संबंधित संख्या का उपयोग करके मोड के बीच भी स्विच कर सकते हैं।



तो आप अपने स्वाद के लिए एक विस्तृत चयन है। मैं अक्सर एक ऊर्ध्वाधर विभाजन का उपयोग करता हूं।

सिंटेक्स हाइलाइट्स

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

सिंटेक्स हाइलाइटिंग कोड में एक या किसी अन्य तत्व के रंग के साथ एक विशेष रंग है। उदाहरण के लिए, HTML फ़ाइल में इस रंग योजना में, टैग को लाल रंग में हाइलाइट किया गया है, वर्ग का नाम हरा है, पाठ सफेद है, और इसी तरह। यह कोड की धारणा को अधिक स्पष्ट करता है। प्रोग्राम विंडो के निचले दाएं कोने पर ध्यान दें, वर्तमान में कौन सी फ़ाइल सक्रिय है, इस पर निर्भर करते हुए, सीएसएस HTML जेएस, और इसी तरह, इस विशेष फ़ाइल के लिए कोड का प्रदर्शन स्विच किया जाता है।

अगर सब कुछ पहले से ही ठीक चल रहा है तो यहां कुछ क्यों करें? तथ्य यह है कि प्रारंभिक उदात्त पैकेज में सिंटैक्स हाइलाइटिंग पैकेज सभी प्रारूपों के लिए स्थापित नहीं हैं।

उदाहरण के लिए, भविष्य में मुझे SCSS फ़ाइलों के साथ काम करने की योजना है, इसे खोलने पर मुझे सफेद अक्षरों के एक सेट की एक ठोस शीट दिखाई देगी। बहुत सुविधाजनक नहीं है, है ना?



इसलिए, ऐसे मामलों में, मैं अतिरिक्त रूप से वांछित पैकेज स्थापित करता हूं।

हम टूल - कमांड पैलेट पर जाकर अपने परिचित कमांड पैलेट को खोलते हैं, या Ctrl + Shift + P दबाएं , इंस्टॉल करें, पैकेज कंट्रोल इंस्टॉल करें पर क्लिक करें और SCSS ऐड-ऑन के लिए देखें। इस पर क्लिक करें, इंस्टॉलेशन के बाद हम अपने डिस्प्ले को SCSS में बदल सकते हैं। अब सब कुछ ठीक लग रहा है, है ना?



संपादक की उपस्थिति को अनुकूलित करना महत्वपूर्ण है, क्योंकि हम कोड लिखते समय काफी खर्च करते हैं। यह हमारी थकान, उत्पादकता, स्वास्थ्य और सिर्फ हमारे मूड को प्रभावित करता है।

अगली चीज जो हम करेंगे, वह कई प्लगइन्स और ऐड-ऑन स्थापित करना है। उनमें से एक बड़ी संख्या है, और मैं आपको उन मुख्य के बारे में बताऊंगा जो मैं सक्रिय रूप से खुद का उपयोग करता हूं और जो कई बार पूरी लेआउट प्रक्रिया को गति देगा। चलो शुरू हो जाओ!

प्लग-इन

AutoFileName

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

BracketHighliter

BracketHighliter का बैकलाइट कोट्स के रूप में अनुवाद किया जा सकता है। इसे स्थापित करें। Ctrl + Shift + P दबाएं , पैकेज नियंत्रण स्थापित करें, ब्रैकेटहाइटर के लिए देखें । निर्धारित करें। यह एक सफल इंस्टॉलेशन के बारे में संदेश के साथ एक अलग फाइल भी खोलता है। अब, हमारे कोड में, प्रारंभ और अंत तत्व, उदाहरण के लिए, उद्घाटन और समापन टैग, प्रारंभ और अंत उद्धरण, और उद्घाटन और समापन कोष्ठक हाइलाइट किए जाएंगे। यह कोड में अभिविन्यास के साथ बहुत मदद करता है।

ColorHighliter

इस कोड पर ध्यान दें - यह एक रंग कोड है, लेकिन जो स्पष्ट नहीं है।



चलो प्लगइन स्थापित करें। Ctrl + Shift + P , पैकेज नियंत्रण स्थापित करें, ColorHighliter देखें । फिर, सफल इंस्टॉलेशन के बारे में एक संदेश के साथ एक अलग फाइल खुलती है। और कुछ त्रुटि संदेश, उन्हें अनदेखा करें। हम अपने कोड को रंग से देखते हैं, और अब हम देखते हैं कि अल्फ़ान्यूमेरिक कोड के पीछे कौन सा रंग छिपा हुआ है। प्लग इन को अतिरिक्त रूप से टूल - ColorHighliter मेनू में कॉन्फ़िगर किया जा सकता है , लेकिन अब हम इस पर ध्यान नहीं देंगे। सब कुछ बहुत बेहतर हो गया है।

महान और शक्तिशाली एम्मेट

हम स्थापित योजना के अनुसार स्थापित करते हैं। Ctrl + Shift + P , पैकेज नियंत्रण स्थापित करें, एम्मेट की तलाश करें । एक अलग फ़ाइल एक संदेश के साथ खुलती है जो आपको इंस्टॉलेशन को पूरा करने के लिए प्रोग्राम को पुनरारंभ करने के लिए कहती है। बंद करें और उदात्त खोलें। हमें एक संदेश मिलता है कि सब कुछ स्थापित है।

तो एम्मेट क्या करता है?

हम HTML फ़ाइल में जाते हैं और .block वर्ग के साथ div टैग लिखने की कोशिश करते हैं, इसके लिए हमें बस इसे समाप्त करना है , " ब्लॉक " लिखना है और टैब कुंजी को दबाना है। हम प्राप्त करेंगे:

 <div class="block"></div> 

एक और अधिक जटिल प्रविष्टि बनाने के लिए, उदाहरण के लिए, .block वर्ग के साथ div टैग में , स्पैन टैग डालें, निम्न प्रविष्टि का उपयोग करें:

 .block>span 

टैब कुंजी दबाएं और प्राप्त करें:

 <div class="block"><span></span></div> 

कृतक, सचमुच?

लेकिन यह सब नहीं है, हम अपने स्वयं के स्निपेट, अर्थात् टेम्प्लेट / टेम्पलेट बना सकते हैं।
ऐसा करने के लिए, प्राथमिकताएँ - पैकेज सेटिंग्स - एम्मेट - सेटिंग्स उपयोगकर्ता पर जाएं । यहाँ हम निम्नलिखित लिखते हैं:

 { "snippets":{ "html":{ "snippets":{ "bl":"<div class=\"block\"></div>" } } } } 

अब एंट्री लेने के लिए:

 <div class="block"></div> 

हमें सिर्फ bl लिखना है और Tab key को दबाना है

यह अनुसरण करता है कि एम्मेट की क्षमताएं अनंत हैं, और हम अपने स्निपेट्स को अनुकूलित कर सकते हैं जैसे हम पसंद करते हैं और बहुत जल्दी काम करते हैं। प्लगइन की क्षमताओं के बारे में विस्तृत जानकारी https://emmet.io पर देखी जा सकती है

GotoCSSDeclaration

प्लगइन हमें कोड में नेविगेशन के साथ मदद करेगा। पिछले प्लगइन्स के समान ही इंस्टॉल करें। अगला, हम प्लगइन के साथ काम करने के लिए हॉट कीज़ असाइन करेंगे। इसके लिए, प्राथमिकताएँ - कुंजी बाइंडिंग पर जाएँ , और निम्नलिखित कोड लिखें

 { "keys": ["ctrl+1"], "command": "goto_css_declaration", "args": {"goto": "next"} }, 

जहां [" ctrl + 1 "] यह वांछित कुंजी संयोजन है। सहेजें Cntr + एस।
और इस तरह से यह काम करता है। हमारे पास CSS और HTML फाइलें खुली होनी चाहिए। सीएसएस आमतौर पर बहुत बड़ा होता है और जल्दी से कुछ ढूंढना मुश्किल होता है, लेकिन यह अतीत में है। उदाहरण के लिए, हमें सामग्री-मुख्य पृष्ठ वर्ग के लिए सीएसएस को बदलने की जरूरत है , माउस के साथ उस पर क्लिक करें और ctrl + 1 दबाएं। Voila, हम CSS फ़ाइल में सही स्थान पर हैं।

टैग

खैर, उन लोगों के लिए जो इस बिंदु तक पढ़ चुके हैं, मैं आपको एक और प्लगइन दिखाऊंगा जो स्थापित करना इतना आसान नहीं है, लेकिन यह निश्चित रूप से इसके लायक है।

उसका नाम टैग है और हमें इसे मैन्युअल रूप से स्थापित करना होगा। यह लिंक आपको प्लगइन के साथ संग्रह डाउनलोड करने की अनुमति देता है। अगला, इसे एक विशेष प्रोग्राम फ़ोल्डर में अनपैक करें। विंडोज 10 के लिए, यह C: \ Users \ [अपने उपयोगकर्ता नाम को सब्स्टीट्यूट करें] \ AppData \ Roaming \ Sublime पाठ 3 \ पैकेज। इसके बाद, उदात्त को बंद करें और इसे फिर से खोलें और प्राथमिकताएं खोलकर गर्म कुंजी जोड़ें - कुंजी बाइंडिंग और निम्नलिखित जोड़कर:

 { "keys": ["ctrl+`"], "command": "tag_classes" } 

जहाँ ctrl + ` हमारा कीबोर्ड शॉर्टकट है।

तो, हम यह सब कठिन रास्ते पर क्यों गए? एक नियम के रूप में, कोड लिखने की प्रक्रिया में, हम पहले HTML के साथ काम करते हैं, फिर वर्ग के नाम सीएसएस में स्थानांतरित करते हैं और पहले से ही वहां काम करते हैं। तो, यह स्थानांतरण लंबे समय तक मैन्युअल रूप से किया जाना चाहिए। और यहाँ टैग प्लगइन बचाव के लिए आता है। अभी के लिए, हमारे लिए वांछित HTML कोड का चयन करना, हमारे ctrl + `को दबाएँ



और फिर कॉपी परिणाम को हमारे CSS ctrl + v में पेस्ट करें।



YouTube चैनल " फ्रीलांसर फॉर लाइफ " पर "श्रृंखला और प्रोग्राम्स और साइट लेआउट के लिए उपकरण " से, " उदात्त पाठ 3. सेटअप, इंस्टॉलेशन, प्लग-इन " की रिलीज़ के आधार पर।