9.9 KiB
استخدام محرر الأكواد: إتقان VSCode.dev
مرحبًا!
تأخذك هذه الدرس من الأساسيات إلى الاستخدام المتقدم لـ VSCode.dev — محرر الأكواد القوي المستند إلى الويب. ستتعلم كيفية تحرير الأكواد بثقة، إدارة المشاريع، تتبع التغييرات، تثبيت الإضافات، والتعاون كمحترف — كل ذلك من متصفحك، دون الحاجة إلى أي تثبيت.
أهداف التعلم
بنهاية هذه الدرس، ستكون قادرًا على:
- استخدام محرر الأكواد بكفاءة لأي مشروع، في أي مكان
- تتبع عملك بسلاسة باستخدام التحكم في الإصدارات المدمج
- تخصيص وتعزيز سير عمل التطوير الخاص بك باستخدام التعديلات والإضافات
المتطلبات الأساسية
لبدء العمل، قم بالتسجيل للحصول على حساب مجاني على GitHub، والذي يتيح لك إدارة مستودعات الأكواد والتعاون عالميًا. إذا لم يكن لديك حساب بعد، أنشئ واحدًا هنا.
لماذا استخدام محرر أكواد مستند إلى الويب؟
محرر الأكواد مثل VSCode.dev هو مركز التحكم الخاص بك لكتابة الأكواد وتحريرها وإدارتها. بواجهة سهلة الاستخدام، ميزات متعددة، والوصول الفوري عبر المتصفح، يمكنك:
- تحرير المشاريع على أي جهاز
- تجنب عناء التثبيتات
- التعاون والمساهمة فورًا
بمجرد أن تصبح مرتاحًا مع VSCode.dev، ستكون مستعدًا للتعامل مع مهام البرمجة من أي مكان وفي أي وقت.
البدء مع VSCode.dev
انتقل إلى VSCode.dev — لا حاجة للتثبيت أو التنزيل. تسجيل الدخول باستخدام GitHub يفتح الوصول الكامل، بما في ذلك مزامنة إعداداتك، إضافاتك، ومستودعاتك. إذا طُلب منك، قم بربط حساب GitHub الخاص بك.
بعد التحميل، ستبدو مساحة العمل الخاصة بك كما يلي:
، ⚙️ (إعدادات)، الملفات، التحكم في المصدر، إلخ.
- الشريط الجانبي: يتغير السياق بناءً على الأيقونة المحددة في شريط النشاط (يكون افتراضيًا على Explorer لعرض الملفات).
- منطقة تحرير الأكواد: أكبر قسم على اليمين — حيث ستقوم فعليًا بتحرير وعرض الأكواد.
انقر على الأيقونات لاستكشاف الميزات، ولكن عد إلى Explorer للحفاظ على مكانك.
فتح مستودع GitHub
الطريقة الأولى: من داخل المحرر
-
انتقل إلى VSCode.dev. انقر على "فتح مستودع عن بُعد."
.
 واضغط Enter.
إذا نجحت، سترى المشروع بالكامل محملًا وجاهزًا للتحرير!
الطريقة الثانية: مباشرة عبر الرابط
قم بتحويل أي رابط مستودع GitHub ليفتح مباشرة في VSCode.dev عن طريق استبدال github.com بـ vscode.dev/github.
على سبيل المثال:
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
هذه الميزة تعزز الوصول السريع لأي مشروع.
تحرير الملفات في مشروعك
بمجرد فتح المستودع، يمكنك:
1. إنشاء ملف جديد
- في الشريط الجانبي Explorer، انتقل إلى المجلد المطلوب أو استخدم الجذر.
- انقر على أيقونة ‘ملف جديد ...’.
- قم بتسمية الملف، اضغط Enter، وسيظهر الملف فورًا.
 والحذف (باللون الأحمر).
![عرض التغييرات](../images/working-tree.png التغييرات بالنقر على+بجانب الملفات للتحضير للتأكيد. - تجاهل التغييرات غير المرغوب فيها بالنقر على أيقونة التراجع.
- اكتب رسالة تأكيد واضحة، ثم انقر على علامة الاختيار للتأكيد والدفع.
للعودة إلى مستودعك على GitHub، اختر قائمة الهامبرغر في أعلى اليسار.
![تأكيد التغييرات](../images/edit-vscode.dev مع الإضافات
تتيح لك الإضافات إضافة لغات، سمات، أدوات تصحيح الأخطاء، وأدوات الإنتاجية إلى VSCode.dev — مما يجعل حياتك البرمجية أسهل وأكثر متعة.
تصفح وإدارة الإضافات
-
انقر على أيقونة الإضافات في شريط النشاط.
-
ابحث عن إضافة في صندوق 'البحث عن إضافات في السوق'.
![تفاصيل الإضافة](../images/extension-details:
- المثبتة: جميع الإضافات التي قمت بإضافتها
- الشائعة: المفضلة في الصناعة
- الموصى بها: مخصصة لسير عملك
![عرض الإضافات](
1. تثبيت الإضافات
-
أدخل اسم الإضافة في البحث، انقر عليها، واستعرض التفاصيل في المحرر.
-
اضغط على زر التثبيت الأزرق في الشريط الجانبي أو في منطقة الأكواد الرئيسية.
![تثبيت الإضافات](../images/install-extension 2. تخصيص الإضافات
-
ابحث عن الإضافة المثبتة.
-
انقر على أيقونة الترس → اختر إعدادات الإضافة لضبط السلوكيات حسب رغبتك.
![تعديل إعدادات الإضافة](../images/extension-settings 3. إدارة الإضافات يمكنك:
-
تعطيل: إيقاف تشغيل الإضافة مؤقتًا مع الاحتفاظ بها مثبتة
-
إلغاء التثبيت: إزالتها نهائيًا إذا لم تعد بحاجة إليها
ابحث عن الإضافة، اضغط على أيقونة الترس، واختر ‘تعطيل’ أو ‘إلغاء التثبيت’، أو استخدم الأزرار الزرقاء في منطقة الأكواد.
المهمة
اختبر مهاراتك: قم بإنشاء موقع سيرة ذاتية باستخدام vscode.dev
استكشاف إضافي ودراسة ذاتية
- تعمق أكثر مع وثائق VSCode Web الرسمية.
- استكشف ميزات مساحة العمل المتقدمة، اختصارات لوحة المفاتيح، والإعدادات.
الآن أنت جاهز للبرمجة، الإنشاء، والتعاون — من أي مكان، وعلى أي جهاز، باستخدام VSCode.dev!
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.