امروز قصد دارم نحوه ی نصب پلاگین پر کاربرد 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 تست شده و به درستی اجرا می شود.
امیدوارم که این آموزش براتون مفید بوده باشه.
ثبت نظر