menu

ابزار های توسعه دهنده ی مدرن وب

Emmet

یکشنبه 21 شهریور 1395

مهم ترین ابزار هر برنامه نویس چیه؟ صد در صد IDE اون یا همون ویرایشگر متنش

اصا یه برنامه نویس، با ویرایشگر متنش شناخته میشه و هر وقت کسی بگه برنامه نویسی، اولین چیزی که توی ذهن آدم میاد یه صفحه ی ویرایشگر متن هست با کلی کدهای عجیب غریب

من خودم تا به الان، توی هر برهه ی زمانی، از یه ویرایشگری استفاده کرده ام

اوایل کار به notepad++ اکتفا میکردم، ولی بعد دیدم واقعا کار باهاش حوصله سر بر هست و خیلی چیزایی که میخواهم را نداره (یا برای داشتنش باید کلی سختی تحمل کنی)

بعد از اون هم برای نوشتن کدهای وب، به phpstorm و webstorm روی آوردم و کلا رفتم سراغ محصولات JetBrain

خوب بودند، ولی سنگین و پرحجم. حجم دانلودهاشون یه طرف، سنگین بودنش هم یه طرف. خیلی وقت ها برای تغییر یه Title توی یه فایل ساده ی html باید کلی صبر میکردم تا این ویرایشگر و پلاگین های غول آساش بیاد بالا

پس واسه ی کارهای روزمره ام رفتم سراغ یه چیز سبک تر

البته توی لینوکس (هر وقت توی لینوکس بودم) Gedit هم ابزار بدی نبود، ولی اون هم مثل notepad++ خیلی چیزا را نداشت

این شد که رفتم سراغ sublime و واقعا هم ازش راضی ام. یه حس خوبی بهم میده. همه چیزی که میخوام را واسه ی وب داره، یا خیلی چیزا را خیلی سریع و راحت میشه نصب کرد روش. سبکه، سریعه و...

یه تم monokai بنداز روش (جدیدا از تم Material Dark استفاده میکنم) ، یه فونت درست حسابی و همه چیز واسه ی برنامه نویسی آماده است

البته این را هم اضافه کنم که تازگی ها دارم میرم سراغ Atom. خیلی شبیه به Sublime هست و امکانات Git اون خیلی فوق العاده است (هرچی باشه خود Github داره توسعه اش میده!)

ولی بحث ما درباره ی ویرایشگرهای متن نبود!

درباره ی ابزار های وب بود!

قراره ما الان با Emmet آشنا بشیم. یه پلاگین که برای خیلی از ویرایشگرها در دسترس هست و میتونید روی ویرایشگرتون نصبش کنید، و کد زدن های HTML و CSS را براتون خیلی راحت میکنه

اول از همه میریم سراغ سایتشون ؛ توی همین صفحه، برای شما یه دموی خیلی عالی هست که میتونید امکانات Emmet را سریع توش ببینید

روی لینک دانلود کلیک میکنیم، و توی این صفحه، روی ویرایشگر خودمون کلیک میکنیم

از اونجایی که ویرایشگر خود من Sublime هست، ادامه ی کار را من بر اساس Sublime میرم، ولی روند کار برای بقیه ی ویرایشگر ها هم مثل همونه

برای نصب بسته ی Emmet روی ویرایشگرمون، ما باید ابتدا Package Control را توی Sublime نصب و فعال کنیم. برای اینکار، اول به اینجا میریم

و کد مورد نظر را، بر اساس نسخه ی Sublime خودمون، کپی میکنیم

حالا بر میگردیم به sublime و با زدن دکمه های ترکیبی

Ctrl + `

کنسول Sublime را باز میکنیم و کد را توش کپی میکنیم و اینتر میزنیم

الان تنها کافیه که ویرایشگرمون را ریست کنیم. پس یه بار Sublime را میبندیم و دوباره باز میکنیم. میبینید که Package control نصب شده. حالا وقت اون هست که با استفاده از Package control، بسته ی Emmet را نصب کنیم.

برای این کار کلید های ترکیبی زیر را میزنیم

ctrl + shift + P

و از قسمت باز شده، کلمه ی package control را تایپ میکنیم و با دکمه های بالا و پایین، روی قسمت Install Package میریم

و سپس کلمه ی Emmet را تایپ میکنیم و با زدن اینتر، نصبش میکنیم. (البته من دوست دارم Emmet CSS Snippets را هم نصب کنم)

پ.ن 1: اگه با این ارور PyV8 manual install مواجه شدید، طبق اینجا عمل کنید

پ.ن 2: اگه برای دانلود از سرور github با مشکل موجه شدید، از این مستقیم کننده ی لینک استفاده کنید

بر میگردیم سراغ sublime خودمون

الان میتونیم خیلی راحت، کد بزنیم!

برای مثال، واسه ی ساختن یه div کافیه کد زیر را بزنیم

div

و سپس tab بزنیم (tab را باید بلافاصله بعد از نوشتن div بزنید)

یا اگه یه div با یه p درون اون بخواهیم

div>p

و بعد tab را میزنیم

یا اگه مثلا دو تا p داخل یه div بخواهیم

div>p*2

و بعد tab را میزنیم

نکته ی خیلی فوق العاده در این حالت، اینه که با زدن tab، میتونیم به فرزند بعدی بریم!

یعنی مثلا فرض کنید ما یه ul با ده تا li داریم

ul>li*10

در این حالت ، با زدن اولین tab، به داخل li بعدی میریم و با زدن tab های بعدی، به داخل li های بعدی میریم و میتونیم خیلی راحت مقدار دهی کنیم

یا اگه بخواهیم یه div داشته باشیم و داخلش دوتا p و یه h3 باشه کافیه 

div>p*2+h3

را بنویسیم و یه tab بعدش بزنیم

دو تا نکته که خیلی مهم هست اینه که اول از همه، برای زدن tab باید بلافاصه بعد از کدی باشه که میزنیم و اگه بعد از کد ما یه space بزنیم بعد tab بزنیم، emmet کار نمیکنه

نکته ی دوم هم اینه که emmet تنها برای وب هست و پسوند فایل ما باید html باشه یا پایین sublime، نوع صفحه را html مشخص کنیم

البته شما از خیلی از تگ های دیگه میتونید استفاده کنید، و البته لازم نیست که اسم اون تگ را کامل بنویسید. مثلا برای داشتن یه تگ blockqoute فقط کافیه بنویسیم

bq

و tab را بنویسیم

(البته خودم هم اینو اضافه کنم که با اضافه کردن emmet، این autocomplete جایگزین autocomplete پیشفرض خود sublime میشه. مثلا قبل از نصب emmet، تنها با نوشتن html و زدن tab، تمامی تگ های head و body و title و doctype نیز نوشته میشه، ولی بعد از نصب emmet با نوشتن html و زدن tab، تنها تگ html نوشته میشه... البته این را هم اضافه کنم که اگه میخواهید تگ های body و head و title را باهم با یه کلمه داشته باشید، کافیه به جای html و زدن tab، از html:5 و زدن tab استفاده کنید)

بیایید بیشتر باهاش کار کنیم

فرض کنید میخواهید یه div داشته باشیم با یه تگ p داخلش، و خارج از تگ div (در کنارش) یه تگ blockqoute هم داشته باشیم

div>p^bq

و بعد tab را میزنیم

بیایید یه بار دیگه تست کنیم

div>section>p^^bq

در این حالت ما یه div داریم و داخل اون یه section و داخل اون p و دو تا پدر بالاتر (میشه هم ردیف با div) یه blockqoute داریم

بیایید یکم بیشتر با علائم ریاضی بازی کنیم! وقت استفاده از () هست!

div>section>(ul>li*5)+p*2

و tab را میزنیم

جالب شد، نه؟ در این حالت ما یه div داریم که داخلش یه section هست و داخل اون section، ما یه ul با 5 تا li داخلش داریم و در کنار ul، دوتا p ! (کلا داخل پرانتز باهم پردازش میشه و p چون بیرون پرانتز هست، هم سطح با ul درنظر گرفته میشه)

بریم سراغ استفاده از class ها و id ها

همونطور که کلاس ها را توی css با . و id ها را با # انتخاب میکردیم، قوانین توی emmet هم به همون شکل هست

برای مثال میزنیم

.container

و tab را میزنیم، در این حالت برای ما یه div میسازه با کلاس container

یا خیلی راحت برای داشتن دو تا کلاس همزمان

.container.row

را میزنیم و tab میزنیم

یا اگه بخواهیم به جای div، به یه p یا section کلاس بدهیم کافیه بزنیم

section.row

و tab را بزنیم

بریم سراغ id. برای id هم از # میشه استفاده کرد (و البته میتونیم همزمان با کلاس بهشون id هم بدیم)

مثلا

.container#main

و tab را میزنیم

بیایید یکم بیشتر باهاش بازی کنیم!

.container.row>ul.people>li.person*5

واقعا کار ها با emmet خیلی راحت میشه!

بریم سراغ خصیصه های دیگه. همونطور که توی CSS Selector ها، از [] استفاده میکنیم، اینجا هم میتونیم از همونا استفاده کنیم

مثلا فرض کنید یه تگ img میخواهیم، با خصیصه ی alt

کافیه بزنیم

img[alt='picture']

و tab را بزنیم

حالا فرض کنید که ما یه ul داریم با 10 تا li داخل اونها، و میخواهیم که li ها به ترتیب item1 تا item10 باشه. برای این کار کافیه از علامت $ استفاده کنیم

ul>li.item$*10

و tab را بزنیم. حالا چی میشه که به جای یه دونه $، از سه تا $ استفاده کنیم؟

ul>li.item-$$$*10

در این حالت، اعداد ما سه رقمی میشن و از 001 شروع میشن

حالا که حسابی با تگ ها بازی کردیم، بریم به اونها محتوا بدیم

برای دادن محتوا به هر تگ، کافیه از {} استفاده کنیم

مثلا

.container>p{paragraph}+h1{My Title}

البته برخی وقت ها نیاز میشه که از یه متن تستی استفاده کنیم. مثل متن Lorem ipsum. برای این کار کافیه فقط از کلمه ی lorem استفاده کنیم

p>lorem

البته شاید یه چنین متن طولانی نیاز ما نباشه. ما میتونیم طول متن lorem را هم تعیین کنیم. مثلا برای استفاده از 10 تا کلمه

p>lorem10

و tab را میزنیم

اگه یادتون باشه، با زدن 

.container

emmet میومد و به طور پیش فرض، یه div میسازه با کلاس container

ولی همیشه هم اینطور نیس!

مثلا اگه parent اون یه table باشه، وقتی که تگ را مشخص نکنیم، emmet میاد و به طور پیش فرض کلاس ها را به tr میده

یعنی مثلا

table>.bold

میاد یه table میسازه با یه tr داخلش با کلاس bold

و به همین ترتیب اگه داخل p باشه

p>.success

کلاس را به یه span میده. یا اگه داخل یه ul یا ol باشه

ol>.small

میاد و کلاس را به li میده

حالا بیاید سراغ یه چیز باحال تر بریم!

اول با

ul>li*10

10 تا li میسازیم. حالا کافیه داخل اولین li کلیک کنیم و با زدن ctrl + alt + Up بقیه ی li ها را انتخاب کنیم. الان با نوشتن یه متن، میتونیم همزمان داخل هر ده تا li بنویسیم!

یا فقط با زدن ctrl + shift + Up و یا ctrl + shift + down ترتیب li هامون را عوض کنیم

تا به اینجای کار، درباره ی Emmet و HTML زیاد صحبت کردیم، اگه درباره ی Emmet و CSS حرفی نزنیم واقعا در حقشون جفا کرده ایم!

اولین css ما، margin هست. برای دادن margin کافیه بزنیم

m10

و tab را بزنیم. به همین راحتی margin میدیم!

یا اگه بخواهیم دو تا مقدار یا چهار تا مقدار بهش بدیم، کافیه فقط بزنیم

m10-20
m10-20-30-40

و tab را بزنیم.

emmet میاد و به طور پیش فرض، از پیکسل استفاده میکنه. ولی اگه بخواهید شما از درصد استفاده کنید میتونید کاراکتر p (مخفف percent) را تهش بزنید

m10p

و به همین ترتیب برای em از e و برای rem از r استفاده میکنیم.

و البته برای تغییر این عدد و کم و زیاد کردنش، لازم نیست هر دفعه تمام متن را انتخاب کنیم و عدد را عوض کنیم. کافیه فقط روی عدد کلیک کنیم و با زدن alt + Up یا زدن alt + down مقدار اون عدد را کم و زیاد کنیم

و دقیقا هم به همین سبک، میتونیم padding بدیم

p10r

بریم سراغ رنگ بندی و color

برای رنگ ها از c استفاده میکنند

مثلا برای دادن یه رنگ میزنیم

c#7

و در این حالت رنگ #777 را میدیم و یا برای استفاده از رنگ 6 رقمی کافیه بزنیم

c#12

میریم سراغ قسمت بعدی، که من این قسمت را خیلی دوست دارم!

احتمالا شما هم مثل من همیشه از زدن چهار تا کد برای moz و webkit و o و ms و اینا زجر کشیده اید. برای کدهایی مثل transform و transition و animation

emmet با زدن یه کد مثل

-property

و زدن tab، خیلی راحت تمام اون ها را بهمون میده

قسمت بعدی، انجام محاسبات هست، اون هم داخل ویرایشگر

فرض کنید بخواهیم بدونیم که 10 تقسیم بر 3.5 چند میشه، و مقدارش را بدیم به یه selector

برای اینکار کافیه فقط بنویسیم

10/3.5

و ایندفعه به جای tab، از ctrl + shift + Y استفاده کنیم

خب کار ما با emmet تا به اینجا تقریبا به پایان رسید

ولی واقعا حیفه که این همه از emmet گفتیم، ولی درباره ی شخصی سازی emmet حرفی نزنیم

شما میتونید emmet را شخصی سازی کنید و کلمات کلیدی خودتون را بهش اضافه کنید

اول از همه، یه سری به لیست Snippets های Emmet بندازیم. از توی منو ها، منوی Prefrences را انتخاب میکنیم و بعدش Browse Packages را میزنیم. توی فولدر باز شده هم به پوشه ی Emmet/emmet میریم و فایل snippets.json را باز میکنیم.

این هم از لیست تمام snippet ها! 

یکی از مورد علاقه های من هم اینه:

که یعنی با نوشتن ! و زدن tab خیلی راحت تمام تگ ها doctype و head و html و body و charset و title بر اساس html5 برای شما آماده است!

بیایید یه snippet جدید خودمون بسازیم

برای این کار، ابتدای یه سری به تنظیمات Emmet میزنیم. خیلی راحت از منو ها، قسمت Prefrences میریم و Package Settings را انتخاب میکنیم و داخل اون، Emmet و سپس Setting - Default را انتخاب میکنیم. این تنظیمات کلی Emmet هست

توجه شما را به قسمت Snippets جلب میکنم. یه چنین کدی اونجا هست

"snippets": {
		// "html": {
		// 	"abbreviations": {
		// 		"example": "<div class='example' title='Custom element example'>"
		// 	}
		// }
	},

با استفاده از این قسمت، شما میتونید خیلی راحت یه کلید واژه ی جدید تعریف کنید. برای شروع، کد های بالا را از حالت comment در میاریم و فایل را ذخیره میکنیم.

حالا کافیه توی فایل html خودمون بنویسیم

example

و tab را بزنیم.

این هم از Snippet ما، ولی اصلا خوب نیست که ما توی فایل Prefrences->Package Settings-> Emmet -> Settings - Default تغییر ایجاد کردیم. چون این فایل، با به روز شدن ویرایشگر و بسته ی Emmet به حالت قبلش در میاد و تغییر میکنه. برای این که ما تنظیمات خصوصی خود را داشته باشیم، باید اون ها را توی Prefrences->Package Settings-> Emmet -> Settings - User بزنیم. پس فایل Default را به حالت قبلش در میاریم و کد زیر را توی قسمت User میزنیم و البته بیاید این دفعه یه چیز درست حسابی تر از example بزنیم. من دوست دارم که با زدن یه دکمه، یه منو داشته باشم!

{
	"snippets": {
		 "html": {
		 	"abbreviations": {
		 		"menu": "nav.menu>ul>li*5"
		 	}
		 }
	}
}

و فایلمون را ذخیره میکنیم. (دوباره تکرار میکنم. هیچ وقت توی فایل Settings - Default تغییر ندید! اصلا خوب نیس)

حالا بریم توی فایل html مون و امتحانش کنیم

میزنیم

menu

و tab را میزنیم

فک کنم الان دیگه متوجه شده باشید که داشتن یه ویرایشگر خوب و کانفیگ شده واقعا رحمته!

امیدوارم کدهاتون را با emmet سرگرم کننده تر و سریع تر بنویسید

مهدی