Emmet: التوازن والقفز والتحديد

في الدروس 14–15 تعلمت التوسيع والتغليف — إجرائي "الإدخال" الأساسيين في Emmet. لكن في التطوير الحقيقي، ما زلت تحتاج التحرير بعد التوسيع — تغيير محتوى 5 عناصر <li>، إضافة تعليقات، إزالة الوسوم الخارجية. يعلمك هذا الدرس "ثلاثي التحرير" في Emmet: التوازن / نقطة التحرير التالية / تحديد العنصر، بالإضافة إلى تبديل التعليق وإزالة الوسم. هذه الإجراءات الخمسة تتيح لك مواصلة التسريع 3–5 أضعاف بعد التوسيع.

1. ما ستتعلمه

• التوازن / الانتقال إلى الزوج المطابق: القفز إلى وسوم HTML المطابقة (أو أقواس CSS)، يدعم التنقل ثنائي الاتجاه للداخل والخارج
• نقطة التحرير التالية/السابقة: التنقل بين نقاط التوقف المتعددة (النقاط القابلة للتحرير) بعد توسيع Emmet
• تحديد العنصر: تحديد العنصر الحالي بمستويات دقة متزايدة (اسم الوسم ← السمة الكاملة ← قيمة السمة ← الفئة المميزة ← العنصر بالكامل)، بدون عبور العناصر
• تبديل التعليق: التبديل بين تعليقات HTML <!-- --> وتعليقات CSS /* */ (واعي بالسياق)
• إزالة الوسم: تجريد الوسم الخارجي مع الحفاظ على المحتوى (لإعادة التسمية أو إزالة القشرة)

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

(1) نقطة الألم: بعد توسيع 100 سطر HTML، إيجاد مكان التحرير يستغرق 30 ثانية

كتبت أليس حاوية HTML لصفحة مقال مدونة:

<article>
  <header>
    <h1>Hello World</h1>
    <time>2026-07-31</time>
  </header>
  <section>
    <p>...</p>
    <p>...</p>
  </section>
  <footer>
    <address>...</address>
  </footer>
</article>

تحتاج الآن إجراء 3 استبدالات جماعية:

1. تغيير <h1>Hello World</h1> إلى <h1>Hello Emmet</h1>
2. إضافة سطر واحد من نص lorem ipsum النائب لكل من وسوم <p> الاثنين
3. إضافة تعليق إلى <footer>

سير عملها:

1. إيجاد <h1>: Ctrl+F ← اكتب Hello World ← استبدل بـ Hello Emmet (5 ثوانٍ)
2. إيجاد أول <p>: Ctrl+F ← استبدل (5 ثوانٍ)؛ إيجاد ثاني <p>: Ctrl+F مرة أخرى (5 ثوانٍ)
3. إيجاد <footer>: Ctrl+F ← أضف تعليقًا (5 ثوانٍ)

المجموع: 20 ثانية، 9 عمليات Ctrl+F. تفكر أليس: HTML هو بطبيعته هيكل شجري — يجب أن يكون هناك اختصارات "تنقل قائم على الهيكل". حرك المؤشر إلى <h1>، اضغط مفتاحًا واحدًا للقفز مباشرة إلى </h1>، اضغط مفتاحًا للقفز إلى <header> الخارجي... يجب أن يكون لدى Emmet هذه "اختصارات الهيكل الشجري".

(2) حل ثلاثي التحرير في Emmet

إجراءات التحرير الخمسة في Emmet هي "اختصارات الهيكل الشجري" — تحول هيكل HTML/CSS الشجري إلى أداة تنقل خاصة بك.

حل أليس:

1. التوازن: المؤشر داخل <h1>، اضغط Ctrl+Alt+B للتحديد حتى وسم إغلاق </h1> ← ثانيتان
2. نقطة التحرير التالية: بعد توسيع ul>li*3، اضغط Ctrl+Alt+→ للقفز إلى موضع محتوى كل <li> ← 5 ثوانٍ
3. تحديد العنصر: المؤشر على <p>، اضغط Shift+Ctrl+. لتحديد <p> التالي ← 3 ثوانٍ
4. تبديل التعليق: المؤشر على <footer>، اضغط Ctrl+/ لإضافة تعليق <!-- --> ← ثانية واحدة
5. إزالة الوسم: المؤشر على <h1>، اضغط Shift+Ctrl+; لحذف <h1> لكن احتفظ بـ "Hello World" ← ثانيتان

المجموع: 13 ثانية، 5 عمليات اختصار. أسرع 35% من استبدال Ctrl+F، مع صفر استبدالات خاطئة (Ctrl+F يمكن أن يطابق مواقع متعددة بسهولة).

(3) الفوائد

ثلاثي التحرير يقلل وقت "التحرير بعد التوسيع" من 20 ثانية إلى 13 ثانية، والأهم يقلل الأخطاء التشغيلية — استبدال Ctrl+F يمكن أن يتخطى أو يستبدل بشكل زائد بسهولة؛ التنقل الهيكلي لـ Emmet يتحرك على طول شجرة HTML، لا يخطئ أبدًا. بعد إتقان هذه الإجراءات الخمسة، ينخفض وقت التحرير الإجمالي لأليس لصفحة مقال من 5 فقرات من 5 دقائق إلى دقيقتين.

3. التعريف الأساسي لإجراءات التحرير الخمسة

يوفر Emmet 5 إجراءات "تسريع تحرير" تغطي أكثر 5 عمليات شيوعًا بعد التوسيع: القفز بين الوسوم، التنقل بين نقاط التوقف، تحديد العناصر، تبديل التعليقات، وإزالة الوسوم الخارجية.

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

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

الإجراءات الخمسة لها مفاتيح تشغيل مختلفة بشكل كبير عبر 4 محررات رئيسية لأن هذه الإجراءات جديدة نسبيًا ويختلف تقدم التنفيذ حسب المحرر. حقيقة مفتاحية: VSCode لديه ربط افتراضي واحد فقط لإجراءات Emmet المدمجة — Tab يشغل توسيع الاختصار (الدرس 14). جميع إجراءات Emmet الأخرى (التوازن / التغليف / تحديد العنصر / إزالة الوسم، إلخ) ليس لها اختصار افتراضي في VSCode ويجب تشغيلها عبر لوحة الأوامر أو keybindings.json مخصص.

نصيحة: "لا يوجد" في الجدول تعني أن VSCode لا يشحن إجراء Emmet مربوطًا بأي مفتاح افتراضيًا. الروابط المخصصة الشائعة في المجتمع (مثل Ctrl+Alt+B / Shift+Ctrl+. / Shift+Ctrl+;، إلخ) يجب أن تعلن صراحة في keybindings.json بأوامر مثل "command": "editor.emmet.action.balance" / "editor.emmet.action.selectItem" / "editor.emmet.action.removeTag". الاستخدام لأول مرة يجب أن يبدأ بلوحة الأوامر (Ctrl+Shift+P ← Emmet: Balance، إلخ) — هذا يتحقق من دعم المحرر للإجراء ويكشف اسم الأمر الدقيق (الذي تكتبه بعد ذلك في keybindings.json).

5. مخطط Mermaid: مسار حركة مؤشر المحرر

يوضح المخطط أدناه مسار تنقل المؤشر بين النقاط القابلة للتحرير (نقاط التوقف) بعد أن يوسع Emmet ul>li*3.

graph TB
    Start([يكتب المستخدم ul>li*3<br>يضغط Tab للتوسيع]) --> Expand[Emmet يوسع 4 أسطر HTML]
    Expand --> S1[نقطة توقف 1:<br>موضع محتوى أول li في ul]
    S1 -->|اضغط Ctrl+Alt+→| S2[نقطة توقف 2:<br>موضع محتوى ثاني li في ul]
    S2 -->|اضغط Ctrl+Alt+→| S3[نقطة توقف 3:<br>موضع محتوى ثالث li في ul]
    S3 -->|اضغط Ctrl+Alt+→| End([نقطة نهاية التوسيع:<br>بعد وسم إغلاق ul])
    S1 -->|اضغط Ctrl+Alt+←| Start
    S2 -->|اضغط Ctrl+Alt+←| S1
    S3 -->|اضغط Ctrl+Alt+←| S2
    End -->|اضغط Ctrl+Alt+←| S3

    style Start fill:#3b82f6,color:#fff
    style Expand fill:#8b5cf6,color:#fff
    style S1 fill:#10b981,color:#fff
    style S2 fill:#10b981,color:#fff
    style S3 fill:#10b981,color:#fff
    style End fill:#ef4444,color:#fff

graph TB
    Start([يكتب المستخدم ul>li*3<br>يضغط Tab للتوسيع]) --> Expand[Emmet يوسع 4 أسطر HTML]
    Expand --> S1[نقطة توقف 1:<br>موضع محتوى أول li في ul]
    S1 -->|اضغط Ctrl+Alt+→| S2[نقطة توقف 2:<br>موضع محتوى ثاني li في ul]
    S2 -->|اضغط Ctrl+Alt+→| S3[نقطة توقف 3:<br>موضع محتوى ثالث li في ul]
    S3 -->|اضغط Ctrl+Alt+→| End([نقطة نهاية التوسيع:<br>بعد وسم إغلاق ul])
    S1 -->|اضغط Ctrl+Alt+←| Start
    S2 -->|اضغط Ctrl+Alt+←| S1
    S3 -->|اضغط Ctrl+Alt+←| S2
    End -->|اضغط Ctrl+Alt+←| S3

    style Start fill:#3b82f6,color:#fff
    style Expand fill:#8b5cf6,color:#fff
    style S1 fill:#10b981,color:#fff
    style S2 fill:#10b981,color:#fff
    style S3 fill:#10b981,color:#fff
    style End fill:#ef4444,color:#fff

نقطة أساسية: بعد توسيع ul>li*3، هناك 3 نقاط توقف (موضع محتوى كل li) + نقطة نهاية واحدة (بعد </ul>). نقطة التحرير التالية تقفز بين هذه واحدًا تلو الآخر. للخلف يقفز إلى النقطة السابقة، للأمام يقفز إلى التالية. جدير بالملاحظة: هذا ليس "الضغط Tab" — الضغط Tab في VSCode بعد التوسيع هو "مسافة بادئة" أو "قبول توسيع Emmet" (إذا كان لا يزال عند الاختصار الأصلي)، لكن لمواصلة التنقل بين نقاط التوقف بعد التوسيع، استخدم Ctrl+Alt+→ بدلاً من Tab.

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

تغطي الأمثلة الخمسة التالية السيناريوهات الأساسية لثلاثي التحرير + تبديل التعليق + إزالة الوسم.

▶ مثال: التوازن — القفز إلى وسم <div> المطابق (الصعوبة ⭐)

"التنقل بين الوسوم" الأكثر شيوعًا — المؤشر داخل <div>، اضغط التوازن لتحديد المحتوى، اضغط مرة أخرى لتحديد الوسم بالكامل.

الكود الأصلي:

<div class="container">
  <p>Hello World</p>
</div>

الخطوات:

1. ضع المؤشر في أي مكان داخل منطقة محتوى <p>Hello World</p>
2. اضغط Ctrl+Alt+B مرة واحدة ← يحدد Hello World (المحتوى)
3. اضغط Ctrl+Alt+B مرة أخرى ← يحدد <p>Hello World</p> (وسم p بالكامل)
4. اضغط Ctrl+Alt+B مرة أخرى ← يحدد <div> بالكامل وكل محتواه
5. استمر في الضغط Ctrl+Alt+B ← يتوسع التحديد للخارج مستوى بمستوى (توازن خارجي)

اضغط مرة أخرى (Shift+Ctrl+Alt+B) ← ينكمش التحديد للداخل (توازن داخلي)

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

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

▶ مثال: نقطة التحرير التالية — القفز بين نقاط التوقف بعد التوسيع (الصعوبة ⭐⭐)

بعد توسيع ul>li*3، اضغط Ctrl+Alt+→ للقفز إلى موضع محتوى كل li.

الكود الأصلي:

ul>li*3

الخطوات:

1. اضغط Tab لتشغيل التوسيع ← 4 أسطر HTML تظهر
2. المؤشر عند نقطة توقف 1 (داخل أول li)
3. اضغط Ctrl+Alt+→ ← اقفز إلى نقطة توقف 2 (داخل ثاني li)
4. اضغط Ctrl+Alt+→ ← اقفز إلى نقطة توقف 3 (داخل ثالث li)
5. اضغط Ctrl+Alt+→ ← اقفز إلى نقطة النهاية (بعد </ul>)

HTML الموسع:

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

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: ذكر الدرس 14 عن توسيع الاختصار أن "التوسيع يتضمن نقاط توقف" — لكنه لم يشرح كيفية التنقل بينها. نقطة التحرير التالية هي الإجراء المخصص لـ "القفز إلى نقطة التوقف التالية". `Ctrl+Alt+→` للأمام، `Ctrl+Alt+←` للخلف. **لماذا لا نستخدم مفتاح Tab؟** لأنه بعد اكتمال التوسيع، يعامل VSCode Tab كـ "مسافة بادئة" (المؤشر بالفعل عند "موضع قابل للتحرير" داخل محتوى li)، لذا لن يشغل تنقل Emmet مرة أخرى. "للقفز بين نقاط التوقف"، استخدم `Ctrl+Alt+→`. هذا هو قرار تصميم Emmet المفتاحي الذي يفصل "تشغيل الإدخال" (Tab) عن "تنقل التحرير" (Ctrl+Alt+→).

▶ مثال: تحديد العنصر — تحديد بمستوى دقة متزايد (الصعوبة ⭐⭐)

HTML يحتوي <p> بفئة؛ المؤشر على النص. اضغط تحديد العنصر لتوسيع التحديد تدريجيًا — فقط داخل العنصر الحالي، لا يقفز أبدًا إلى عناصر مجاورة.

الكود الأصلي:

<p class="fruit">Apple</p>

الخطوات:

1. ضع المؤشر على النص Apple داخل <p class="fruit">Apple</p>
2. اضغط Shift+Ctrl+. مرة واحدة ← يحدد Apple (عقدة نصية)
3. اضغط مرة أخرى ← يحدد fruit (اسم فئة مميز)
4. اضغط مرة أخرى ← يحدد class="fruit" (قيمة السمة)
5. اضغط مرة أخرى ← يحدد class="fruit" (السمة الكاملة)
6. اضغط مرة أخرى ← يحدد <p class="fruit">Apple</p> بالكامل (العنصر بالكامل)

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: "التحديد المتوسع" لتحديد العنصر يعمل بعمق متزايد **فقط داخل العنصر الحالي** — من نص ← فئة مميزة ← قيمة سمة ← سمة كاملة ← عنصر كامل (التوثيق الرسمي: "يوسع التحديد الحالي إلى عنصره الوالد"). إنه **لا يعبر العناصر** — للقفز من `<p>Apple</p>` إلى `<p>Banana</p>` التالي للتحديد الجماعي، استخدم `Ctrl+F2` في VSCode (تغيير جميع التكرارات) أو المؤشر المتعدد (`Ctrl+D` للتالي، `Ctrl+Shift+L` للجميع بنفس الاسم) — تلك ميزات IDE أصلية، وليست Emmet. **`Shift+Ctrl+.` للأمام (توسع خارجي)**، `Shift+Ctrl+,` للخلف (انكماش داخلي). سلوك مشابه في CSS: المحدد ← الخاصية ← القيمة؛ مفيد لسيناريوهات "تحديد سطر خاصية CSS واحد بسرعة". هذا "التوسع بمستوى دقة متزايد" يحاكي Extend Selection في JetBrains IDEs (نمط W/A).

▶ مثال: تبديل التعليق — تشغيل/إيقاف التعليقات (الصعوبة ⭐)

المؤشر على وسم <footer> في HTML، اضغط Ctrl+/ لإضافة تعليق <!-- -->.

الكود الأصلي (بدون تعليق):

<footer>
  <address>contact@example.com</address>
</footer>

الخطوات:

1. ضع المؤشر في أي مكان على وسم <footer>
2. اضغط Ctrl+/ ← وسم <footer> بالكامل يغلف بـ <!-- -->

الموسع:

<!-- <footer>
  <address>contact@example.com</address>
</footer> -->

اضغط Ctrl+/ مرة أخرى ← يزال التعليق (يستعيد HTML الأصلي)

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: "الوعي بالسياق" في تبديل التعليق هو ما يميز Emmet عن التعليق العادي في المحرر. `Ctrl+/` العادي يعلق فقط السطر الحالي؛ تبديل التعليق في Emmet **يتعرف على السياق الحالي** — في HTML يعلق الوسم بالكامل (بما أن تعليقات HTML يمكن أن تمتد عبر الأسطر)، في CSS يعلق القاعدة أو الخاصية الحالية. هذا "الوعي بالسياق" يجعل تبديل التعليق أكثر فائدة من التعليق المدمج في IDE — ضغطات مفاتيح أقل. **ملاحظة**: تبديل التعليق واعٍ بالسياق بشكل مماثل في CSS — عندما يكون المؤشر على سطر `padding: 10px;` الكامل، `Ctrl+/` يعلق `padding: 10px;` بالكامل؛ عندما يكون المؤشر على كلمة `padding`، `Ctrl+/` لا يزال يعلق `padding: 10px;` (الخاصية بالكامل). بالمثل في HTML — المؤشر في أي مكان في `<p>` يعلق `<p>...</p>` بالكامل.

▶ مثال: إزالة الوسم — تجريد الوسم الخارجي، الاحتفاظ بالمحتوى (الصعوبة ⭐⭐)

المؤشر على <h1>، اضغط Shift+Ctrl+; لحذف <h1></h1> لكن احتفظ بمحتوى النص.

الكود الأصلي:

<h1>Hello World</h1>

الخطوات:

1. ضع المؤشر على وسم <h1>
2. اضغط Shift+Ctrl+; ← يحذف <h1> و </h1>، يحتفظ بـ "Hello World"

الموسع:

Hello World

سيناريو مركب: تجريد الوسوم الخارجية المتداخلة

الكود الأصلي:

<section class="hero">
  <h1>Welcome</h1>
</section>

الخطوات:

1. ضع المؤشر على وسم <section>
2. اضغط Shift+Ctrl+; ← يحذف <section> و </section>، يحتفظ بـ <h1>Welcome</h1>

الموسع:

<h1>Welcome</h1>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

الشرح: "تجريد القشرة، الاحتفاظ بالمحتوى" في إزالة الوسم هو الأكثر إيجازًا بين إجراءات تحرير Emmet — ضغطة مفتاح واحدة تجرد الوسم الخارجي. السيناريوهات الشائعة: ① مراجعة التصميم — حاوية `<header>` الأصلية لم تعد مرغوبة، لكن نص `<h1>` بداخلها يحتاج الحفظ؛ ② تصحيح مؤقت — جرد الطبقة الخارجية لفحص الأنماط؛ ③ إعادة الهيكلة — تقليل عمق تداخل DOM. ملاحظة: إزالة الوسم لا تجرد طبقات متعددة دفعة واحدة — لتجريد 3 طبقات تداخل (div > section > h1)، اضغط `Shift+Ctrl+;` 3 مرات متتالية. مفتاح الفاصلة المنقوطة (`;`) في `Shift+Ctrl+;` هو مفتاح "أمر ماكرو" في العديد من المحررات — يتوافق مع أمر `removeTag` الداخلي لـ Emmet.

7. شجرة قرار لاختيار بين الإجراءات الخمسة

في التطوير الحقيقي، الإجراءات الخمسة غالبًا ما تحتاج الدمج. إليك شجرة قرار:

❓ أسئلة شائعة

📖 ملخص

• ثلاثي التحرير: التوازن (تغيير التحديد) / نقطة التحرير التالية (القفز بين نقاط التوقف) / تحديد العنصر (تحديد عناصر بنفس الاسم)
• تبديل التعليق: يعلق وسوم HTML كاملة، أسطر خصائص CSS كاملة (واعٍ بالسياق)
• إزالة الوسم: تجرد الوسم الخارجي لكن تحتفظ بالمحتوى (تجريد القشرة)، ضغطة واحدة تجرد طبقة واحدة
• الانتقال إلى الزوج المطابق: قفز (بدون تحديد)؛ التوازن: تحديد (تغيير التحديد)
• مفاتيح التشغيل: VSCode Ctrl+Alt+B / Ctrl+Alt+→ / Shift+Ctrl+. / Ctrl+/ / Shift+Ctrl+;
• نقطة التحرير التالية ≠ مفتاح Tab: Tab هو مسافة بادئة/قبول إكمال؛ Ctrl+Alt+→ هو القفز بين نقاط التوقف

📝 تمارين

1. أساسي (الصعوبة ⭐): في ملف HTML الخاص بك، اكتب هيكلًا متداخلاً (<div><section><p>...</p></section></div>) ، ضع المؤشر على <p>، واضغط التوازن 5 مرات. سجل كل نطاق تحديد ("محتوى" ← "وسم p" ← "محتوى section" ← "وسم section" ← "وسم div"). التقط لقطة شاشة لتغييرات التحديد.

2. متوسط (الصعوبة ⭐⭐): في ملف HTML الخاص بك، اكتب 3 عناصر <p> (<p>One</p>، <p>Two</p>، <p>Three</p>). ضع المؤشر على اسم وسم أول <p> واضغط تحديد العنصر 6 مرات (Shift+Ctrl+.). سجل المحتوى المحدد في كل مرة (اسم الوسم / المحتوى الكامل / اسم الوسم التالي / المحتوى الكامل التالي). أخيرًا، استخدم تبديل التعليق لتعليق عناصر <p> الثلاثة كمجموعة.

3. متقدم (الصعوبة ⭐⭐⭐): اكتب حاوية صفحة هبوط HTML كاملة (article > header + section + footer بتداخل 3 مستويات). حسّنها باستخدام الإجراءات الخمسة مجتمعة: (أ) وسّع article>header>h1+section.content>p*3+footer.address؛ (ب) نقطة التحرير التالية للقفز إلى كل <p> وملء المحتوى؛ (ج) التوازن لتحديد وسم article بالكامل ونسخه؛ (د) تبديل التعليق لتعليق footer؛ (هـ) إزالة الوسم لتجريد article مؤقتًا وفحص الأنماط (استخدم Ctrl+Z للتراجع). سجل تسلسل التشغيل والحالة النهائية لجميع الإجراءات الخمسة، واكتب تقرير مقارنة كفاءة "سير عمل ثلاثي التحرير" مقابل "استبدال Ctrl+F".

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

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

من نحن