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

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

Emmet چیست؟

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

 

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

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 می دانید با ما در بخش نظرات درمیان بگذارید همچنین میتوانید سوالات خود را در این خصوص از ما بپرسید.