Emmet چیست تاریخ بروزرسانی : 12 خرداد 1400 | تعداد بازدید : 68 | زمان خواندن مقاله : 10 دقیقه

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

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

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

 

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

 


توضیحاتی در مورد نویسنده این مقاله :
زهرا چگینی زهرا چگینی

کارشناس علوم کامپیوتر گرایش نرم افزار...متخصص تولید محتوا... من مثل یک نابغه فکر می کنم..مثل نویسنده ای ممتاز می نویسم و مثل کودکی سخن می گویم

نظرات


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

برای پاسخ باید وارد شوید

پشتیبانی 1
پشتیبانی 1

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

رئوف مشرفی
مرادی چه مقاله جالبی بود اصلا فکرشو نمیکردم همچین ابزاری هم باشه مخصوصا قسمت هایی که یه کلمه رو نوشتین بعدش اون همه کد اضافه شده ممنون بابت مقاله های خوبتون

برای پاسخ باید وارد شوید

پشتیبانی 1
پشتیبانی 1

خوشحالیم که مطلب مورد پسند شما واقع شده چراکه هر روزه ابزارها و تکنولوژی های بی شماری در کدنویسی برای راحت تر کردن کار برنامه نویسان اضافه میشود


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.