اكتب HTML و CSS أسرع باستخدام اختصارات Emmet

كتب بواسطة idriss douiri profile picture إدريس الدويري

حدث بتاريخ

4 min read

#plugins #tools #vscode
اكتب كود أسرع باستخدام Emmet
مشاركة

Emmet هو إضافة مليئة بالاختصارات والأوامر التي يمكنك استخدامها لتسريع عملية الترميز للويب، وهو مدعوم من قبل معظم محررات الأكواد الشهيرة مثل Visual Studio Code الذي يحتوي عليه مدمجًا، و Sublime Text، و WebStorm، و Atom، والمزيد. [تحقق من القائمة الكاملة هنا]

اختصارات HTML و XML

Syntax Emmet يشبه كتابة محددات CSS مع ميزات إضافية، لذا أنت بالفعل تعرف كيفية استخدامها في معظم الحالات.

HTML Boilerplate

قم بتوسيع علامة التعجب (!) لتوليد مستند HTML5 فارغ كما في المثال التالي (بتوسيع أقصد الضغط على tab أو Enter بعد كتابة الإختصار):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

العناصر

استخدم أسماء العناصر مثل p أو a لتوليد علامات HTML، على سبيل المثال، div سيتوسع إلى

السمات

استخدم CSS class و ID مثل المحددات لتوليد العلامات مع تلك السمات،

section#hero.bg-black.text-white

سيتوسع إلى:

<section id="hero" class="bg-black text-white"></section>

يمكنك أيضًا استخدام تدوين [attr] للسمات المخصصة

img[title="cat"]

سيولد:

<img src="" alt="" title="cat" />

التعشيش استخدم رمز الطفل > لتعشيش العناصر داخل بعضها البعض، على سبيل المثال ul>li سيتوسع إلى

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

سيضيف عامل الإخوة + العناصر على نفس المستوى، مثلًا header+main سيتوسع إلى

<header></header>
<main></main>

استخدم واحدًا أو أكثر من عوامل الصعود ^ لإضافة العناصر إلى أعلى الشجرة، مثلًا header>nav^main سيتوسع إلى

<header><nav></nav></header>
<main></main>

النص استخدم الأقواس المعقوفة لإضافة نص، مثلًا a{learn more} سيتوسع إلى

<a href="">learn more</a>

التكرار باستخدام عامل التكرار * يمكنك تكرار العناصر بقدر ما تريد، مثلًا ul>li*3 سيتوسع إلى

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

يمكنك أيضًا استخدام عامل التجميع () لتعريف الأشجار الفرعية، مثلًا dl>(dt+dd)*2 سيتوسع إلى

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

العد

استخدم رمز الدولار $ لطباعة رقم التكرار الحالي، مثلًا ul>li#item-${item $$}*3 سيتوسع إلى

<ul>
  <li id="item-1">item 01</li>
  <li id="item-2">item 02</li>
  <li id="item-3">item 03</li>
</ul>

لاحظ أنه كلما أضفت المزيد من رموز $ سيُضاف صفر قبل الرقم.

يمكنك أيضًا تغيير الاتجاه والقيمة البدئية للترقيم باستخدام معدل @Number، حيث الأرقام الموجبة تبدأ من العنصر الأول والأرقام السالبة تبدأ من آخر عنصر.

ul>li{item $@-4}*3

سيتوسع إلى

<ul>
  <li>item 6</li>
  <li>item 5</li>
  <li>item 4</li>
</ul>

نص “لوريم إيبسوم”

يمكنك توليد نص “لوريم إيبسوم” للتأكد من كيف سيبدو القالب الخاص بك مع البيانات الحقيقية.

فقط قم بتوسيع lorem للحصول على 30 كلمة من لوريم إيبسوم

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis
exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit option
amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates
voluptas?

أو يمكنك تحديد عدد الكلمات التي تريد توليدها بشكل صريح، مثلًا lorem70 سيتولد 70 كلمة.

أسماء العلامات الضمنية

في بعض الأحيان يمكنك تخطي كتابة اسم العلامة. يقوم Emmet بالنظر إلى العلامة الأب ويولد العلامة الصحيحة ضمنيًا، على سبيل المثال ul>.item سيتوسع إلى

<ul>
  <li class="item"></li>
</ul>

اختصارات CSS

يستخدم Emmet البحث الضبابي (Fuzzy Search)، مما يعني أنه يمكنك كتابة بعض الحروف من الخاصية وسيحاول Emmet العثور على الأقرب، مما يسهل تذكر الاختصارات.

الخصائص

بدلاً من كتابة grid-template-columns، اكتب أول حروف كل كلمة مثل gtc وستحصل على:

grid-template-columns: repeat();

قيم الوحدات

يمكنك كتابة m لخاصية الهامش، وإذا أردت إعطاءها قيمة فقط أضفها، على سبيل المثال m10 سيتولد margin: 10px;، وفي هذه الحالة، الوحدة هي px لأن Emmet يعامل القيم الصحيحة على أنها px والأرقام العشرية مثل 1.5 كوحدة em.

يمكنك اختيار الوحدة المناسبة لك بشكل صريح بعد الرقم، مثلًا w100% سيتولد width: 100%;، أو يمكنك استخدام اختصارات محددة لبعض الوحدات مثل:

  • p ⇐ %.
  • e ⇐ em.
  • r ⇐ rem.
  • c ⇐ ch.
  • x ⇐ ex.

مثلًا h80p سيتولد height: 80%

قيم اللون بالـ Hex

بالنسبة للألوان، يمكنك استخدام علامة الـ hash بعد الخاصية مع كود اللون، على سبيل المثال:

  • c#0 ⇐ color: #000;
  • c#f3 ⇐ color: #f3f3f3;

المعدل !important

أضف ! لاختصارك لتحصل على !important: مثلًا w10r! ⇒ width: 10rem !important;

@القواعد

يمكنك استخدام Emmet لتوليد بعض مقتطفات الـ CSS @rules مثل:

@i سيتولد @import url();

@f سيتولد

@font-face {
  font-family: ;
  src: url();
}

@k سيتولد

@keyframes identifier {
}

@m سيتولد

@media screen {
}

إجراءات Emmet

إذا كنت تستخدم Visual Studio Code، يمكنك مشاهدة جميع إجراءات Emmet من خلال الضغط على Ctrl+Shift+p لفتح لوحة الأوامر وكتابة >emmet:

قائمة إجراءات emmet من محرر vs code

اختر الإجراء الذي تريده واضغط Enter لاستخدامه. أو يمكنك النقر على أيقونة الإعدادات بجانب الإجراء لإعطائه اختصار لوحة مفاتيح، كما فعلت مع “Wrap with Abbreviation” الظاهر في الصورة أعلاه.

لأولئك الذين لا يستخدمون Visual Studio Code تفحصوا قائمة الإجراءات من هنا.