VSCode: الإضافات واختصارات Emmet
ثبّت الإضافات الأساسية، واستخدم اختصارات Emmet لكتابة HTML وCSS فورًا، وتعلّم اختصارات لوحة المفاتيح التي تسرّع التحرير.
VSCode: الإضافات واختصارات Emmet درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا VSCode؟
Visual Studio Code هو محرر التعليمات البرمجية الأكثر شيوعًا لتطوير الواجهات الأمامية. فهو مجاني ومفتوح المصدر وسريع، ويضم منظومة ضخمة من الإضافات. وتعتمد معظم فرق الواجهات الأمامية عليه كمحرر موحّد.
الإضافات الأساسية
الإضافات الضرورية لتطوير الواجهات الأمامية: ESLint لفحص التعليمات البرمجية مباشرةً، وPrettier للتنسيق التلقائي، وGitLens لعرض git blame مباشرةً، وPath Intellisense للإكمال التلقائي لمسارات الملفات، وAuto Rename Tag لإعادة تسمية وسوم HTML المتطابقة.
الإضافات الخاصة باللغات
بالنسبة إلى TypeScript: إضافة TypeScript and JavaScript Language Features المضمّنة. وبالنسبة إلى React: مقتطفات ES7+ React/Redux. وبالنسبة إلى Vue: إضافة Volar الرسمية. وبالنسبة إلى Tailwind: إضافة Tailwind CSS IntelliSense.
ما هي Emmet؟
تأتي Emmet مضمّنةً في VSCode. اكتبوا اختصارًا واضغطوا Tab لتوسيعه إلى HTML أو CSS كامل. فهي تسرّع كتابة بنية الصفحات بدرجة كبيرة.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>اختصارات Emmet الشائعة
تعلّموا اختصارات Emmet التالية: ! ← هيكل HTML الأساسي، وdiv.container ← div مع class، وul>li*5 ← قائمة تضم 5 عناصر، وinput:email ← حقل إدخال للبريد الإلكتروني، وform:post ← نموذج بقيمة method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>اختصارات لوحة المفاتيح الأساسية
الاختصارات التي توفر أكبر قدر من الوقت: Ctrl/Cmd+P لفتح ملف بسرعة، وCtrl/Cmd+Shift+P لفتح لوحة الأوامر، وAlt+Click لإضافة مؤشرات متعددة، وCtrl/Cmd+D لتحديد التكرار التالي، وCtrl/Cmd+/ لتبديل التعليق.
التحرير باستخدام مؤشرات متعددة
يضيف Alt+Click مؤشرات. ويضيف Ctrl+Alt+Up/Down مؤشرات أعلى المؤشر أو أسفله. ويحدد Ctrl+D التكرار التالي للنص المحدد. ومع وجود مؤشرات متعددة، تُجرى جميع التعديلات في الوقت نفسه، ما يناسب إعادة تسمية المتغيرات ضمن نطاقات صغيرة.
الطرفية المدمجة
افتحوا الطرفية داخل VSCode باستخدام Ctrl+` (backtick). ويمكنكم تقسيمها لتشغيل خادم التطوير في جزء وتشغيل الاختبارات في جزء آخر من دون مغادرة المحرر.
إعدادات مساحة العمل
أنشئوا الملف .vscode/settings.json في مشروعكم لتعيين إعدادات خاصة بالمشروع تتجاوز إعدادات المستخدم. أضيفوا هذا الملف إلى المستودع حتى يحصل جميع أعضاء الفريق على التجربة نفسها، مثل التنسيق عند الحفظ وحجم علامات التبويب وأعمدة المسطرة.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense والاستيراد التلقائي
توفر IntelliSense في VSCode الإكمال التلقائي وتلميحات المعلمات ووثائق تظهر عند تمرير المؤشر. وفي مشاريع TypeScript، تستورد الرموز تلقائيًا أيضًا عند قبول اقتراح إكمال، من دون الحاجة إلى إضافة import يدويًا.
الانتقال إلى التعريف والمراجع
انقروا مع الضغط على Ctrl، أو اضغطوا F12، فوق أي رمز للانتقال إلى تعريفه. يعرض Shift+F12 جميع المراجع. ويبحث Ctrl+Shift+F في جميع الملفات. وهذه الأدوات لا غنى عنها للتنقل داخل قواعد التعليمات البرمجية الكبيرة.
لوحة Problems
تسرد لوحة Problems، التي تُفتح باستخدام Ctrl+Shift+M، جميع أخطاء وتحذيرات ESLint وTypeScript في الملفات المفتوحة. وهي أسرع طريقة لمعرفة ما يحتاج إلى إصلاح قبل إجراء commit.
اختبار سريع
إلى ماذا يتوسع اختصار Emmet ul>li*3 في VSCode؟
مراجعة: سير عمل VSCode
ثبّتوا ESLint وPrettier والإضافات الخاصة باللغات. استخدموا Emmet لكتابة HTML وCSS بسرعة. تعلّموا اختصارات لوحة المفاتيح، مثل Cmd+P وCmd+Shift+P وCmd+D. عيّنوا formatOnSave في .vscode/settings.json. استخدموا التحرير بالمؤشرات المتعددة لإجراء التعديلات المتكررة. واستخدموا Go to Definition للتنقل في التعليمات البرمجية.
الأسئلة الشائعة
هل درس «VSCode: الإضافات واختصارات Emmet» مجاني؟
نعم — نص درس «VSCode: الإضافات واختصارات Emmet» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «VSCode: الإضافات واختصارات Emmet»؟
ثبّت الإضافات الأساسية، واستخدم اختصارات Emmet لكتابة HTML وCSS فورًا، وتعلّم اختصارات لوحة المفاتيح التي تسرّع التحرير. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «VSCode: الإضافات واختصارات Emmet»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Chrome DevTools: Elements وConsole وNetwork
- VSCode: الإضافات واختصارات Emmet
- إعداد Prettier وESLint
- توافق المتصفحات وcaniuse.com