8 نکته درباره Emmet که شاید نمی‌دانستید

Emmet (که برای مدتی با نام Zen Coding شناخته می‌شد) یک ابزار ویرایشگر کد بسیار کاربری است که قطعه کد‌ها و میان‌بر‌هایی برای HTML و حتی CSS را به ارمغان می‌آورد.

با یادگیری بیشتر در زمینه سینتکس Emmet، از هدر رفتن زمان بیشتری در جریان کاری روزانه خود جلوگیری کنید. همچنین به یاد داشته باشید تمام این مثال‌ها، بر روی فایل‌های HTML ساده خواهند بود، اما همچنین می‌توانید Emmet را به گونه‌ای پیکربندی کنید که برای React/JSX، الگوهای Angular، الگوهای Vue و... نیز استفاده شود.

برای نمایش مثالی سریع از زمینه اصلی استفاده Emmet، یک کد خلاصه شده را به یک HTML کامل گسترش می‌دهیم.

ما کد زیر را نوشته، و کلید tab را می‌فشاریم تا آن را گسترش دهیم:

section.hero.is-info>.hero-body>.container>h1.title{Hello!}

کد بالا، به این کد تبدیل خواهد شد:

<section class="hero is-info">

  <div class="hero-body">

    <div class="container">

      <h1 class="title">Hello!</h1>

    </div>

  </div>

</section>

Emmet معمولا به طور پیشفرض بر روی اکثر ویرایشگر‌ها مانند Sublime Text، VS Code و WebStorm نصب شده است.

بیایید به برخی ویژگی‌های کمتر شناخته شده Emmet وارد شویم؛ و قبل از این که به آن برسیم، کمی اطلاعات درباره تنظیمات من داشته باشید:

• فونت: Dank Mono
• ابزار ویرایشگر: VS Code
• تم: Monokai Pro

جدول محتویات:

1. Grouping و Sibling
2. بالا رفتن
3. شماره گذاری
4. گسترش تگ‌های HTML
5. صفات
6. جمع‌بندی اختصار
7. متعادل کردن تگ‌ها
8. CSS
9. نتیجه گیری

Grouping و Sibling:

با استفاده از ()، می‌توانیم کدها را با هم group کنیم. این کار، به همراه عملگر + نیز به خوبی کار می‌کند.

فرض کنید که می‌خواهیم دو div را در کنار هم قرار دهیم، که هر کدام زیر مجموعه‌های خود را دارند. دقت کنید که از کلاس‌های Bulma CSS استفاده می‌کنیم.

.columns>(.column>.box>h2{I am a box})+(.column>.box>h3{I am another box})

این کد، به کد زیر گسترش داده می‌شود:

<div class="columns">

  <div class="column">

    <div class="box">

      <h2>I am a box</h2>

    </div>

  </div>

  <div class="column">

    <div class="box">

      <h3>I am another box</h3>

    </div>

  </div>

</div>

بالا رفتن (Climbing Up):

یکی از تکنیک‌های که Emmet می‌تواند پیاده کند، استفاده از «^» برای بازگشت به بالای شاخه است. من پی بردم که استفاده بیشتر از group کردن،‌ باعث می‌شود نیازی به برگشتن به بالای شاخه نداشته باشید. این کار در برخی سناریوها کاربردی است، پس دانستن آن خوب است.

در زیر، روش دیگری برای رسیدن به این هدف با استفاده از Climbing Up را می‌بینید:

.columns>.column>.box>h2{Box}^^.column>.box>h3{Box}

<div class="columns">

  <div class="column">

    <div class="box">

      <h2>Box</h2>

    </div>

  </div>

  <div class="column">

    <div class="box">

      <h3>Box</h3>

    </div>

  </div>

</div>

من به شخصه روش grouping را ترجیح می‌دهم.

شماره گذاری:

معمولا وقتی که در حل ساخت یک نمونه HTML هستیم، استفاده از شماره گذاری برای تمایز میان بخش‌ها مفید است. (بخش ۱، بخش ۲ و...)

همچنین Emmet می‌تواند با استفاده از «$»، در شماره گذاری به ما کمک کند:

p>strong{I am level $ strong!!!!}*10

<p>

  <strong>I am level 1 strong!!!!</strong>

  <strong>I am level 2 strong!!!!</strong>

  <strong>I am level 3 strong!!!!</strong>

  <strong>I am level 4 strong!!!!</strong>

  <strong>I am level 5 strong!!!!</strong>

  <strong>I am level 6 strong!!!!</strong>

  <strong>I am level 7 strong!!!!</strong>

  <strong>I am level 8 strong!!!!</strong>

  <strong>I am level 9 strong!!!!</strong>

  <strong>I am level 10 strong!!!!</strong>

</p>

گسترش تگ‌های HTML:

این موردی است که واقعا باید بیشتر در جریانات کاری خود استفاده کنیم؛ زیرا تایپ کردن‌های خسته کننده را از برخی تگ‌های HTML دور می‌کند.

از آنجایی که تعداد زیادی از آن‌ها وجود دارد، آن‌ها را در یک لیست قرار می‌دهم:

• ! : صفحه HTML کامل
• a : <a href=””></a>
• base : <base href=”” />
• link:css : <link rel=”stylesheet” href=”style.css” />
• script:src : <script src=””></script>
• input:text : <input type=”text” name=”” id=”” />
• input:t : <input type=”text” name=”” id=”” />

صفات:

می‌توانیم با استفاده از «[ ]» به HTML خود صفاتی را اضافه کنیم. مثلا:

input[type=email].my-input

تبدیل به کد زیر می‌شود:

<input type="email" class="my-input">

در زیر، یک مورد جالب استفاده از صفات داده و شماره گذاری را می‌بینید:

div[data-item=$]*10

<div data-item="1"></div>

<div data-item="2"></div>

<div data-item="3"></div>

<div data-item="4"></div>

<div data-item="5"></div>

<div data-item="6"></div>

<div data-item="7"></div>

<div data-item="8"></div>

<div data-item="9"></div>

<div data-item="10"></div>

جمع‌بندی اختصار:

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

هر کدی که می‌خواهید را انتخاب کرده، و آن را با تگ‌های دلخواه خود احاطه کنید. این مورد کمی کار بیشتری نیاز دارد و باید Command Palette خود را باز کنید. (cmd + shift + p)

دستور العمل مربوط به VS Code به این صورت است:

1. نشانگر موس خود را بر روی تگ مورد نظر قرار دهید.
2. Command Palette خود را با استفاده از کلیدهای ctrl/cmd + shift + p باز کنید.
3. Emet: Wrap with Abbreviation را پیدا کنید.
4. اختصار Emmet خود را که تگ فعلی را مختصر می‌کند، تایپ کنید.

این مورد می‌تواند بسیار کاربردی باشد!

متعادل کردن تگ‌ها:

این مورد نیز بسیار هوشمندانه است. تا به حال پیش آمده است که محل باز شدن یک تگ را ببینید و ندانید که در کجا بسته شده است؟ آیا تا به حال پیش آمده است که بخواهید محتویات داخل یک تگ را انتخاب کنید؟ متعادل کردن تگ‌ها، راه حل شماست.

1. نشانگر موس خود را داخل تگی که می‌خواهید، قرار دهید.
2. Command Palette خود را با استفاده از کلیدهای ctrl/cmd + shift + p باز کنید.
3. Emmet: Balanse (Outward) را انتخاب کنید.
4. چند بار این کار را انجام دهید.

CSS:

جدا از فایل‌های markup، می‌توانید از Emmet برای CSS نیز استفاده کنید. برای مواردی که نیازمند مقدار زیادی تایپ هستند، بسیار کاربردی است. در اینجا، برخی موارد پرکاربرد را به شما نشان خواهم داد:

• pos : position: relative;
• d : display: block;
• m : margin: ;
• mt : margin-top: ;
• mb : margin-bottom: ;
• pw : padding-top: ;
• pb : padding-bottom: ;
• bg : background: #000;
• ! : !important
• @m : @media screen {}
• c : color: #000;
• op : opacity: ;

نتیجه گیری:

امیدوارم که تکنیک‌های بیشتری از Emmet را یاد گرفته باشید. من به شخصه مطمئنم که صرف زمان برای یادگیری آن، کاملا ارزشش را دارد.

منبع