در جلسه ششم از آموزش html و css میپردازم به کدنویسی سریع HTML و CSS با Emmet
مشاهده ویدئو از یوتیوب:
https://www.youtube.com/watch?v=46Q_RN7llkM
مشاهده کد های emmet :
https://docs.emmet.io/cheat-sheet/
Emmet یک ابزار کدنویسی سریع و کارآمد است که با استفاده از میان‌برهای ساده، به شما اجازه می‌دهد ده‌ها خط کد HTML یا CSS را تنها با چند کلید تایپ تولید کنید. این افزونه محبوب در ویرایشگرهایی مانند VS Code به شما کمک می‌کند سرعت توسعه‌ی فرانت‌اند را چندین برابر افزایش دهید.
Emmet چیست و چرا باید از آن استفاده کنیم؟
Emmet یک افزونه‌ی توسعه‌دهنده برای ویرایشگرهای کد است که با تایپ یک خلاصه‌ی کوتاه از ساختار HTML یا CSS، کدی کامل و منظم تولید می‌کند.
برای مثال، وقتی تایپ می‌کنید ul>li*5 و کلید Tab را می‌زنید، Emmet به‌طور خودکار یک لیست HTML با ۵ آیتم برایتان تولید می‌کند. این یعنی به جای نوشتن چندین خط تکراری، فقط با چند کاراکتر به نتیجه می‌رسید.
چرا Emmet مهم است؟
در دنیای توسعه وب، زمان و دقت اهمیت زیادی دارد. Emmet با کاهش تایپ دستی و کاهش خطاهای احتمالی، روند طراحی صفحات HTML و نوشتن استایل‌های CSS را سریع‌تر و آسان‌تر می‌کند. این ابزار به‌ویژه برای طراحان وب و فرانت‌اند دولوپرهایی که روزانه با کدهای تکراری سروکار دارند، یک دستیار قدرتمند به حساب می‌آید.
چگونه Emmet را در ویرایشگر خود فعال کنیم؟
اکثر ویرایشگرهای مدرن مانند Visual Studio Code و Sublime Text به‌طور پیش‌فرض از Emmet پشتیبانی می‌کنند یا می‌توان آن را به‌سادگی فعال کرد.
فعال‌سازی Emmet در VS Code
-
وارد تنظیمات VS Code شوید.
-
در بخش Extensions عبارت Emmet را جستجو کنید.
-
بررسی کنید که Emmet فعال باشد. در اکثر موارد، به‌صورت پیش‌فرض فعال است.
-
برای اطمینان بیشتر می‌توانید به فایل
settings.jsonتنظیمات زیر را اضافه کنید:
در Sublime Text
-
افزونه Emmet را از طریق Package Control نصب کنید.
-
سپس با کلیدهای ترکیبی
TabیاCtrl+Eاز قابلیت‌های آن استفاده کنید.
Emmet چگونه کار می‌کند؟ (با مثال)
Emmet از یک زبان خاص برای ایجاد ساختارهای HTML و CSS استفاده می‌کند که به آن “Abbreviation Syntax” یا زبان خلاصه‌سازی گفته می‌شود.
مثال‌های کاربردی در HTML
| کد تایپ‌شده در Emmet | خروجی تولید شده |
|---|---|
ul>li*3 |
یک لیست با سه آیتم |
div.container>p |
یک div با کلاس container و یک پاراگراف داخل آن |
form>input:text+input:submit |
یک فرم با فیلد متنی و دکمه‌ی ارسال |
مثال در CSS
| ورودی Emmet | خروجی |
|---|---|
m10 |
margin: 10px; |
p20-10 |
padding: 20px 10px; |
bd1#000 |
border: 1px solid #000; |
پرکاربردترین میان‌برهای Emmet کدام‌اند؟
میان‌برهای Emmet بسیار متنوع‌اند، اما برخی از آن‌ها در پروژه‌های روزمره بسیار مفید هستند.
لیستی از میان‌برهای محبوب:
-
div.className→<div class="className"></div> -
#header→<div id="header"></div> -
ul>li.item$*5→ لیستی با ۵ آیتم و کلاس‌های item1 تا item5 -
a:link→<a href=""></a> -
input:checkbox→<input type="checkbox">
ترکیب‌های پیشرفته:
-
nav>ul>li*3>a
خروجی: یک منوی ناوبری با سه لینک داخل لیست
چطور با Emmet سریع‌تر کدنویسی کنیم؟
برای بهره‌برداری کامل از Emmet، باید با ساختار زبان خلاصه‌سازی و کلیدهای میان‌بر آشنا شوید.
نکات کاربردی:
-
همیشه بعد از تایپ میان‌بر، کلید Tab را بزنید تا Emmet آن را گسترش دهد.
-
برای ایجاد چند عنصر مشابه، از
*استفاده کنید:div*4= ۴div -
برای تکرار با شماره‌گذاری، از
$استفاده کنید:li.item$*3→item1,item2,item3 -
با استفاده از
()می‌توانید ترتیب گروه‌بندی را مشخص کنید:div>(header+footer)→ یک div با دو بخش header و footer داخل آن
مزایای استفاده از Emmet چیست؟
Emmet مزایای زیادی برای توسعه‌دهندگان دارد، از جمله صرفه‌جویی در زمان، کاهش خطا، و نوشتن کدهای خواناتر.
مزایا در یک نگاه:
-
کاهش زمان کدنویسی
-
افزایش دقت و تمرکز روی طراحی
-
ساختار تمیزتر و قابل‌درک‌تر
-
سازگاری با اغلب ویرایشگرها
آیا Emmet فقط برای HTML است؟
خیر، Emmet از CSS نیز پشتیبانی می‌کند و حتی می‌توان آن را برای زبان‌هایی مانند JSX یا XML نیز تنظیم کرد.
در پروژه‌های React، با تنظیماتی ساده می‌توانید از Emmet برای کدنویسی JSX نیز بهره ببرید:
جمع‌بندی: آیا Emmet ارزش یادگیری دارد؟
قطعاً بله. Emmet ابزاری ساده اما قدرتمند است که بهره‌وری شما در کدنویسی HTML و CSS را به‌شدت افزایش می‌دهد.
با یادگیری چند قاعده ساده، می‌توانید در کمترین زمان ساختارهای پیچیده‌ای تولید کنید و تمرکزتان را روی طراحی و تجربه کاربر بگذارید.
سوالات متداول (FAQ)
۱. آیا برای استفاده از Emmet باید افزونه نصب کنم؟
در اغلب ویرایشگرها مانند VS Code، Emmet به‌صورت پیش‌فرض فعال است؛ اما در برخی دیگر مثل Sublime باید افزونه آن را نصب کنید.
۲. آیا Emmet در CSS هم کاربرد دارد؟
بله، Emmet برای نوشتن سریع کدهای CSS مانند margin، padding، border و … نیز کاربرد دارد.
۳. آیا Emmet روی پروژه‌های React یا Vue قابل استفاده است؟
بله، با تنظیمات مناسب می‌توانید Emmet را در JSX و قالب‌های Vue نیز فعال کنید.
۴. چطور میان‌برهای Emmet را یاد بگیرم؟
از وب‌سایت رسمی https://docs.emmet.io و تمرین‌های روزمره در محیط توسعه خود کمک بگیرید.
۵. Emmet روی موبایل هم کار می‌کند؟
خیر، Emmet در محیط‌های دسکتاپ مانند VS Code قابل استفاده است و در محیط‌های موبایلی پشتیبانی نمی‌شود.
نتیجه‌گیری + فراخوان به اقدام
Emmet یک ابزار حرفه‌ای و در عین حال بسیار ساده برای کدنویسی سریع‌تر در HTML و CSS است. با یادگیری اصول آن، می‌توانید زمان توسعه را کاهش داده و از نوشتن کد لذت ببرید.
📥 اگر هنوز از Emmet استفاده نمی‌کنید، همین امروز آن را در ویرایشگر خود فعال کنید و تاثیرش را ببینید.
