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


نویسنده:
جمعه 26 مهر 1398
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 خروجی را مشاهده کنید.



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

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

بررسی تفاوت فرانت اند و بک اند در طراحی وب به صورت جامع

در این مقاله تفاوت فرانت اند و بک اند را با هم بررسی خواهیم کرد. اگر یک کاربر مبتدی کامپیوتر...

ابزارهای UI| معرفی بهترین نرم‌افزارهای طراحی رابط کاربری

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

سابلایم تکست (Sublime Text) چیست؟ + بررسی مزایا و معایب آن

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

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

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

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

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

  1. ناشناس گفت:

    سلام. چطور می تونم روی vscode، ایمت را نصب کنم؟

  2. میثم معینی گفت:

    سلام من انجام میدم نمیشه ارور میده

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