Emmet: تكامل Emmet مع المحررات

أخبار سارة: قد تكون تستخدم بالفعل محررًا يدعم Emmet — VSCode و WebStorm و Atom مفعل بها افتراضيًا، دون حاجة لأي تكوين.

1. ما ستتعلمه

• دعم Emmet في VSCode: مفعل افتراضيًا، أنواع الملفات المغطاة
• WebStorm / IntelliJ IDEA: حالة الدعم الافتراضي
• Sublime Text و Atom: خطوات تثبيت الملحق
• اختصارات المفاتيح المخصصة: Tab مقابل Ctrl+E — أيهما تستخدم
• دعم أنواع ملفات Emmet حسب المحرر: .html .css .jsx .tsx .vue

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

(1) نقطة الألم: إعادة تعلم Emmet كل مرة تغير فيها المحرر

بوب هو مطور واجهة أمامية بدأ مؤخرًا وظيفة جديدة. في يومه الأول، أعطاه الفريق حاسوبًا مثبتًا عليه WebStorm مس��قًا — وليس VSCode الذي اعتاد عليه. فتح بوب WebStorm، كتب div.box، ضغط Tab... ولم يحدث شيء. افترض أن WebStorm لا يدعم Emmet وذه�� ليسأل مديره، الذي أخبره: "WebStorm مفعل به افتراضيًا. هل تضغط المفتاح الصحيح؟" احتار بوب — اتضح أن المحررات المختلفة لها مفاتيح ��شغيل Emmet مختلفة. VSCode يستخدم Tab، WebStorm أيضًا يستخدم Tab، لكن بعض الإصدارات القديمة تتطلب Ctrl+Alt+Space. ثم سأل زميلته أليس عن المحرر الذي تستخدمه. قالت أليس إنها تستخدم Sublime Text، "لكنك تحتاج إلى تثبيت ملحق Emmet أولاً وتخصيص اختصار المفاتيح — Tab لن يعمل مباشرة." فكر بوب: إذا غيرت المحرر، يجب علي إعادة تكوين كل شيء من الصفر كل مرة. هذا عائق كبير جدًا.

(2) تكامل Emmet مع المحرر: الحل

إجابة Emmet: تقريبًا جميع المحررات الرئيسية تدعم Emmet بشكل أصلي أو عبر الملحقات، لكن طريقة التشغيل، وتغطية أنواع الملفات، ومتطلبات التكوين تختلف. بعد إكمال هذا الدرس، صنع بوب ورقة مرجعية وعلقها فوق مكتبه:

بهذه الورقة المرجعية، يمكن لبوب تشغيل Emmet في أي محرر خلال 5 دقائق.

(3) الفوائد

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

3. نظرة عامة على دعم المحررات

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

نصيحة: بناء جملة JSX/TSX يختلف قليلاً عن HTML القياسي (class يُكتب كـ className). بعض المحررات تحتاج إلى تفعيل خيار "Emmet في JSX" بشكل صريح للتوسيع الصحيح.

4. إعداد عملي للمحررات الشائعة

فيما يلي نشرح إعداد Emmet للمحررات الثلاثة الأكثر استخدامًا: VSCode و WebStorm و Sublime Text.

(1) VSCode: يعمل مباشرة

VSCode لديه دعم Emmet الأكثر شمولاً. الإصدارات 1.0 وما بعدها مفعل بها Emmet افتراضيًا — لا حاجة لملحقات، فقط اضغط Tab في ملفات HTML أو CSS للتوسيع.

▶ مثال: التحقق من Emmet في VSCode (الصعوبة: ★)

الخطوة 1: إنشاء ملف HTML جديد

# اضغط Ctrl+N في VSCode لإنشاء ملف جديد
# احفظه باسم test.html (VSCode يكتشف اللغة تلقائيًا من الامتداد)

الخطوة 2: اكتب اختصار Emmet

div.container>h1{Hello Emmet}+p.lead{My first Emmet expansion in VSCode}

الخطوة 3: اضغط Tab للتشغيل

<div class="container">
  <h1>Hello Emmet</h1>
  <p class="lead">My first Emmet expansion in VSCode</p>
</div>

الناتج:

سطر واحد من الاختصار يتوسع فورًا إلى 4 أسطر من HTML، مع وضع المؤشر داخل h1. مفتاح Tab الافتراضي في VSCode يعمل لتوسيع Emmet دون أي تكوين.

تفعيل Emmet في ملفات JSX/TSX (اختياري):

// أضف إلى settings.json (Ctrl+Shift+P → "Preferences: Open User Settings (JSON)")
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

(2) WebStorm / IntelliJ: التشغيل بـ Tab افتراضيًا

جميع بيئات JetBrains (IntelliJ IDEA، PyCharm، PhpStorm، إلخ) تأتي مع Emmet مدمجًا — لا حاجة للتثبيت. مفتاح التشغيل هو أيضًا Tab، لكن هناك فارق بسيط: مفتاح Tab في WebStorm قد يحاول أولاً إكمال الكود؛ قد تحتاج إلى الضغط على Tab عدة مرات لتشغيل توسيع Emmet.

▶ مثال: التحقق من Emmet في WebStorm (الصعوبة: ★)

الخطوة 1: إنشاء ملف HTML جديد

# File → New → HTML File → سمّه test.html

الخطوة 2: اكتب الاختصار واضغط Tab

ul.nav>li*4>a[href="#"]{Menu $}

الخطوة 3: نتيجة التوسيع

<ul class="nav">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

الناتج:

قائمة تنقل تحتوي على 4 عناصر قائمة يتم توليدها فورًا. إذا لم يستجب Tab، اضغط `Ctrl+Alt+Space` لفرض توسيع Emmet (اختصار المفاتيح البديل في WebStorm).

(3) Sublime Text: يحتاج ملحقًا

Sublime Text لا يتضمن Emmet افتراضيًا. تحتاج إلى تثبيت ملحق Emmet عبر Package Control. بعد التثبيت، مفتاح التشغيل الافتراضي هو Ctrl+E (وليس Tab، لأن Tab محجوز للإزاحة في Sublime).

▶ مثال: تثبيت Emmet في Sublime Text (الصعوبة: ★★)

الخطوة 1: تثبيت Package Control

# إذا لم يكن Package Control مثبتًا بعد:
# 1. اضغط Ctrl+` لفتح الكونسول
# 2. الصق كود تثبيت Package Control (من https://packagecontrol.io/installation)
# 3. أعد تشغيل Sublime Text

الخطوة 2: تثبيت ملحق Emmet

# 1. اضغط Ctrl+Shift+P لفتح لوحة الأوامر
# 2. اكتب "Package Control: Install Package" واضغط Enter
# 3. ابحث عن "Emmet" واضغط Enter للتثبيت
# 4. يتم تفعيل الملحق تلقائيًا بعد التثبيت

الخطوة 3: استخدم Ctrl+E للتشغيل

<!-- اكتب الاختصار -->
form>(input[type=email])+(input[type=password])+button{Login}
<!-- ��ضغط Ctrl+E (وليس Tab) -->

نتيجة التوسيع:

<form>
  <input type="email">
  <input type="password">
  <button>Login</button>
</form>

الناتج:

شغّل بـ Ctrl+E لتوليد 3 عناصر نموذج فورًا. للتبديل إلى Tab كمفتاح تشغيل، انظر مثال تخصيص المفاتيح أدناه.

(4) اختصارات المفاتيح المخصصة: Tab مقابل Ctrl+E

يفضل العديد من المطورين الضغط على Tab لتشغيل Emmet، لكن محررات مثل Sublime Text و Vim تحجز Tab لوظائف أخرى. يوضح هذا القسم كيفية توسيع مشغل Tab في VSCode ليشمل ملفات JSX — أو التبديل إلى Ctrl+E.

▶ مثال: تخصيص تكوين Emmet في VSCode (الصعوبة: ★★)

السيناريو أ: تفعيل مشغل Tab لملفات JSX/TSX

// settings.json
{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue-html": "html",
    "razor": "html"
  }
}

السيناريو ب: تغيير مشغل Emmet إلى Ctrl+E (مطابقة Sublime)

// keybindings.json (Ctrl+Shift+P → "Preferences: Open Keyboard Shortcuts (JSON)")
[
  {
    "key": "ctrl+e",
    "command": "editor.action.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

السيناريو ج: تعطيل Emmet في أنواع ملفات محددة

// settings.json (لتعطيل Emmet في ملفات markdown)
{
  "emmet.excludeLanguages": ["markdown"]
}

الناتج:

مع الإعدادات أعلاه، يمكنك إعادة تعيين مفتاح تشغيل Emmet إلى أي اختصار يناسب عادات فريقك أو تفضيلاتك الشخصي��، والتحكم بدقة في أنواع الملفات التي ينشط فيها Emmet.

5. قواعد التفعيل التلقائي لأنواع الملفات

يدعم كل محرر مجموعة مختلفة قليلاً من أنواع الملفات لـ Emmet. القاعدة العامة: HTML و CSS مفعلان بالكامل افتراضيًا؛ JSX/TSX مفعل افتراضيًا في VSCode/WebStorm لكنه يح��اج تفعيلاً يدويًا في Sublime؛ Vue و Svelte وغيرهما يحتاجون تكوينًا إضافيًا.

نصيحة: إذا لم يستجب Emmet لـ Tab في نوع ملف معين، تحقق أولاً من إعدادات اقتران نوع الملف في محررك لتأكيد أن Emmet مفعل لتلك اللغة.

❓ أسئلة شائعة

📖 ملخص

• VSCode و WebStorm و Atom مفعل بها Emmet افتراضيًا؛ Sublime Text و Vim يحتاجان ملحقًا
• مفتاح التشغيل الافتراضي هو Tab لمعظم المحررات، لكن Ctrl+E في Sublime Text و Ctrl+Alt+Space في Brackets
• ملفات HTML و CSS مدعومة افتراضيًا في جميع المحررات؛ JSX/TSX/Vue عادة تحتاج تكوينًا إضافيًا
• اختصارات المفاتيح المخصصة: أعد التعيين إلى أي اختصار عبر keybindings.json في VSCode
• القائمة البيضاء لأنواع الملفات: وسّع اللغات المدعومة بـ emmet.includeLanguages؛ القائمة السوداء بـ emmet.excludeLanguages
• في سياقات JSX، قد يوسع Emmet class إلى className (بعض المحررات تتطلب تفعيلاً يدويًا)

📝 تمارين

1. أساسي (الصعوبة: ★): في محررك الحالي، أنشئ ملف .html جديدًا، اكتب div.container>ul>li*3>a، اضغط مفتاح التشغيل الافتراضي، سجل نتيجة التوسيع، والتقط لقطة شاشة.
2. متوسط (الصعوبة: ★★): افتح إعدادات محررك، ابحث عن خيارات التكوين المتعلقة بـ Emmet، اذكر 3 خيارات لم تكن تعرفها من قبل (مثل مفتاح التشغيل، اللغات المضمنة، اللغات المستبعدة)، ووصف ما يفعله كل منها.
3. متقدم (الصعوبة: ★★★): إذا كنت تستخدم ملفات JSX/TSX أو Vue بشكل متكرر، قم بتكوين محررك لتفعيل Emmet في أنواع الملفات هذه. ثم اكتب اختصار Emmet واحدًا يتوسع إلى مكون JSX كامل (يتضمن props وربط الأحداث).

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

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

من نحن