آموزش Emmet - کدنویسی بسیار سریع HTML

کدنویسی HTML

اگر برنامه نویس هستید (مخصوصا برنامه نویس front-end) حتما تجربه کرده اید که نوشتن کدهای HTML واقعا خسته کننده است. خسته کننده بودن کدنویسی در زبان HTML دلایل مختلفی دارد که مهم ترین آن ها عبارت اند از:

• زبان HTML بسیار آسان است بنابراین کدنویسی در آن شبیه تکرار مکررات و اضافه کاری است؛ اگر کاری اصلا چالشی نباشد، بسیار خسته کننده می شود. یک مثال واضح آن استفاده از کدهای تقلب در بازی های کامپیوتری است؛ زمانی که در یک بازی کامپیوتری از کدهای تقلب استفاده کنید و به قدرت مطلق بازی تبدیل شوید، برایتان هیجان انگیز است اما پس از چند روز از بازی خسته می شوید.
• قسمت های دیگر وب سایت از زبان هایی مانند جاوا اسکریپت استفاده می کنند که بسیار هیجان انگیزتر از HTML است؛ به همین خاطر در طول مدت کدنویسی به زبان HTML دائما به فکر کدهای دیگر هستیم.
• به دلیل تکراری بودن کدها، از یک برنامه نویس تبدیل به یک تایپیست می شوید که فقط در حال تایپ کلمات است و وقت خود را هدر می دهد.

بگذارید یک مثال برایتان بزنم. تصور کنید می خواهیم یک لیست HTML بسازیم. در این حالت برای ایجاد یک لیست ساده باید کدهای زیر را نوشت:

<h2 class="title">My items</h2>
<ul class="list">
  <li class="item item--1">Item 1</li>
  <li class="item item--2">Item 2</li>
  <li class="item item--3">Item 3</li>
  <li class="item item--4">Item 4</li>
</ul>

که خروجی اش چنین چیزی می‌شود:

• Item 1
• Item 2
• Item 3
• Item 4

چرا وقت خود را صرف تایپ کردن کنیم در حالی که این وقت با ارزش باید صرف حل مسئله و طرح کلی شود؟

معرفی Emmet

خوشبختانه برنامه نویسان و محققان دیگری نیز به این مسئله پی برده بودند. به همین دلیل گروهی سعی کردند این مشکل را بر طرف کنند و راه حل شان افزونه ی  Emmet شد! این افزونه شاهکاری برای برنامه نویسان HTML محسوب می شود و شما حتما باید با آن آشنایی داشته باشید. آیا می‌خواهید بدانید Emmet چقدر کار شما را راحت تر می کند؟ می توانید مثال بالا را در یک خط بنویسید!

h2.title{My items}+ul.list>li.item.item--${Item $}*4

پس از نوشتن این کد کلید Tab کیبورد را بزنید و این کدها تبدیل به کدهای مثال اول می شوند! شاید با خودتان بگویید این کد دیگر چه کد عجیب و غریبی است!؟ با 10 دقیقه وقت گذاشتن و خواندن این مقاله شما هم می توانید کدهایتان را به سادگی هرچه تمام تر بنویسید و این کد برایتان عادی خواهد شد.

برای نصب این افزونه روی ادیتورهای مختلف به لینک های زیر مراجعه کنید:

• نصب Emmet برای ادیتور VSCode => (به صورت پیش فرض در نرم افزار موجود است)
• نصب Emmet برای ادیتور PHPStorm => (به صورت پیش فرض در نرم افزار موجود است)
• نصب Emmet برای ادیتور Atom
• نصب Emmet برای ادیتور Sublime Text
• نصب Emmet برای ادیتور Brackets

نکته‌ی مهم: افزونه ی Emmet در برخی از ادیتورها به صورت پیش فرض فعال است. این شرکت ها ممکن است دستورات Emmet را کمی تغییر دهند اما ما در این مقاله دستورات اصلی و خالص Emmet را بررسی می کنیم. برای اطمینان بیشتر در مورد نحوه ی استفاده از دستورات Emmet در ادیتور خود، جستجوی اینترنتی انجام دهید. به طور مثال برای ادیتور PHPStorm به این صفحه مراجعه کنید. یکی از محدودیت های PHPStorm این است که تنها زمانی از کدهای Emmet خروجی می گیرد که حجمشان کمتر از 15 کیلوبایت باشد.

علامت نقطه

علامت نقطه، کلاس می‌سازد. شاید بتوان گفت علامت نقطه پرکاربردترین علامت بین علامت های افزونه ی Emmet است. بنابراین اگر کد ul.list را بنویسیم یعنی یک عنصر <ul> با کلاس list ایجاد کن! بنابراین این:

ul.list

می شود:

<ul class="list"></ul>

از این به بعد دستور Emmet را در خط اول کدها و نتیجه ی آن را در خط دوم می‌نویسم تا یکجا و مرتب باشند.

البته شما به یک کلاس محدود نیستید و می توانید از چندین کلاس استفاده کنید:

h1.heading.heading--primary

<h1 class="heading heading--primary"></h1>

علامت #

علامت # (هشتگ - هش - number sign و ... نام های مختلف این علامت هستند) در افزونه ی Emmet برای ما id می سازد. بنابراین:

#app>.container

<div id="app"><div class="container"></div></div>

علامت براکت

زمانی از علامت براکت {} استفاده می کنیم که بخواهیم علاوه بر ساختن تگ، محتوای داخل تگ را نیز مشخص کنیم. به مثال های زیر نگاهی بیندازید:

h2{What do I like ?}
<h2>What do I like ?</h2>

و همینطور:

p.text>{Emmet is really }em{Cool}
<p class="text">Emmet is really <em>Cool</em></p>

توضیح این مثال اینطور است که ابتدا p.text یک عنصر <p> با کلاس سپس محتوای این تگ را به همراه {em{Cool به آن اضافه کرده ایم. خودِ {em{Cool یعنی تگ <em> که محتوای آن cool باشد. اگر دقت کنید بعد از p.text یک علامت < داریم؛ آیا می دانید این علامت چیست؟

علامت <

علامت < برای ایجاد عناصر تو در تو (nested) استفاده می شوند، یعنی عنصری داخل عنصری دیگر باشد. به مثال های زیر توجه کنید:

ul>li

<ul>
  <li></li>
</ul>

و همینطور:

.container>.card>h1.card__title

<div class="container">
  <div class="card"><h1 class="card__title"></h1></div>
</div>

علامت +

علامت + به جای اینکه عناصر را به صورت تو در تو ایجاد کند، آن ها را به عنوان خواهر و برادر (تگ های sibling) ایجاد می کند:

header+nav+main+aside+footer

<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

آیا متوجه تفاوت علامت + و < شدید؟ تگ های خواهر و برادر، در کنار هم هستند و هر دو یک سطح را گرفته اند اما تگ های تو در تو داخل هم قرار دارند و یکی دربرگیرنده ی دیگری است.

علامت ^

این علامت کمتر استفاده می شود. کار این علامت برگشتن به سطح قبلی در تگ های تو در تو است. به مثال زیر توجه کنید:

header>p>span^^footer

<header>
  <p><span></span></p>
</header>
<footer></footer>

به دستور Emmet (خط اول) در کد بالا نگاه کنید؛ قسمت ابتدایی آن می گوید header>p>span بنابراین تا تگ <span> وارد شده ایم. حالا اگر بخواهیم برای تگ بعدی به عقب برگردیم باید از ^ استفاده کنیم. چرا دو بار؟ از آن جا که در مثال بالا تگ span داخل تگ p و تگ p داخل تگ header قرار دارد، برای اضافه کردن یک تگ که با header برادر باشد باید 2 مرحله به عقب برگردیم بنابراین 2 بار از علامت ^ استفاده کرده ایم.

دسته بندی تگ ها با ()

شاید برای خیلی از شما خواندن کدهای Emmet در بعضی موارد سخت شود. اگر کدهای Emmet شما طولانی شد و نیاز به دستی بندی تگ هایتان داشتید می توانید از علامت پرانتز استفاده کنید. مثال:

(header>p>span)+footer

<header>
  <p><span></span></p>
</header>
<footer></footer>

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

(.card>h1.card__title+h3.card__subtitle+button{Click here})*3

<div class="card">
  <h1 class="card__title"></h1>
  <h3 class="card__subtitle"></h3>
  <button>Click here</button>
</div>
<div class="card">
  <h1 class="card__title"></h1>
  <h3 class="card__subtitle"></h3>
  <button>Click here</button>
</div>
<div class="card">
  <h1 class="card__title"></h1>
  <h3 class="card__subtitle"></h3>
  <button>Click here</button>
</div>

علامت $

این قابلیت می تواند در هر کجا که بخواهید عدد اضافه کند. به طور مثال اگر چند عنصر داشته باشیم و بخواهیم به آن ها کلاس های page-1 تا page-4 را بدهیم می گوییم:

.page-$*4

<div class="page-1"></div>
<div class="page-2"></div>
<div class="page-3"></div>
<div class="page-4"></div>

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

ul>li.item-$@3*3

<ul>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="item-5"></li>
</ul>

علامت آکولاد

علامت آکولاد [] زمانی استفاده می شود که شما بخواهید از attribute خاصی استفاده کنید:

input[type=number]

<input type="number" />

اگر بخواهید بیشتر از یک attribute به تگ خود اضافه کنید باید بین attribute های مختلف فاصله قرار دهید:

img[src=logo.png alt=logo]

<img src="logo.png" alt="logo" />

کد های پر کاربرد

بهتر است همیشه کدهای Emmet زیر را به خاطر داشته باشید:

// برای ایجاد یک سند اچ تی ام ال
html:5

<!DOCTYPE html>
<html lang="”en”">
  <head>
    <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width,
    initial scale=1.0"> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
  </head>
  <body></body>
</html>

lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, odit
laboriosam enim illum et vero esse blanditiis libero perspiciatis numquam,
voluptatum debitis, tempora veniam ipsam maxime atque est sequi dolore!



// برای متصل کردن صفحه ی استایل ها به سند اصلی

link:css

<link rel="stylesheet" href="style.css" />



// برای متصل کردن کد های جاوا اسکریپت به سند اصلی

script:src

<script src=""></script>

وقت امتحان است!

کدهای HTML زیر را بررسی کرده و سعی کنید کد Emmet آن ها را بدون نگاه کردن به جواب، به دست آورید.

تست اول:

<div class="container"><p>Hello world!</p></div>

تست دوم:

<ul>
  <li class="item item--1">Item 1</li>
  <li class="item item--2">Item 2</li>
  <li class="item item--3">Item 3</li>
</ul>

تست سوم:

<header class="header">
  <img src="logo.png" alt="logo" class="header__logo" />
  <h1 class="heading">Title</h1>
</header>

تست چهارم:

<section>
  <h2 class=”heading-2"></h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe
    accusamus totam enim harum deserunt laborum voluptates
    voluptatem sint possimus blanditiis commodi aliquam fuga dolorum
    quae similique qui, suscipit, ad vitae.
  </p>
</section>
<aside>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Recusandae minima, assumenda quibusdam reiciendis blanditiis
  praesentium molestiae omnis fuga atque impedit, perferendis
  quisquam. Dolores aliquam minima labore! Deserunt inventore
  aperiam totam.
</aside>

تست پنجم:

<!DOCTYPE html>
<html lang="”en”">
  <head>
    <meta charset=”UTF-8"> <meta name=”viewport” content=”width=device-width,
    initial scale=1.0"> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
  </head>
  <body>
    <header></header>
    <main>
      <div class="”feature”"><h1 class="”feature__title”">Feature 1</h1></div>
      <div class="”feature”"><h1 class="”feature__title”">Feature 2</h1></div>
      <div class="”feature”"><h1 class="”feature__title”">Feature 3</h1></div>
    </main>
  </body>
</html>

پاسخ سوالات به این شرح هستند:

:پاسخ تست اول

.container>p{Hello World}

:پاسخ تست دوم

ul>li.item.item--${Item $}*3

پاسخ تست سوم:

header.header>img[src=logo.png alt=logo].header__logo+h1.heading{Title}

پاسخ تست چهارم:

section>h2.heading-2+p>lorem^^aside>lorem

یا می توان گفت:

(section>h2.heading-2+p>lorem)+aside>lorem

پاسخ تست پنجم: