امروز قصد دارم نحوه ی نصب پلاگین پر کاربرد emmet رو روی sublime خدمتتون آموزش بدم و اینکه یه صحبتی در رابطه با emmet داشته باشیم تا با این افزونه شما هم آشنا بشید.

 
Emmet چیست ؟

برای کدنویس های عزیز این ابزار میتونه خیلی مفید و کاربردی باشه، چرا که با مخفف نویسی میتونن خیلی راحت کدهای طولانی رو پیاده کنن .

استفاده از Emmet در HTML

مثلا برای ایجاد کدی به شکل زیر :

<ul>
    <li> <a href=""></a> </li>
    <li> <a href=""></a> </li>
    <li> <a href=""></a> </li>
    <li> <a href=""></a> </li>
</ul>

میتونید دستور زیر رو بنویسید و در انتها کلید Tab رو بزنید، خودش بصورت هوشمند کد بالا رو براتون میسازه:

ul>li*4>a

استفاده از Emmet در CSS

برای نوشتن دستورات css هم میتونید از Emmet استفاده کنید.

مثلا برای نوشتن دستور زیر :

padding: 25px

میتونید دستور زیر رو بنویسید و دکمه Tab رو بزنید:

p25px

تمامی دستورات Emmet در سایت خودش بصورت ویدئوی آموزشی موجود هست، که میتونید ببینید و استفاده کنید.

نکته : دقت داشته باشید که pointer موس باید انتهای کد قرار بگیره و بعد دکمه  Tab رو بزنید.
نحوه ی نصب Emmet روی Sublime

Emmet رو میتونید روی چندین Editor نصب کنید ، اما تو این مقاله من میخوام نحوه ی نصب اون رو روی sublime خدمتتون آموزش بدم.

۱- خوب در ابتدا Emmetرو دانلود کنید.

۲- اون رو از حالت فشرده خارج کنید ، پوشه ی emmet-sublime-master رو به نام Emmet تغییر بدید. حالا تمامی محتویات این پلاگین بصورت مستقیم داخل پوشه ی Emmet قرار گرفته.

۳- حالا میریم سراغ sublime ، sublime رو باز کنید، از منوی بالا روی گزینه ی preferences کلیک کنید، Browse Package رو انتخاب کنید، یه پنجره باز میشه، پوشه ی Emmet رو داخل این قسمت کپی کنید.

۴- حالا sublime رو ببندید و مجدد باز کنید. معمولا بعد از این مراحل Emmet اجرا میشه. بعد از اینکه مجدد sublime رو باز کردید، یه صفحه با نوع html باز کنید و دستورات بالارو که براتون مثال زدم تست کنید، اگر دستور مخفف کار کرد پس Emmet نصب شده ، اگر که کار نکرد مراحل بعدی رو ادامه بدید.

۵ – ابتدا ببینید package control روی sublime نصب هست یا خیر .

۶ – برای اینکه متوجه بشید نصب هست یا خیر به گزینه preferences برید و انتهای منو رو نگاه کنید، اگر package control رو مشاهده می کنید ، پس روی sublime شما نصب هست، پس به ادامه مراحل برید ، در غیر این صورت بایدpackage control رو نصب کنید.

۷ – روی گزینه  package control کلیک کنید، در کادری که باز میشه بنویسید Install Package و دکمه Enter رو بزنید.

۸- در کادری که باز میشه Emmet رو جستجو کنید، پس از جستجو در نتایج Emmet رو برای شما میاره ، روی اون کلیک کنید و منتظر باشید تا اون رو نصب کنه.

۹- یک مرتبه sublime رو ببنید و مجدد باز کنید.

۱۰- از Emmet لذت ببرید : )

دقت داشته باشید این پلاگین روی sublime 2 تست شده و به درستی اجرا می شود.

امیدوارم که این آموزش براتون مفید بوده باشه.