آموزش emmet جهت کدنویسی سریع
توسعه دهندگان و پلاگین نویس ها در مبحث برنامه نویسی و کدنویسی جهت سهولت کار و تسریع زمان کدنویسی ابزارهای متعددی را ابداع نموده اند که این ابزارها علاوه بر سرعت بخشیدن به روند کدنویسی، دقت برنامه نویسی را نیز بالاتر می برند. یکی از این پلاگین های پرکاربرد پلاگین Emmet می باشد.
این پلاگین تقریبا برای تمامی ویرایشگرهای متن معروف وجود دارد. در بعضی از ویرایشگرهای متن مانند phpstorm نصب است و فقط بایستی فعال شود و یا اینکه بایستی پلاگین مربوطه را برای ویرایشگر مورد نظر دانلود و نصب نمایید.
آموزش نصب و استفاده از پلاگین emmet
در ادامه این مقاله ابتدا مراحل نصب emmet را توضیح می دهیم و سپس به آموزش استفاده از آن می پردازیم.
دانلود پلاگین emmet
ابتدا به آدرس مورد نظر جهت دانلود پلاگین emmet می رویم و طبق تصویر زیر ادیتور مورد نظر را انتخاب کرده و طبق مراحل ذکر شده برای ادیتور مورد نظر اقدام به نصب آن می کنیم.
همچنان می توانید از داخل تنظیمات Extension مربوط به ویرایشگر متن خود اقدام به نصب پلاگین emmet نمایید. برای مثال در ویرایشگر متن brackets که یکی از محبوب ترین ویرایگارهای رایگان می باشد می توانید از مسیر file/Extension Manager اقدام به جستجو و نصب پلاگین Emmet کیند.
پس از نصب Emmet یک بار ویرایشگر متن مورد نظر را ببندید و مجددا باز کنید. بسیار عالی حالا می توانید به سرعت باد کدنویسی کنید.
آموزش استفاده از پلاگین emmet
پس از نصب پلاگین Emmet یک سری میانبرها در اختیار شما قرارداده می شود که توصط این میانبرهای بامعنا می توانید با نوشتن چند کلمه و زدن کلید tab چندین خط کد را بنویسید. شاید ابتدای کار کمی دشوار به نظر برسد ولی بعد از چند بار تمرین حتما از این کار خوشتون میاد.
اگر به صفحه داکیومنت Emmet مراجعه کنید تمامی این میانبرها در اختیار شما قرار داده شده است. مثلا فرض کنید یک تگ div با یک کلاس به نام wrapper به شکل زیر نوشته میشود
.wrapper
خروجی بعد از زدن کلید tab به شکل زیر می شود
<div class="wrapper"></div>
یا یک div با شناسه id برابر با wrapper به این صورت نوشته میشود
#wrapper
خروجی بعد زردن کلید tab به شکل زیر می شود
<div id="wrapper"></div>
حال فرض کنید یک تگ ul دارای یک فرزند li را بخواهیم.
table>tr>td
خروجی بعد زردن کلید tab به شکل زیر می شود
<ul>
<li></li>
</ul>
در مثال بالا 5 فرزند li برای ul با علامت ستار و بعد عدد 5 نوشته میشود
ul>li*5
خروجی بعد زدن کلید tab به شکل زیر می شود
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
از علامت به علوه + می توانید تگ های پشت سر هم بنویسید
div+p+ul>li
خروجی بعد زدن کلید tab به شکل زیر می شود
<div></div>
<p></p>
<ul>
<li></li>
</ul>
با استفاده از علامت پرانتز باز و بسته می توانید مجموعه ای از تگ ها را زیر مجموعه تگ دیگری کنید
div>(header>ul>li*3>a.link)+footer>div
خروجی بعد زدن کلید tab به شکل زیر می شود
<div>
<header>
<ul>
<li><a href="" class="link"></a></li>
<li><a href="" class="link"></a></li>
<li><a href="" class="link"></a></li>
</ul>
</header>
<footer>
<div></div>
</footer>
</div>
می توانید توسط علامت [] صفات مربوط به هر تگ را داخل آن بنویسید
a[href="js/jquery" title="Hello world"]
خروجی بعد زدن کلید tab به شکل زیر می شود
<a href="js/jquery" title="Hello world"></a>
هدف اصلی این آموزش آشنایی شما با نصب و استفاده از پلاگین emmet بود . چند تا از مهمترین دستورات emmet در این مقاله گفته شد. طبق داکیومنت emmet می توانید بقیه دستورات را نیز یادبگیرید.
نظرات کاربران