Emmet: توسيع الاختصار — مفتاح Tab الذ�� يجلب كودك إلى الحياة

خلال أول 13 درسًا تعلمت كتابة اختصارات مثل ul>li*3، لكن كل شيء يجلس هناك في المحرر منتظرًا — لم "يتوسع" أي شيء فعليًا بعد. يعلمك هذا الدرس أول إجراء أساسي في Emmet: توسيع الاختصار — الإجراء المفتاحي الذي يحول الاختصارات إلى HTML/CSS حقيقي. مفتاح Tab هو روح هذا الإجراء. أتقنه، ويتحول اختصارك المكون من سطر واحد إلى كود كامل في لحظة.

1. ما ستتعلمه

• التعريف الأساسي لتوسيع الاختصار: تحويل الاختصارات الشبيهة بـ CSS إلى كود HTML/XML/CSS كامل
• طرق التشغيل: مفتاح Tab (افتراضي) + مشغلات بديلة مثل Ctrl+E
• مقارنة مفاتيح التشغيل عبر 4 محررات رئيسية (VSCode/WebStorm/Sublime/Atom)
• متى لا يعمل: 4 سيناريوهات شائعة (ملفات نص عادي، داخل التعليقات، JSX، إلخ)
• ربط مفاتيح مخصص: إعادة التعيين إلى أي اختصار عبر keybindings.json في VSCode

2. قصة حقيقية لمطور واجهة أمامية

(1) نقطة الألم: تكتب اختصارًا، تضغط Tab... ولا يحدث شيء

أنهت أليس للتو تعلم صيغة Emmet. بحماس، تنشئ ملف test.html جديدًا في VSCode وتكتب div.container>h1{Hello}، مستعدة للضغط Tab ومشاهدة التوسيع. تضغط Tab — يضيف مسافة بادئة. تضغط Tab مرة أخرى — يضيف مسافة بادئة أخرى. بعد 5 ضغطات Tab، لم يحدث شيء. تعتقد أنها كتبت الاختصار بشكل خاطئ وتجرب ul>li*3، a[href="#"] — لا شيء يعمل.

تفترض أن Emmet غير ممكّن في VSCode وتبدأ البحث في مشكلات GitHub، لتكتشف أن شروط توسيع مفتاح Tab أكثر تعقيدًا مما توقعت. ثلاثة أسباب شائعة:

1. لم يتم حفظ الملف بامتداد .html (VSCode لن يتعرف على الملفات بدون امتداد كـ HTML)
2. بعض إضافات اعتراض Tab مثبتة (مثل إصدارات VETUR القديمة، إكمال TabNine AI)
3. هناك أحرف بعد المؤشر (Tab يعطي أولوية للمسافة البادئة)

تفتح أليس أخيرًا لوحة الأوامر (Ctrl+Shift+P)، تشغل يدويًا Emmet: Expand Abbreviation، وتشاهد 4 أسطر HTML تظهر. تفكر: توسيع الاختصار هو بوضوح الإجراء الأكثر استخدامًا، لكني لم أعرف لماذا فشل Tab أو كيفية استكشافه — هذا هو الإجراء الأول الذي لا يمكن لأي درس Emmet تخطيه.

(2) حل توسيع الاختصار

توسيع الاختصار هو الإجراء الأساسي في مجموعة أدوات Emmet — يحول الاختصارات الشبيهة بـ CSS (ul>li*3) إلى كود HTML/XML/CSS كامل. إنه الأساس الذي تعتمد عليه جميع إجراءات Emmet الأخرى (التغليف، التوازن، إلخ).

حل أليس يأتي في ثلاث خطوات:

1. تأكيد نوع الملف: احفظ بامتداد .html / .css
2. تحقق من الإضافات المتعارضة: عطل TabNine، VETUR القديم، ومعترضات Tab الأخرى
3. اعرف البديل: كل محرر لديه بديل لوحة الأوامر (مثال: Emmet: Expand Abbreviation في VSCode)

بعد إتقان مفتاح التشغيل واستكشاف أخطاء الفشل، تكتب أليس ul.nav>li*3>a{Link $}، تضغط Tab، وتظهر 3 أسطر HTML كاملة في ثانية واحدة. يمكنها الآن كتابة قائمة تنقل في سطر اختصار واحد كان يستغرق 30 ثانية يدويًا — تحسين سرعة 30 ضعفًا.

(3) الفوائد

توسيع الاختصار هو "لحظة التحول" الأكثر أهمية في دروس Emmet — أول 13 درسًا كانت كلها عن "الإدخال"، ومن هذا الدرس فصاعدًا ننتقل إلى "التوسيع + التحرير". إتقانه يعني: سطر اختصار واحد يطوي 5–50 سطرًا من الكود، وبناء هيكل HTML ينخفض من 5 دقائق إلى 10 ثوانٍ. بعد هذا الدرس وحده، تكتب أليس حاوية HTML لصفحة مقال من 5 فقرات (article>header>h1+meta+time+nav) في 8 ثوانٍ بدلاً من 90.

3. التعريف الأساسي لتوسيع الاختصار

توسيع الاختصار هو الإجراء الأكثر استخدامًا في مجموعة أدوات Emmet — يوسع الاختصارات الشبيهة بـ CSS (ul>li*3) إلى كود كامل بناءً على صيغة المستند الحالي (HTML/CSS/XML).

نقطة أساسية: توسيع الاختصار ليس "إكمال كود" بسيط — إنه يعيد كتابة السطر بالكامل إلى نتيجة التوسيع. إذا ضغطت Tab والمؤشر في منتصف سطر به أحرف، يتحقق Emmet مما إذا كانت هناك أحرف بعد المؤشر؛ لا يتم تشغيل التوسيع إلا عندما لا يكون هناك أي أحرف. هذا هو أكثر المزالق شيوعًا للمبتدئين — وضع المؤشر في منتصف ul>li*3 والضغط Tab لن يشغل التوسيع؛ يجب أن يكون المؤشر عند نهاية السطر تمامًا.

4. أربع طرق للتشغيل

توسيع الاختصار لديه 4 طرق تشغيل عبر المحررات والسيناريوهات المختلفة.

(1) مفتاح Tab (افتراضي، الأكثر شيوعًا)

VSCode و WebStorm و Atom وغيرها تعين مفتاح Tab لتوسيع الاختصار افتراضيًا. المتطلبات الأ��اسية:

(2) Ctrl+E (بديل، Sublime افتراضي)

Sublime Text يستخدم Tab للمسافة البادئة افتراضيًا، لذا يتم تشغيل توسيع الاختصار بـ Ctrl+E. يمكن لمستخدمي VSCode أيضًا إعادة تعيين Tab إلى Ctrl+E (انظر القسم (4)).

(3) لوحة الأوامر (البديل الاحتياطي)

كل محرر لديه نقطة دخول لوحة الأوامر. في VSCode هي Ctrl+Shift+P ← اكتب Emmet: Expand Abbreviation. هذه هي طريقة التشغيل الأكثر موثوقية — لا تتأثر بتعارضات Tab أو مشكلات نوع الملف أو تداخل الإضافات.

(4) اختصارات مخصصة (keybindings.json)

keybindings.json في VSCode يتيح لك تعيين توسيع الاختصار لأي اختصار:

[
  {
    "key": "ctrl+e",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

نصيحة: شرط when — editorTextFocus && !editorReadonly يعني "المؤشر في منطقة نص المحرر والملف قابل للكتابة". صيغة القيد هذه قياسية لـ keybindings.json وتمنع التشغيل العرضي في لوحة الأوامر وحقول إدخال أسماء الملفات وسياقات مشابهة.

5. مقارنة مفاتيح التشغيل عبر 4 محررات

قوة Emmet الأساسية هي كونه غير مرتبط بمحرر محدد — نفس الاختصار ul>li*3 يتوسع بشكل متطابق في VSCode و WebStorm و Sublime. الاختلاف الوحيد يكمن في مفتاح التشغيل وطريقة التكوين.

تحذير: في WebStorm، مفتاح Tab يعطى أولوية لإكمال الكود. تحتاج انتظار ظهور نافذة الإكمال المنبثقة، الضغط Esc لإغلاقها، ثم الضغط Tab لتشغيل توسيع Emmet. للتشغيل المباشر، استخدم البديل Ctrl+Alt+Space أو استدعه من لوحة الأوامر.

6. عندما لا يعمل: 4 سين��ريوهات فشل شائعة

أكثر مزالق المبتدئين شيوعًا — تضغط Tab ولا يحدث شيء. أربعة سيناريوهات فشل الأكثر تكرارًا:

(1) ملف غير معترف به

يحدد VSCode اللغة بامتداد الملف. ملف بدون امتداد (مثال: test) لن يتم التعرف عليه كـ HTML، ولن يعمل Emmet. الحل: احفظ كـ test.html أو اختر ال��غة يدويًا من الزاوية السفلية اليمنى.

(2) موضع مؤشر خاطئ

الضغط Tab والمؤشر في منتصف اختصار يجعل Emmet يعامله كـ "إدراج Tab بين حرفين" (مسافة بادئة) بدلاً من التوسيع. الحل: اضغط End للقفز إلى نهاية السطر أولاً، ثم اضغط Tab.

(3) داخل تعليق

<!-- div.container -->

الضغط Tab والمؤشر داخل تعليق لن يوسع النص المعلق. الحل: انقل الاختصار خارج التعليق، أو استخدم لوحة الأوامر كبديل احتياطي.

(4) Tab معترض

إضافات الإكمال بالذكاء الاصطناعي (TabNine، Codeium، GitHub Copilot، إلخ) تعطي أولوية لمعالجة Tab (لـ "قبول اقتراحات الإكمال")، مما يتسبب في فشل اعتراض Tab من Emmet. الحل: عطل هذه الإضافات أو استخدم لوحة الأوامر كبديل احتياطي.

7. أمثلة تطبيقية

تغطي الأمثلة الأربعة التالية السيناريوهات الأساسية لتوسيع الاختصار.

▶ مثال: توسيع أساسي div.container (الصعوبة ⭐)

التوسيع الأكثر شيوعًا — اكتب div.container في ملف HTML، اضغط Tab، وسطر واحد يصبح div بفئة.

الاختصار:

div.container

التوسيع:

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

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: في `div.container`، `div` هو اسم الوسم و `.container` هو اختصار الفئة. يحلل Emmet `.` كسمة الفئة، مخرجًا `<div class="container"></div>`. لاحظ أن الوسم الموسع **فارغ** (بدون محتوى)، مع وضع المؤشر داخل `<div>` قبل `</div>` (هذه ميزة "نقطة التحرير التالية" المغطاة في الدرس 16). هذا هو سيناريو التوسيع الأبسط والأعلى تكرارًا في Emmet.

▶ مثال: هيكل قائمة HTML ul>li*3 (الصعوبة ⭐)

توسيع هيكل متداخل مع الضرب في ملف HTML — سطر واحد ينتج قائمة بـ 3 عناصر.

الاختصار:

ul>li*3

التوسيع:

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

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: `ul>li*3` يتكون من 3 أجزاء: ① `ul` هو الوسم الوالد؛ ② `>` هو تداخل الابن؛ ③ `li*3` هو الوسم الابن `li` مكرر 3 مرات. يتوسع Emmet إلى `ul` واحد يحتوي ثلاثة عناصر `li`. لاحظ **المسافة البادئة بمسافتين** للوسوم الأبناء (المسافة البادئة الافتراضية لـ Emmet)، وهي ميزة "الوعي بالسياق" في Emmet — داخل `<ul>` في HTML، السياق الافتراضي هو `<li>`، لذا يمكنك حتى حذف اسم الوسم (`ul>*3` يتوسع أيضًا إلى `ul>li*3`). أسماء الوسوم الضمنية تم تغطيتها بعمق في الدرس 3.

▶ مثال: اختصار CSS m10-20 (الصعوبة ⭐)

الضغط Tab في ملف CSS — سطر واحد يكتب اختصار الهامش.

الاختصا��:

m10-20

التوسيع:

margin: 10px 20px;

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: `m10-20` هو اختصار CSS — `m` هو الاختصار الدقيق لـ `margin` (معرف في قاموس Emmet)، و `10-20` هما قيمتان (تضاف وحدات px تلقائيًا). يستدل Emmet على `margin: 10px 20px;` (10px أعلى/أسفل، 20px يسار/يمين). هذا تطبيق نموذجي لاختصار CSS مع توسيع الاختصار — نفس الإجراء يوسع اختصارات HTML واختصارات CSS. يحدد Emmet ما إذا كان السياق HTML أو CSS بناءً على **نوع الملف الحالي**. هذا يتوافق مع اختصارات CSS التي تم تعلمها في الدروس 11–13.

▶ مثال: ربط مفاتيح مخصص Tab ← Ctrl+E (الصعوبة ⭐⭐)

إعادة تعيين توسيع الاختصا�� إلى Ctrl+E في keybindings.json في VSCode — مثالي للمستخدمين الذين يتعارض مفتاح Tab لديهم مع إضافات أخرى.

تعديل الملف: keybindings.json (VSCode لوحة الأوامر ← Preferences: Open Keyboard Shortcuts (JSON))

[
  {
    "key": "ctrl+e",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

السلوك بعد التعديل:

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: يوضح هذا المثال استخدام keybindings.json القياسي. `key` هي سلسلة الاختصار (Tab يكتب كـ `"tab"`)؛ `command` هو معرف أمر VSCode (`editor.emmet.action.expandAbbreviation` هو أمر التوسيع الداخلي لـ Emmet)؛ `when` هو شرط التشغيل (المؤشر في منطقة نص المحرر + الملف قابل للكتابة). بعد التعديل، يستعيد Tab سلوك المسافة البادئة الافتراضي، ويتم تفويض توسيع Emmet إلى Ctrl+E. نمط "إلغاء ربط Tab" هذا يناسب السيناريوهات التي يتعارض فيها Tab مع إضافات الإكمال بالذكاء الاصطناعي مثل TabNine/Copilot. ملاحظة: الاختصار المخصص **لا** يتجاوز مشغل Tab الافتراضي — Emmet في VSCode يعطي أولوية لـ "المؤشر عند نهاية السطر + Tab". لتعطيل تشغيل Tab بالكامل، عيّن `emmet.triggerExpansionOnTab` إلى false.

8. مثال كامل: كتابة قسم Hero لصفحة هبوط HTML في سطر واحد

طبق جميع آليات توسيع الاختصار على "قسم Hero لصفحة هبوط" حقيقي — سطر اختصار واحد يتوسع إلى كتلة HTML كاملة.

▶ مثال: حاوية HTML لقسم Hero (الصعوبة ⭐⭐)

الاختصار:

section.hero>div.container>(h1{Hello World})+p.lead{This is a landing page.}+a.btn.btn-primary[href="#cta"]{Get Started}

التوسيع:

<section class="hero">
  <div class="container">
    <h1>Hello World</h1>
    <p class="lead">This is a landing page.</p>
    <a href="#cta" class="btn btn-primary">Get Started</a>
  </div>
</section>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: هذا المثال هو تطبيق واقعي كامل لتوسيع الاختصار. `section.hero>div.container>(h1{Hello World})+p.lead{...}+a.btn.btn-primary[href="#cta"]{...}` يجمع 5 آليات Emmet في سطر واحد: ① `section.hero` — وسم + فئة؛ ② `>` — تداخل الابن؛ ③ `()` — تجميع (عزل نطاق لـ 3 عقد شقيقة)؛ ④ `+` — عقد شقيقة؛ ⑤ `{text}` محتوى نصي + `[attr=val]` سمات مخصصة + فئات متعددة (`.btn.btn-primary`). النتيجة الموسعة هي قسم Hero كامل لصفحة هبوط SaaS — 4 وسوم HTML دلالية، 3 أسماء فئات، رابط CTA واحد. الهيكل بالكامل ينتقل من سطر واحد بحوالي 80 حرفًا إلى 7 أسطر HTML (المسافة البادئة الافتراضية بمسافتين في Emmet). كتابة هذا HTML يدويًا تستغرق 60–90 ثانية (بما في ذلك تهجئة الفئات وترتيب السمات وتعديل المسافة البادئة)؛ مع Emmet هو سطر اختصار واحد + ضغطة Tab واحدة = ثانيتان. **تحسين سرعة 30–45 ضعفًا**. هذا هو الشكل النهائي لكفاءة توسيع الاختصار عبر طبقتي "الصيغة" و"المحرر".

❓ أسئلة شائعة

📖 ملخص

• توسيع الاختصار هو إجراء Emmet الأكثر استخدامًا — يحول الاختصارات الشبيهة بـ CSS إلى كود HTML/XML/CSS كامل
• مفتاح التشغيل الافتراضي هو Tab، لكن VSCode/WebStorm يستخدمان Tab، Sublime يستخدم Ctrl+E، Brackets يستخدم Ctrl+Alt+Space
• لوحة الأوامر هي البديل الاحتياطي: VSCode Ctrl+Shift+P ← Emmet: Expand Abbreviation
• 4 سيناريوهات فشل شائعة: ملف غير معترف به، المؤشر ليس عند النهاية، داخل تعليق، Tab معترض من الإضافات
• اختصارات مخصصة: اكتب "command": "editor.emmet.action.expandAbbreviation" في keybindings.json في VSCode
• الفرق عن إكمال الكود (IntelliSense): Emmet يعيد كتابة السطر بالكامل؛ الإكمال فقط يدرج مقتطفًا

🌐 جرب بنفسك: راجع توثيق VSCode Emmet لقائمة الاختصارات الكاملة والتكوين.

📝 تمارين

1. أساسي (الصعوبة ⭐): في محررك الحالي، أنشئ ملف test.html جديدًا. اكتب div.container>h1{Hello}+p.lead{This is Emmet} واضغط Tab. سجل نتيجة التوسيع. إذا لم يستجب Tab، استكشف باستخدام سيناريوهات الفشل الأربعة أعلاه وارجع إلى لوحة الأوامر. التقط لقطة شاشة للتوسيع النهائي.

2. متوسط (الصعوبة ⭐⭐): افتح keybindings.json في VSCode (لوحة الأوامر ← Preferences: Open Keyboard Shortcuts (JSON)). أضف قاعدة لإعادة تعيين توسيع الاختصار إلى Ctrl+E. تحقق من تغير السلوك: الضغط Tab يجب أن يضيف مسافة بادئة، و Ctrl+E يجب أن يوسع. إذا كان محررك Sublime Text، وثق الاختلافات ب��ن مشغل Ctrl+E في Sublime ومشغل Ctrl+E في VSCode في صيغ keybindings.json الخاصة بهما.

3. متقدم (الصعوبة ⭐⭐⭐): اكتب قسم Hero كامل لصفحة هبوط HTML مكون من 5 عناصر (عنوان + عنوان فرعي + وصف + زر أساسي + زر ثانوي) باستخدام اختصار Emmet واحد. تحقق من أن جميع الآليات الخمس تعمل بشكل صحيح: > تداخل الابن، + عقد شقيقة، {} محتوى نصي، [attr=val] سمات مخصصة، وفئات متعددة (.btn.btn-primary). سجل عدد أسطر HTML الموسعة وعدد أحرف الاختصار. قارن الوقت مقابل كتابة نفس هيكل HTML يدويًا واكتب تقرير "فوائد سرعة توسيع الاختصار".

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن