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



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

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

تبدیل صفحه‌ی وب‌سایت به PDF | افزودن دکمه دانلود صفحه سایت

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

بهترین ویرایشگر کد برای طراحی وب

انتخاب یک ویرایشگر کد یا IDE مناسب برای برنامه نویسان همیشه چالشی بزرگ است. در این مقاله ۵ مورد از...

‌کپچا چیست؟ چگونه از ریکپچا گوگل استفاده کنیم؟

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

معرفی 9 فریم ورک جاوا اسکریپت برتر در سال 2021

جاوا اسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است.که فریم ورک‌‌های جاوا اسکریپت هم به همان اندازه محبوب هستند. یک فریم...

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

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

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

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

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

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

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

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