Emmet چیست
1400-03-12

Emmet چیست؟ ابزاری سریع برای کدنویسی html و css

افزونه emmet را می شناسید؟!

اگر به تازگی وارد دنیای طراحی سایت شده اید حتما به دنبال یک راهی هستید که کدنویسی را سریع انجام دهید. امروز قصد دارم یک ابزار سریع برای کدنویسی html وcss را به شما معرفی کنم که بسیار برای شما کاربردی است. این ابزار سریع Emmet نام دارد. در این مقاله بررسی می کنیم که Emmet چیست و چطور می توانیم از آن استفاده کنیم.

Emmet چیست؟


Emmet یک ابزار سریع برای توسعه دهنده گان وب می باشد و قابلیت این را دارد که سرعت نوشتن کدهای html  و css را تا حد زیادی افزایش دهد. Emmet به صورت یک افزونه  در ویرایشگرهای کد مختلف نصب می شود. این ابزار سرعت بخش در کدنویسی در سال 2008 توسعه پیدا کرده است.اگر شما در بخش فرانت وب سایت کار می کنید پس زمان خود را با html  و css سپری می کنید و این کار به دلیل تکراری بودن کدها خسته کننده است، همینطور زمان زیادی را باید صرف کنید و پشت هم کد های تکراری وارد کنید که خوشبختانه افزونه Emmet به کمک شما آمده و کار کدنویسی را برایتان آسان و سریع کرده است.

 

آموزش html css


برای درک بهتر این موضوع به مثال زیر توجه کنید:

div>dl>(dt+dd)*3)+footer>p

خط بالا را اگر در سند html کپی کنید و دکمه تب را بزنید و کدهای زیر نمایش داده می شود:

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

ممکن است در نگاه اول این کدها عجیب به نظر برسد، اما  با تمرین و تکرار به این کدها مسلط  می شوید و از کار کردن با آن لذت میبرید.

نحوه نصب  Emmet چگونه است؟


برای نصب  Emmet  می توانید به وب سایت Emmet بروید و آن را دانلود کنید و اگر از ادیتور خاصی استفاده می کنید می توانید از راهنمایی زیر استفاده کنید:

  •  نصب Emmet برای ادیتور VSCode 
  •   نصب Emmet برای ادیتور PHPStorm
  •    نصب Emmet برای ادیتور Atom
  •    نصب Emmet برای ادیتور Sublime Text
  •    نصب Emmet برای ادیتور Brackets

آشنایی با المان های افزونه Emmet

  • علامت نقطه .
  • علامت #
  • علامت براکت {}
  • علامت  ><
  • علامت +
  • علامت ^
  • علامت ()
  • علامت $
  •  علامت []


علامت نقطه .


یکی از پرکاربردترین المان های افزونه Emmet نقطه می باشد که یک کلاس می سازد برای درک بهتر به مثال زیر توجه کنید:
کلمه زیر را تایپ کنید:

ul.li

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

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

نتیجه گیری:

در این مقاله بررسی کردیم که افزونه Emmet چیست و چه کاربردی دارد برای درک بهتر و یادگیری بیشتر این موضوع می توانید به بخش مستندات Emmet بروید.
امیدارم از این مقاله نهایت استفاده را برده باشید و توانسته باشید از این ابزار در کدنویسی های خود استفاده کنید اگر مطلب بیشتری درمورد Emmet می دانید با ما در بخش نظرات درمیان بگذارید همچنین میتوانید سوالات خود را در این خصوص از ما بپرسید.

مقالات مرتبط

تفاوت dp و px در برنامه نویسی اندروید

واحد های اندازه گیری اندروید
زهرا چگینی
10

به نظر شما تفاوت dp و px در برنامه نویسی اندروید، این دو واحد اندازه گیری چیست؟ پس ما را همراهی کنید.

delegate چیست؟

Delegate ها چرا به زبان سی شارپ اضافه شدند؟
مرضیه فتاحی
15

delegate چیست؟ چه کاربردی دارد؟ چگونه و در چه موقعیت هایی باید ازآنها استفاده کرد؟ با ما همراه شوید تا تمامی این سوال ها دریابید.

اکشن (Action) در سی شارپ، راهی برای خواناتر شدن کدها

موارد استفاده ی Action در سی شارپ
زهرا چگینی
10

Action در سی شارپ از پایه و اساس Delegate ها استفاده میکند، درحقیقت همان Delegate های هستند که کار را برای ما راحت تر میکنند.

Extension method درسی شارپ، راهی برای کارایی بالا در کدها

اکستنشن (extension) درسی شارپ
مرضیه فتاحی
10

هدف ما دانستن نکات مهمextension method در سی شارپ، نحوه استفاده و همچنین کاربرد آن در کدنویسی است. پس با ما همراه شوید.

لیست کامل تگ های html که هیچ کس به شما نخواهد گفت

آشنایی با تگ های html
زهرا چگینی
15

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

ویژگی های جدید asp.net core که حیرت برنامه نویسان را برانگیخت

معرفی ویژگی های جدید asp.net core از مایکروسافت
مرضیه فتاحی
10

ویژگی های جدید asp.net core چیست؟ مایکروسافت در این نسخه چه امکاناتی را برای برنامه نویسانش قرار داده است. اگر شما هم خواهان دانستن این مطالب هستید، ما را همراهی کنید.