| اسم الإضافة | وظيفتها الأساسية | أهميتها لمبرمج Angular |
|---|---|---|
| Angular Language Service | تقديم دعم ذكي وتكملة تلقائية لقوالب HTML الخاصة بـ Angular | اكتشاف الأخطاء داخل قوالب المكونات بشكل فوري |
| Angular Snippets | توفير اختصارات جاهزة لكتابة أکواد المكونات والخدمات | توفير الوقت وتسريع سرعة الكتابة البرمجية |
| Prettier - Code formatter | تنسيق الأكواد وترتيب المسافات والأسطر تلقائياً | الحفاظ على نظافة الكود وتوحيد شكله العام |
| GitLens | تعزيز أدوات إدارة الإصدارات وتتبع التعديلات | معرفة من عدل على السطر البرمجي ومتى تم ذلك |
بعد أن أصبح لدينا بيئة العمل الأساسية جاهزة ومزودة بسطر أوامر Angular CLI في الدروس السابقة، نحتاج الآن إلى بيئة تطوير متكاملة (IDE) لكتابة الأكواد بسلاسة وفعالية. المحرر الأهم والأكثر استخدامه في سوق العمل لتطوير مشاريع Angular هو محرر Visual Studio Code (VS Code). في هذا الدرس، سنتعرف على كيفية تجهيز هذا المحرر وتثبيت أهم الإضافات (Extensions) التي ستضاعف سرعة كتابتك للكود وتوفر عليك الكثير من الوقت في اكتشاف الأخطاء وتنسيق الملفات.
على الرغم من وجود العديد من محررات النصوص، إلا أن VS Code يُعد الخيار الافتراضي والأكثر تفضيلاً لمطوري الويب عموماً ومطوري Angular خصوصاً. يعود ذلك لعدة أسباب رئيسية:
مدعوم من شركة Microsoft ويحصل على تحديثات مستمرة وأمان عالٍ.
لا يستهلك موارد الجهاز مقارنة ببعض بيئات التطوير الثقيلة الأخرى.
يحتوي على ملايين الإضافات التي تحول محرر النصوص البسيط إلى بيئة عمل متكاملة تفهم لغة Angular بكل تفاصيلها.
بعد تحميل وتثبيت محرر VS Code من موقعه الرسمي، يمكنك الانتقال إلى قسم الإضافات (Extensions) في الجانب الأيسر (أو الضغط على اختصار Ctrl + Shift + X)، ثم البحث عن الإضافات التالية وتثبيتها:
هذه الإضافة أساسية جداً؛ فهي تتيح للمحرر فهم قوالب HTML الخاصة بـ Angular، مما يمنحك خاصية الإكمال التلقائي (IntelliSense) لل المتغيرات والدوال داخل ملفات العرض.
تساعدك على كتابة الهياكل المتكررة بسرعة عبر اختصارات قصيرة (مثل كتابة اختصار لإنشاء مكون أو حلقة تكرارية دون الحاجة لكتابتها حرفاً بحرف).
من الأفضل دائماً ضبط إعدادات المحرر لتقوم بتنسيق الكود تلقائياً بمجرد حفظ الملف (Save). يمكنك إضافة هذه الإعدادات إلى ملف الإعدادات (settings.json) في VS Code لتوفير الوقت وضمان جودة الكود:
هذا الإعداد يجبر المحرر على ترتيب وتنسيق أكواد TypeScript و HTML تلقائياً عند الضغط على زر الحفظ:
| 1 | { |
| 2 | "editor.formatOnSave": true, |
| 3 | "editor.defaultFormatter": "esbenp.prettier-vscode" |
| 4 | } |
يمكنك تخصيص طريقة عرض الأكواد والمسافات البادئة (Indentation) لملفات الويب لضمان التوافق مع معايير Angular:
| 1 | { |
| 2 | "[html]": { |
| 3 | "editor.defaultFormatter": "vscode.html-language-features" |
| 4 | }, |
| 5 | "[typescript]": { |
| 6 | "editor.tabSize": 2 |
| 7 | } |
| 8 | } |