31
تشکر

کدنویسی سریع, سلام Emmet

Emmet

Emmet

در گذشته بسیاری از توسعه دهندگان وب از روش Zen برای کدنویسی سریع تر استفاده میکردند. اما در حال حاظر Emmet آمده است تا کارها را خیلی ساده تر از قبل کند.

Emmet در واقع یک پلاگین است که بر روی بیشتر ادیتور های تحت وب نصب میشود و باعث میشود که کد نویسی شما سریع تر شود.

برای مثال شما برای ایجاد یک سند HTML باید حداقل 10 خط کد را بنویسید اما با استفاده از Emmet با نوشتن html:5 و زدن دکمه Tab این خطوط به سرعت برای شما نوشته میشود. اما همه چیز در این تمام نمیشود. با ما همراه باشید.

اختصارات HTML

دیگر نوشتن یک سند HTML چند ثانیه بیشتر طول نمیکشد. فقط کافی است ! یا html:5 را تایپ کنید و دکمه Tab را بزنید. خواهید دید که کدها به راحتی نوشته میشوند.

Emmet

Emmet

html:5  یا !   => برای ایجاد سند HTML5

html:xt    => برای ایجاد یک سند XHTML

html:4s    => برای ایجاد سند HTML4

در Emmet میتوانید به راحتی کلاس ها, آی دی ها, خصوصیت ها و غیره را به سرعت وارد کنید. برای مثال با نوشتن p.foo#bar و زدن کلید Tab کد زیر ظاهر میشود.

<p class=”foo” id=”bar></p>
Emmet

Emmet

در مورد خصوصیات هم به همین نحو است. همچنین اگر بخواهیم درون تگ مورد نظر متنی قرار دهیم کافی است آن را درون {} قرار دهیم. مانند عکس زیر:

Emmet

Emmet

تگ های تودرتو

با نوشتن کد h1+h2 و زدن دکمه Tab کد زیر چاپ میشود. دقیقا مانند انتخابگرهای CSS

<h1></h1>
<h2></h2>

و یا با نوشتن کد h1>h2 کد زیر ظاهر میشود (Tab فراموش نشود).

<h1><h2></h2></h1>

و یا با نوشتن کد h1>h2^p کد زیر ظاهر میشود.

<h1><h2></h2></h1>
<p></p>
Emmet

Emmet

Emmet پا را فراتر گذاشته است. امکان گروه بندی را هم اضافه کرده است. برای مثال با نوشتن کد
(.foo>h1)+(.bar>h2)
کد زیر ظاهر میشود.

<div class="foo">
    <h1></h1> 
</div>
<div class="bar"> 
    <h2></h2> 
</div>
Emmet

Emmet

 

اگر کمی در کد بالا دقت کرده باشید میبینید که با نوشتن کد .foo یک دایو با کلاس foo ظاهر میشود. یعنی همیشه یک دایو ظاهر میشود. اما Emmet هوشمند است. اگر داخل یک تگ ul همین .foo را بنویسید یک تگ li با کلاس foo ظاهر میشود.

Emmet

Emmet

 

این هوشمند سازی برای تگ li درون ul و ol, تگ tr درون table, tbody, thead و tfoot, تگ td درون tr و تگ option درون select و optgroup انجام شده است. در بیرون این تگ ها همان div ظاهر میشود.

ضرب

با نوشتن ul>li*3 یک تگ ul با سه فرزند li ظاهر میشود.

Emmet

Emmet

اضافه کردن $ میتوان اعداد را به صورت خودکار و افزایشی ایجاد کرد. مانند عکس زیر:

Emmet

Emmet

اختصارات CSS

با نوشتن h10+m5 کد زیر ظاهر میشود.

height: 10px;
margin: 5px;

و با نوشتن h10p+m5e کد زیر ظاهر میشود.

height: 10%;
margin: 5em;
Emmet

Emmet

در صورت ننوشتن هیچ چیزی بعد از عدد, px به صورت پیشفرض قرار میگیرید. اما در صورت نوشتن کلمات زیر جایگزین مناسب ظاهر میشود.

p    => %

e    =>  em

x    => ex

پیشوندها

پیشوندهایی مانند webkit و moz و بقیه مرورگرها را نیز به راحتی میتوان وارد کرد. مانند عکس زیر:

Emmet

Emmet

Emmet هنوز تمام نشده است. با مراجعه به documentation این سایت میتوانید تمام ویژگی های این پلاگین را ببینید.

ادیتور های پشتیبانی شونده

نترسید بیشتر ادیتورها پشتیبانی میشوند(حداقل متن باز ها). ادیتور های پشتیبانی شونده را در زیر لیست کرده ایم برای دانلود پلاگین مورد نظر برای هر ادیتور روی آن کلیک کنید.

 

نظر شما در مورد Emmet چیست؟ آیا کار واقعا آسوده تر نشده است؟

  • دانیال می‌گه:

    من دیده بودم که col-md-5 رو می نوشتن کل دایو نمایش داده می شد.نمی دونم اون چطوری انجام میشه.
    ایا امکان گسترش دادن آن وجود دارد؟

  • parinaz می‌گه:

    واسه DW هم هست پلاگین emmet

  • ghazale می‌گه:

    من مک دارم
    چه جوری میتونم برای sublime ،امت نصب کنم

  • علی می‌گه:

    خیلی جالبه ولی من هنوزم نفهمیدم این emmet چطوری نصب میشه؟؟؟!!!!!!!
    اگه یکی راهنماییم کنه خیلی ممنون میشم

    • محسن شفیعی می‌گه:

      در انتهای مطلب لیست ادیتورهای پشتیبانی شده گذاشته شده.
      اگر ادیتوری که شما استفاده میکنید داخل این لیست هست، فقط روش کلیک کنید، در صفحه مربوطه نحوه نصب توضیح داده شده.

  • حسین می‌گه:

    kash vase DW ham dasht 😀

  • سلام می‌گه:

    این پلاگین فوق العاده هست ممنون


  • نظرات این مطلب بسته است.