Энэхүү нийтлэлд SublimeText3 хувилбарыг ашигласан болно.
Нийтлэлийн ерөнхий
- Emmet гэж юу вэ
- Хэрхэн суулгах
- Хэрэглэх арга
- Өөртөө тохиромжтойгоор тохируулах
Emmet гэж юу вэ
Emmet нь кодчилол дэмжих зорилготой нэмэлт бөгөөд янз бүрийн багаж(tool) дээр суулгах боломжтой. "Emmet" ийг суулгасанаар хөгжүүлэх хурд нэмэгдэх болон код уншууртай болох сайн талтай. Ялангуяа веб хөгжүүлэгчид маань Sublime Text багаж ашиглаж байгаа бол хэрэгтэй plugin байх гэж бодож байна. Илүү их мэдээллийг эндээс хараарай.
Хэрхэн суулгах вэ
Emmet-ийг суулгахын өмнө Sublime Text дээр Package manager суусан байх шаардлагатай бөгөөд доорх маягаар суулгана. Аль хэдийн суусан бол Package Control-ийг суулгах алхамыг алгасаж болно.
Package Control-ийг суулгах
https://packagecontrol.io/installation руу орж өөрийн Sublime Text-д тохирох кодыг хуулж авна.
Console ийг гаргаж хуулж авсан кодоо хуулж ажиллуулна.
Доорх цонхонд хуулж ажиллуулна.
Ингээд Package Control суулаа.
Одоо Emmet-ийг суулгана.
- Ctrl+Shift+P
- Package Controll:Install Package
- Emmet ийг сонгож суулгана
Ингээд Emmet суулаа.
Хэрхэн хэрэглэх вэ
Хэрэглэх арга нь их амархан.
[ Emmet-ийн хураангуйлсан бичиглэл + Tab ] гэж ашиглана.
Хэд хэдэн жишээ үзье. Sublime Text-ээ нээгээд
a гэж бичээд [Tab] - ийг дарвал доорх үүсгэгдэнэ.
<a href=""></a>
body#_id._class гэж бичээд [Tab] - ийг дарвал доорх үүсгэгдэнэ.
<body id="_id" class="_class">
</body>
div>ul#_id>li*5>a гэж бичээд [Tab] - ийг дарвал доорх үүсгэгдэнэ.
<div>
<ul id="_id">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Маш хурдан бас гоё байгаа биз.
Үүн дээр анхаарах зүйл нь ямар хэл дээр бичиж байгаагаас хамаараад бичиглэлийн syntax аа Sublime Text багажнаасаа зөв сонгоорой. Жишээ нь дээрх жишээ бол html дээр syntax сонгогдсон байна.
Өөртөө тохиромжтойгоор тохируулах
Zen-Coding гэсэн plugin суусан бол Emmet харшилддаг юм шиг байна. Миний хувьд суулгаагүй байсан учир нээх асуудал гарсангүй. Хэрэв суусан бол доор маягаар устгаж болно.
- Ctrl+Shift+P
- Package Controll:Remove Package
- Zen-Coding ийг сонгож устгана
Emmet-ийн Tab button дарж code complete(гүйцээлт) хийдэг нь зарим нэг default түлхүүрүүдтэй харшилдаад байвал доорх маягаар disable хийж болно.
- Sublime Text > Preferences > Package Settings > Emmet > Settings – User
- “disabled_keymap_actions”: “expand_abbreviation_by_tab” ийг хуулж хадгалж өгнө.
Өөрийн гэсэн гүйцээлтийг оруулж өгөхийг хүсвэл доорх маягаар нэмнэ.
- Sublime Text > Preferences > Package Settings > Emmet > Settings – User
- Доорхыг бичээд хадгална
{
"snippets": {
"html": {
"profile": "html",
"snippets": {
"blabla": "blabla blabla"
}
}
}
}
ul>li*5>blabla гэж бичээд [Tab] дарахад доорх маягаар үүсгэгдэнэ.
<ul>
<li>
blabla blabla
</li>
<li>
blabla blabla
</li>
<li>
blabla blabla
</li>
<li>
blabla blabla
</li>
<li>
blabla blabla
</li>
</ul>
Энэхүү Sublime Text plugin-с өөр өөрийн бүтээмжийг дээшлүүлэх олон хэрэгтэй plugin-ууд байдаг бөгөөд доор эндээс үзэж сонирхоорой. Мөн Sublime Text хэрэглэдэггүй хүн доорх хуудас руу орж өөрийн хэрэглэдэг багажандаа таарсан Emmet plugin байгаа эсэхийг шалгаж үзээрэй.
http://emmet.io/download/
Эх сурвалж
http://emmet.io/
http://catcher-in-the-tech.net/2057/
