Հարգելի ընթերցող, ինչպես հիշում եք, իմ Brackets տեքստային խմբագրիչ գրառման մեջ ես խոստացել էի Ձեր ուշադրությանը ներկայացնել այդ տեքստային խմբագրիչի առավել տարածված և օգտակար հավելումները։ Եվ ես այժմ շտապում եմ կատարել իմ խոստումը։
Վերը նշված գրառման մեջ մենք ծանոթացանք, թե ինչպես կարելի է ներբեռնել հավելյալ հնարավորություններ մեր տեքստային խմբագրիչի համար։ Այսպիսով, աջ կողմում սեղմելով External Manager կոճակը և այնտեղից ընտրելով Available` մենք կփորձենք ներբեռնել մեզ անհրաժեշտ հավելումները։
Emmet
Առաջին այդպիսի հավելումը, որը ցանկանում եմ Ձեզ ներկայացնել՝ Emmet կոչվող հավելումն է։ Այն կարելի է նույնիսկ անհրաժեշտություն համարել HTML և CSS կոդեր գրելու ժամանակ, քանի որ այն կարող է անհամեմատ արագացնել Ձեր աշխատանքը։ Սկսենք ծանոթանալ նրա հնարավորություններին։ Ենթադրենք մենք հենց նոր բացել ենք ինչ-որ մի HTML փաստաթուղթ, որի մեջ ամենասկզբում մեզ անհրաժեշտ է գրել հետևյալ պարտադիր կոդը․
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet – ի օգնությամբ մենք այսքան կոդը կարող ենք ունենալ՝ գրելով ! նշանը և սեղմելով TAB ստեղնը։ Այս ստեղնը մենք դեռ շատ ենք օգտագործելու Emmet – ի հետ։ Այժմ արդեն մենք կարող ենք <body> – ի մեջ գրել մեր ուզածը։ Իսկ այն իրենից ներկայացնում է ենթադրենք հետևյալ կոդը.
<div class="container">
<div class="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div class="image">
<img src="images/photo1.jpg" alt="">
<div class="content">
<div class="posts post1">
<h3 class="post-title">Post 1 Title</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore maxime, quas culpa voluptas labore nisi tempore? Suscipit voluptatum amet doloremque optio. Similique, distinctio sunt iusto veritatis id incidunt harum? Excepturi velit deleniti sapiente quae minima, officiis eos, obcaecati debitis in tenetur fugit ut error maiores temporibus cumque harum dolorum. Repudiandae.</p>
<p class="paragraph">Vitae nam excepturi voluptate amet illo qui unde asperiores tempora necessitatibus. Quas modi mollitia temporibus magnam eum aut aliquid necessitatibus fuga similique doloribus distinctio obcaecati perspiciatis est sit, officiis ullam. Sint temporibus id nulla, enim tempora, alias laboriosam quia nam doloremque nihil eaque incidunt deleniti veniam sapiente eos explicabo iure!</p>
</div>
<div class="posts post2">
<h3 class="post-title">Post 2 Title</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae eius sit, voluptatibus, quia non culpa aliquid dicta ratione mollitia recusandae qui natus dolorem. Itaque nemo dolorem laboriosam natus rerum modi quaerat aliquid distinctio, ea cupiditate voluptas, laudantium exercitationem magni quisquam consequatur asperiores, dolor. Cumque, qui mollitia. Velit, perspiciatis. Et, officia!</p>
<p class="paragraph">Vitae consequatur, molestias odio odit ducimus delectus minus, explicabo praesentium debitis. Incidunt ullam maxime fugiat, tempore aliquam placeat, quisquam atque, similique modi adipisci doloribus! Nobis et blanditiis, sequi nesciunt non, quos porro nulla libero, iusto vero, voluptate aliquid! Quasi enim nostrum sint non quas earum consequatur maiores quisquam commodi ipsum.</p>
</div>
<div class="posts post3">
<h3 class="post-title">Post 3 Title</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum saepe repellendus et, rem eligendi id adipisci blanditiis. Saepe in quis veritatis, nisi similique quod maxime velit vitae nesciunt, ipsam harum nostrum quas fugit ab incidunt, perspiciatis, esse nemo dicta iusto sequi. Quis, deleniti quod. Quia fugiat iste harum nobis quos.</p>
<p class="paragraph">Dolores deleniti in error id consectetur delectus, natus tempore, placeat velit aspernatur amet perspiciatis eligendi similique? Necessitatibus quisquam dolore praesentium, repellat magnam quibusdam voluptatibus reprehenderit officiis nobis nesciunt, natus dolorem, ratione ipsum quo quaerat incidunt et expedita culpa delectus! Aspernatur itaque soluta officiis modi atque nemo nostrum fugiat neque quia.</p>
</div>
<div class="posts post4">
<h3 class="post-title">Post 4 Title</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias quisquam, ducimus repudiandae numquam. Tempora reprehenderit error inventore ullam velit quae animi molestiae, sunt quis itaque eum consequatur, eos voluptates iste excepturi, voluptas perferendis eveniet esse blanditiis fuga. Laudantium impedit corporis veniam beatae? Cupiditate alias minima asperiores temporibus quia animi?</p>
<p class="paragraph">Quasi suscipit inventore sapiente animi ullam libero qui neque iure repellendus eos aliquam culpa itaque ea sunt ipsum quis, distinctio magni, ducimus temporibus numquam! Laudantium minima maiores corporis magnam sunt nemo voluptatum, voluptates ut ab veritatis enim repellat quo iusto, saepe odio quos eos, nam nulla numquam dolorum! Perspiciatis, dolores.</p>
</div>
</div>
</div>
</div>
Կարծում եմ արդեն պատկերացնում եք, թե ինչքան ժամանակ է մեզ անհրաժեշտ այսքան կոդը գրելու համար։ Իսկ Emmet – ի օգնությամբ մեզ բավական է գրել ընդամենը
.container>.menu>ul>li*6>a[#]{Link $}^^^.image>img[images/photo1.jpg]^.content>.posts.post$*4>h3.post-title{Post $ Title}+p.paragraph*2>(lorem50)
արտահայտությունը, կուրսորը դնել ամենավերջում և սեղմել TAB ստեղնը։ Արդյունքում կստանանք այն, ինչ ցանկանում էինք, բայց անհամեմատ ավելի արագ։ Այժմ եկեք մանրամասն հասկանանք, թե ինչ է գրված այս մի տող արտահայտության մեջ։ .container իրենից ներկայացնում է <div class=”container”></div>, նրանից հետո եկող > նշանը ցույց է տալիս, որ հաջորդիվ եկող արտահայտությունները կլինեն <div class=”container”></div> մեջ։ .menu – ն, արդեն երևի կռահեցիք, որ պետք է նկարի menu կլասսով div էլեմենտ, իսկ ul>li*6>a[#]{Link $} կգրի 6 կետից բաղկացած ցանկ, որի ամեն մի կետ իր մեջ պարունակում է դեպի # հղում։ {Link $} մասը այդ հղումների մեջ որպես տեքստ կգրի Link և կողքին 1-6 թվերը համապատասխանաբար։ ^^^ նշաններից ամեն մեկը ցույց է տալիս, որ իրենից հետո եկող արտահայտությունը կգրվի այդ նշանին նախորդող էլեմենտի parent – ի հետ նույն հարթության վրա։ Այսինքն Link $ արտահայտությունից հետո եկող ^ նշանը կարգադրում է դուրս գալ Link $ – ին ծնող հանդիսացող <a> էլեմենտից, հաջորդ ^ նշանը կարգադրում է դուրս գալ <a> – ին ծնող հանդիսացող <li> – ից և այդպես շարունակ։ Արդյունքում ^^^ – ից հետո եկող <div class=”image”> էլեմենտը կգրվի menu կլասսով բլոկից դուրս։ Շարունակությունը նույնպես կաշխատի միևնույն սկզբունքով։ Իսկ ամենավերջում գրված (lorem50) արտահայտությունն իրենից ներկայացնում է 50 բառից բաղկացած կամայական փորձնական տեքստ։
Հնարավոր է, որ սկզբում այսպիսի գրելաձևը մի փոքր խորթ և բարդ թվա Ձեզ, սակայն մի փոքր վարժվելուց հետո, համոզված եմ, Դուք այլևս չեք ցանկանա այլ կերպ գրել Ձեր կոդերը։ Սկզբի համար խորհուրդ կտամ միանգամից չգրել այսպիսի ծավալով կոդեր։ Կարելի է սկսել փոքր՝ 2-3 էլեմենտներից բաղկացած կոդերից, այնուհետև աստիճանաբար մեծացնել մասշտաբները։ Մի խորհուրդ ևս՝ մի փորձեք գրել լրիվ արտահայտությունը միանգամից։ Ամեն պահի Դուք կարող եք սեղմել TAB ստեղնը, տեսնել ինչպիսի տեսք ունի Ձեր կոդը տվյալ պահին, այնուհետև սեղմել Ctrl + z ստեղները և շարունակել արտահայտությունը։ Նմանատիպ բոլոր արտահայտություններին կարող եք ծանոթանալ Emmet – ի պաշտոնական կայքից։
Special Html Characters
Եվս մի հավելված, որը կարելի է օգտագործել, Special Html Characters – ն է։ Ոչ շատ մեծ ֆունկցիոնալ ապահովող հավելված, որն այնուամենայնիվ Ձեզ զերծ կպահի ավելորդ ժամանակ ծախսելուց և Ձեզ անհրաժեշտ նշանները համացանցից փնտրելուց։ Այս հավելվածի միջոցով մենք կարող ենք հեշտությամբ գտնել և մեր կոդի մեջ տեղադրել հատուկ HTML նշաններ, ինչպիսիք են օրինակ՝ < © & → ։ Այս նշանները դնելու համար մեզ անհրաժեշտ է սեղմել Alt+c ստեղները, որից հետո կբացվի այս նշանները պարունակող պատուհան, և մենք կարող ենք ընտրել մեր ուզած նշանը։
Brackets Color Palette
Հաջորդ հավելվածը, որը նույնպես կարելի է ունենալ, Brackets Color Palette – ն է։ Այն տալիս է հնարավորություն առանձին նկարների վրայից ընտրել գույներ, որոնք կցանկանանք օգտագործել մեր կոդերի մեջ։ Այս հավելվածի տեղադրումից հետո աջ կողմում կավելանա ներկապնակի նկար, որի վրա սեղմելուց հետո մկնիկի սլաքի նշանը կդառնա խաչ, որով սեղմելով նկարի ցանկացած մասի վրա մենք կստանանք այդ մասի գույնի կոդը: Իսկ վերջինս էլ արդեն հեշտությամբ կարող ենք տեղադրել մեր կոդի մեջ։
Minifier
Հավանաբար բազմիցս հանդիպած կլինեք CSS և JavaScript ֆայլերի, որոնց անվան մեջ կետից առաջ գրված է .min արտահայտությունը, օրինակ՝ jquery.min.js: Դժվար չէ կռահել, որ այն իրենից ներկայացնում է ֆայլի սեղմված տարբերակը։ Մենք հիմնականում կոդեր գրելուց պահպանում ենք գեղեցիկ գրելաձևը՝ բացատների միջոցով, որը հնարավորություն է տալիս հեշտությամբ կարդալ տվյալ կոդը։ Սակայն այդ բոլոր բացատներն իրենցից ներկայացնում են ավելորդ ծախսված բայտեր, որոնց ընդհանուր գումարը կարող է կազմել բավականին զգալի թիվ՝ կայքի բեռնման վրա թեկուզ մի փոքր ազդելու առումով։ Այդ իսկ պատճառով նպատակահարմար է արդեն ամբողջությամբ պատրաստի կոդերը սեղմել և փոքրացնել։ Համացանցում կարելի է գտնել բազմաթիվ այդպիսի սերվիսներ, որոնց միջոցով կարելի է ստանալ նրանց փոխանցած ֆայլի սեղմված տարբերակը։ Սակայն ի՞նչ կարիք կա ծախսել ավելորդ ժամանակ և փնտրել այդպիսի սերվիսներ, եթե հնարավոր է միանգամից հենց խմբագրիչի միջոցով սեղմել մեր պատրաստի կոդը։ Minifier հավելվածը նախատեսված է հենց դրա համար։ Կոդի մեջ սեղմելով Ctrl+m ստեղները, այն ավտոմատ կգեներացնի մեր ֆայլի սեղմված տարբերակը։ Այս հավելվածը մեզ շատ կօգնի մեծ պրոյեկտների մեջ։
Այս գրառման մեջ ես Ձեզ ծանոթացրեցի այնպիսի հավելվածների հետ, որոնք դասվում են հաճախակի օգտագործվողների շարքին։ Համոզված եմ՝ այստեղ քննարկված բոլոր հավելվածները Ձեզ շատ օգտակար կլինեն։ Դուք ինքներդ նույնպես կարող եք որոնել Ձեզ համար օգտակար հավելվածներ, իսկ չգտնելու դեպքում, ինչպես միշտ, կարող եք դիմել մեզ՝ մեկնաբանությունների միջոցով կամ գրելով մեր էլ․փոստերին։
Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով IT-Blog թիմ։
