Emmet چیست؟ چگونه کدهای HTML و CSS را سریع‌تر بنویسیم؟


نویسنده:
جمعه ۲۶ مهر ۱۳۹۸
۱۲۰ بازدید
Emmet چیست؟

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

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


Emmet چیست؟

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

پیش‌نمایش استفاده از ابزار Emmet
پیش‌نمایش استفاده از ابزار Emmet

برای شروع کار با این ابزار، ابتدا باید به وبسایت رسمی Emmet بروید و از قسمت دانلود، راهنمای نصب اِمِت برای کد ادیتور ‌های متفاوت را مشاهده کنید.

ما در اینجا، نحوه نصب این ابزار در ادیتور محبوب SublimeText را آموزش می‌دهیم.


نصب اِمِت در SublimeText

در SublimeText مدیریت پلاگین‌ها، به لطف سیستم Package Manager بسیار آسان است. کافیست دکمه‌های ترکیبی Ctrl+Shift+P را بفشارید و در کادر باز شده عبارت install package را جستجو کنید.

نصب پلاگین در SublimeText
جستجوی عبارت install package

حال گزینه “Package Control: Install Package” را انتخاب کنید و در کادر باز شده عبارت Emmet را جستجو کنید.

نصب افزونه Emmet در SublimeText
نصب Emmet در Sublime Text

با انتخاب گزینه Emmet و فشردن کلید Enter این پلاگین در SublimeText شما نصب می‌شود و می‌توانید از آن لذت ببرید، به همین راحتی!



اختصارات Emmet

همه چیز با استفاده از اختصارات Emmet قابل نوشتن است. برای اینکه بتوانیم کدهای HTML و CSS را با استفاده از این اختصارات بنویسیم، باید نحوه نوشتن (Syntax) این عبارات را فرابگیریم.

چند مثال از اختصارات

برای درک بهتر این اختصارات، به چند مثال زیر توجه کنید.

مثال ۱) عبارت زیر را در کد html خود بنویسید:

حال اگر کلید tab را فشار دهید عبارت بالا تبدیل به کد html زیر می‌شود:


مثال ۲) عبارت زیر را در کد html خود بنویسید:

کلید tab را بفشارید تا این عبارت به کد زیر تبدیل شود:


مثال ۳) عبارات زیر را در کد CSS خود بنویسید و با فشردن کلید tab خروجی را مشاهده کنید.



برای یادگیری کامل نحوه نوشتن این اختصارات می‌توانید به مستندات وبسایت اِمِت مراجعه کنید.

مطالب زیر را حتما بخوانید

ایجاد لیست کشویی (drop-down) وابسته به هم در HTML

گاهی اوقات نیاز داریم تا چندین لیست کشویی (drop-down) را به هم وابسته کنیم. برای مثال انتخاب استان و شهر...

آموزش استفاده از فونت آیکون Font Awesome 5 در صفحات وب

فونت آیکون Font Awesome یکی از محبوب‌ترین فونت آیکون‌های مورد استفاده در صفحات وب است. در این مقاله به آموزش...

بهترین زبان برنامه نویسی برای طراحی سایت چیست؟

بهترین زبان برنامه نویسی برای طراحی سایت چیست؟ سؤالی که هر شخص علاقه‌مند به توسعه وب در شروع کار با...

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

در این مقاله سعی کردیم به زبانی ساده به معرفی زبان‌های برنامه‌نویسی در حوزه‌های مختلف بپردازیم.

بررسی تفاوت مفسر و کامپایلر در برنامه نویسی

در این مقاله به معرفی زبان های مفسری و کامپایلری می‌پردازیم سپس تفاوت مفسر و کامپایلر را بررسی می‌کنیم.

لوکال هاست چیست؟ نحوه‌ی راه‌اندازی هاست مجازی

لوکال‌ هاست (localhost) یک فضای محلی در کامپیوتر شخصی می‌باشد که فضایی مانند هاست یا یک سرور واقعی را برای...

دیدگاهتان را بنویسید

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *