تكامل VS Code
📚 التنقل في السلسلة: المقالة السابقة 07 الاستخدام الأول قادتك لتشغيل مثالك الأول في الجهاز الطرفي. هذه المقالة تنقل Claude Code إلى VS Code—نفس القدرات، ولكن بأسلوب واجهة المستخدم الرسومية.
عندما انتقلت لأول مرة لاستخدام إضافة VS Code، كان من السهل جداً القيام بشيء غبي.
كان Claude Code يعمل بشكل رائع في الجهاز الطرفي. بعد تثبيت الإضافة لتجربة الواجهة الرسومية، فتحت مجلدًا فارغًا وبحثت في كل مكان عن "أيقونة Spark" التي ذكرتها المستندات الرسمية (الأيقونة التي تشبه الشرارة في شريط الأدوات، وهي نقطة دخول Claude Code في بيئة التطوير المتكاملة). في هذه اللحظة، من السهل أن تعتقد أن التثبيت فشل، وتقوم بإلغاء التثبيت وإعادة التثبيت، وإعادة التشغيل، ومسح ذاكرة التخزين المؤقت، وتضيع عشرين دقيقة تقريبًا، وفي النهاية تقرأ المستندات لتكتشف—أن هذه الأيقونة لا تظهر إلا عندما تفتح ملفًا محددًا، وفتح مجلد فقط لا يكفي. إذا بحثت عن الأيقونة في مساحة عمل فارغة، فلن تجدها طوال حياتك.
بصراحة، تكامل VS Code ليس صعبًا، ولكنه يمتلك منطق تفاعل مختلف عن الجهاز الطرفي، وبعض الافتراضات المسبقة قد تجعلك عالقًا في الخطوة الأولى. ستسلط هذه المقالة الضوء على هذه الفخاخ مسبقًا.
بعد قراءة هذه المقالة، ستحصل على:
- الخطوات الكاملة لتثبيت إضافة Claude Code في VS Code (بما في ذلك التفرعات مثل Cursor)، بالإضافة إلى قائمة مرجعية لاستكشاف أخطاء "الأيقونة المفقودة".
- كيفية استخدام الميزات الثلاثة الرائعة الحصرية للواجهة الرسومية: diff جنبًا إلى جنب (مراجعة التغييرات سطرًا بسطر)، الإشارة باستخدام
@، والمراجعة المخططة. - جدول مقارنة "متى تستخدم الإضافة مقابل CLI"، بالإضافة إلى مجموعة من اختصارات لوحة المفاتيح الشائعة.
01 في البداية: ما هي العلاقة بين الإضافة و CLI
"أعرف بالفعل كيف أستخدم claude في الجهاز الطرفي، هل لا يزال يتعين علي تثبيت الإضافة؟" الخلاصة هي: الإضافة ليست بديلاً عن CLI، بل هي غلاف واجهة رسومية فوقه. عند تثبيت الإضافة، يتم تثبيت CLI معها، ويتشاركان نفس ملف التكوين ~/.claude/settings.json؛ يمكن استعادة سجل المحادثة، لكنه لا يتزامن في الوقت الفعلي—إذا كنت في منتصف محادثة في الإضافة، يمكنك العودة إلى الجهاز الطرفي وتشغيل claude --resume لمواصلة تلك المحادثة بنشاط.
تشبيه: نفس المطبخ الخلفي، نافذتان للطلب. CLI مثل الصراخ بطلبك مباشرة عند نافذة المطبخ—سريع، شامل، ويمكنك طلب أي شيء؛ الإضافة تشبه نادل القاعة، الذي يجعل القائمة غنية بالصور والنصوص، وتكون عملية الطلب وتتبع التقدم أكثر وضوحًا، ولكن هناك بعض "عناصر القائمة المخفية" التي لا يمكنك طلبها إلا عند نافذة المطبخ. المطبخ الخلفي هو نفسه، والأطباق متطابقة.
متى يجب استخدام أيهما؟ قدمت المصادر الرسمية مقارنة للقدرات، نلخصها كالتالي:
| الميزة | CLI (الجهاز الطرفي) | إضافة VS Code |
|---|---|---|
| الأوامر و skills | الكل | مجموعة فرعية (اكتب / لمعرفة المتاح) |
| تكوين خادم MCP | كامل | جزئي (إضافة باستخدام CLI، إدارة عبر /mcp في اللوحة) |
| Checkpoints (نقاط التحقق) | مدعوم | مدعوم |
اختصارات bash باستخدام ! | مدعوم | غير مدعوم |
| إكمال Tab | مدعوم | غير مدعوم |
| diff جنبًا إلى جنب، وتحديد الكود كسياق | يتطلب الاتصال ببيئة التطوير | أصلي، جاهز للاستخدام |
باختصار: لمهام "التعامل مع الملفات" مثل كتابة الكود ومراجعة التغييرات، من الواضح أن الإضافة أسهل في الاستخدام؛ بينما اختصارات bash مثل !ls وإكمال Tab متوفرة فقط في CLI. الاستخدام المعتاد هو الاعتماد بشكل رئيسي على الإضافة، وإذا كنت بحاجة إلى تشغيل أوامر مجمعة أو أوامر غير متوفرة في الإضافة، اكتب claude مباشرة في الجهاز الطرفي المدمج—السجل متصل، والتبديل سلس.
💡 ملخص بعبارة واحدة: الإضافة و CLI هما وجهان لنفس المحرك، يتشاركان السجل والتكوين، ويمكنك التبديل بينهما بناءً على المهمة التي تقوم بها، دون الحاجة لاختيار أحدهما فقط.
02 التثبيت: ثلاث طرق، بالإضافة إلى استكشاف أخطاء الأيقونة المفقودة
تحقق من الإصدار قبل التثبيت
المتطلب الرسمي الصارم: VS Code الإصدار 1.98.0 أو أعلى، لن يتم التثبيت أو العمل على الإصدارات الأقل (انقر على "Help → About" للتحقق من رقم الإصدار). عند فتح الإضافة لأول مرة، سيُطلب منك تسجيل الدخول إلى حساب Anthropic؛ تختلف طريقة التكوين للشركات التي تستخدم مزودي خدمات خارجيين مثل Bedrock أو Vertex AI، وسنذكر ذلك بشكل منفصل في النهاية.
ثلاث طرق للتثبيت
الطريقة الأولى: البحث في المتجر (الأكثر استقرارًا، يوصى بها للمبتدئين)
في VS Code، اضغط على Cmd+Shift+X (في Mac) أو Ctrl+Shift+X (في Windows/Linux) لفتح طريقة عرض الإضافات، وابحث عن Claude Code، ثم انقر على تثبيت (Install).
تُظهر الصورة أعلاه كيف يبدو البحث عن Claude Code في عرض الإضافات: المربع الأحمر "Claude Code for VS Code" مع علامة التوثيق الزرقاء للناشر Anthropic هو الإضافة الرسمية، تأكد منها قبل التثبيت.
هنا يقع الفخ الأكثر شيوعًا للمبتدئين: البحث عن Claude Code سيعرض مجموعة من الإضافات بأسماء مشابهة، تأكد من أن الناشر هو Anthropic، ولا تقم بتثبيت بديل مزيف من طرف ثالث.
الطريقة الثانية: التثبيت المباشر عبر الرابط
أثناء فتح VS Code، سيؤدي النقر على الرابط vscode:extension/anthropic.claude-code إلى الانتقال مباشرة لصفحة تثبيت الإضافة (في Cursor، استبدل vscode: بـ cursor:).
الطريقة الثالثة: المحررات غير الشائعة / فشل التثبيت
يمكن أيضًا تثبيت الإضافة في تفرعات VS Code الأخرى (Cursor، Devin Desktop، Kiro، إلخ)—ابحث عن Claude Code في عرض الإضافات الخاص بها، أو قم بتثبيتها من Open VSX Registry. إذا فشل التثبيت بأي شكل، فلا تستسلم، الحل الرسمي البديل هو تشغيل claude مباشرة في الجهاز الطرفي المدمج.
ملاحظة للمستخدمين في الصين: التثبيت، وتفويض تسجيل الدخول، والطلب من Claude العمل لاحقًا كلها تتطلب الاتصال بخدمات Anthropic، العملية بأكملها تتطلب أداة تجاوز جدار الحماية (VPN)، تمامًا مثل إصدار الجهاز الطرفي.
هل قمت بالتثبيت ولم تجد الأيقونة؟ اتبع قائمة التحقق هذه
هذا هو الفخ المذكور في البداية. بعد التثبيت، لا تنبثق الإضافة افتراضيًا، يجب عليك استدعاء اللوحة بنفسك. أسرع طريقة: افتح ملفًا محددًا أولاً، ثم انقر على أيقونة Spark في شريط الأدوات أعلى يمين المحرر (أيقونة صغيرة تشبه الشرارة).
توضح الصورة أعلاه مواقع المداخل الثلاثة: أيقونة Spark في الزاوية العلوية اليمنى من المحرر (②، الأسرع ولكنها تظهر فقط عند فتح ملف)، أيقونة Spark في شريط النشاط (①، موجودة دائمًا)، و ✱ Claude Code في شريط الحالة (③، يمكن النقر عليها حتى بدون فتح ملف).
القاعدة الأساسية: لا تظهر أيقونة Spark إلا عند فتح ملف، وفتح مجلد فقط لا يكفي. إذا كنت لا تزال لا تراها، فاتبع هذا الترتيب الرسمي لاستكشاف الأخطاء:
| المشكلة | إجراء الفحص |
|---|---|
| لا توجد أيقونة أعلى يمين المحرر | افتح ملفًا أولاً (وليس مجرد فتح مجلد) |
| تم فتح ملف ولا تزال مفقودة | تأكد من أن إصدار VS Code هو 1.98.0 أو أعلى (Help → About) |
| الإصدار متوافق | قم بتشغيل Developer: Reload Window في لوحة الأوامر لإعادة تحميل النافذة |
| إعادة التحميل لم تنفع | قم بتعطيل إضافات الذكاء الاصطناعي الأخرى مؤقتًا (Cline، Continue، إلخ)، قد يكون هناك تعارض |
| مساحة العمل في "وضع مقيد" (Restricted Mode) | الإضافة لا تعمل في الوضع المقيد، يجب الوثوق بمساحة العمل |
إذا لم تتمكن حقًا من العثور على أيقونة Spark، فهناك مدخلان بديلان:
- أيقونة Spark في شريط النشاط (عمود الأيقونات في أقصى اليسار)—هذه موجودة دائمًا، والنقر عليها يفتح قائمة الجلسات.
- ✱ Claude Code في شريط الحالة (أسفل يمين النافذة)—يمكن النقر عليها حتى بدون فتح ملف، وعادة ما تكون الأسهل في الاستخدام لتجنب القلق بشأن ما إذا كان الملف مفتوحًا أم لا. يمكنك أيضًا استخدام لوحة الأوامر (
Cmd+Shift+P/Ctrl+Shift+P) وكتابةClaude Code.
عند النقر لفتح اللوحة لأول مرة، ستظهر شاشة تسجيل الدخول، انقر على تسجيل الدخول (Sign In)، وأكمل التفويض في المتصفح. (إذا قمت بتعيين ANTHROPIC_API_KEY ولا يزال يُطلب منك تسجيل الدخول، فالاحتمال الأكبر هو أن VS Code لم يرث متغير البيئة من الجهاز الطرفي، الحل الرسمي هو تشغيل VS Code من الجهاز الطرفي باستخدام code . لتمرير المتغير).
💡 ملخص بعبارة واحدة: عند التثبيت ابحث عن الناشر Anthropic، أيقونة Spark تظهر فقط عند فتح ملف—إذا لم تجدها، افتح ملفًا، وإذا استمرت المشكلة، استخدم المدخل الموجود في شريط الحالة بالأسفل.
03 عرض diff: واجه التغييرات وجهًا لوجه، وافهمها قبل الموافقة
هذه هي الميزة التي جعلت الكثير من الناس يعجبون بالإضافة في المقام الأول. عند تعديل الملفات في إصدار الجهاز الطرفي، يتم رسم diff باستخدام الرموز النصية، وعندما يكون الملف كبيرًا والتغييرات كثيرة، يصبح من الصعب قراءته. تنقل الإضافة هذا إلى عرض diff الأصلي في VS Code—مع إبراز الإضافات والحذف باللونين الأحمر والأخضر، وهو نفس المظهر الذي تراه عادةً عند عرض Git diff.
تشبيه: مقارنة "وضع المراجعة" قبل توقيع العقد. يرسل الطرف الآخر العقد المعدل، المسودة الأصلية على اليسار، والنسخة المعدلة على اليمين، وكل إضافة أو حذف محددة بوضوح—أنت لا توقع وعيناك مغلقتان، بل تراجع كل بند قبل التوقيع. عندما يقوم Claude بتعديل الكود، فإنه يعرض التغييرات ويطلب الإذن، ولديك ثلاثة خيارات: القبول، أو الرفض، أو إخباره مباشرة بتغييره إلى شيء آخر.
هناك أيضًا تفصيل يسهل التغاضي عنه ولا يلاحظه الناس إلا بعد استخدامه لفترة: قبل القبول، يمكنك تعديل اقتراحات Claude يدويًا مباشرة في عرض diff، وبمجرد إجراء التعديل، سيعرف أنك "قمت بتعديله" ولن يستمر في اتباع النسخة القديمة. على سبيل المثال، إذا طلبت منه إعادة هيكلة دالة تتكون من أكثر من 200 سطر، وقام بإجراء سبعة أو ثمانية تغييرات دفعة واحدة، وإذا لاحظت بلمحة في diff أن أحد شروط الحدود كُتب بشكل معكوس، يمكنك تصحيحه على الفور في الجانب الأيمن ثم القبول، مما يوفر لك جولة كاملة من التعديلات.
💡 ملخص بعبارة واحدة: يضع عرض diff كل تغيير أمامك، شاهده بوضوح، وقم بتعديله على الفور، ثم قرر ما إذا كنت ستقبله أم لا، وهو أكثر أمانًا بكثير من نص diff في الجهاز الطرفي.
04 الإشارة بـ @ وتحديد الكود: توفير السياق بدقة
أكبر هدر عند ترك Claude يقوم بالعمل، هو أنه "لا يعرف أي كود تقصده" فيظل يخمن ويدور في حلقات. هناك حيلتان في الإضافة لتوفير السياق بسرعة وبدقة.
الحيلة الأولى: الإشارة إلى الملفات / المجلدات باستخدام @
في مربع المطالبة (prompt)، اكتب @، متبوعًا باسم الملف أو المجلد، وسيقوم Claude بقراءة هذا المحتوى. يدعم هذا المطابقة الغامضة (fuzzy matching)، لذا لا تحتاج إلى كتابة الاسم بالكامل:
> اشرح منطق @auth (سيطابق تلقائيًا auth.js، AuthService.ts، إلخ)
> ماذا يوجد داخل @src/components/؟ (تذكر إضافة الشرطة المائلة / في نهاية المجلدات)تشبيه: إرسال المستندات في المجموعة قبل الاجتماع. بدلاً من الوصف الشفهي "ذلك الملف المتعلق بتسجيل الدخول"، من الأفضل استخدام @ لإلقاء الملف إليه مباشرة، لنوفر عليه عناء البحث في المشروع بأكمله أو البحث عن الملف الخطأ. بالنسبة لملفات PDF الكبيرة جدًا، يمكنك أيضًا أن تطلب منه قراءة صفحات محددة فقط (مثل الصفحات من 1 إلى 10)، ولن يحتاج لقراءة المستند بأكمله.
الحيلة الثانية: حدد الكود، وسوف يراه تلقائيًا
هذه الحيلة أسهل حتى من @: فقط حدد مقطعًا من الكود في المحرر، وسوف يراه Claude تلقائيًا، وسيعرض أسفل مربع المطالبة "تم تحديد XX سطر". يمكنك ببساطة أن تسأل "لماذا يسبب هذا الكود خطأً"، وسوف يعرف أي مقطع تقصد.
بعض النصائح المرافقة الشائعة:
- إدراج إشارة مع أرقام الأسطر: اضغط على
Option+K/Alt+K، وسيدرج تلقائيًا إشارة تحتوي على المسار وأرقام الأسطر مثل@app.ts#5-10(يتطلب تركيز المحرر). - إخفاء التحديد مؤقتًا: انقر على "مؤشر التحديد" (selection indicator) أسفل مربع المطالبة للتبديل، إذا ظهرت أيقونة "عين مشطوبة بخط مائل"، فهذا يعني أن هذا المقطع مخفي عن Claude—يكون مفيدًا عندما تحدد الكود فقط لنسخه.
- سحب الملفات كمرفقات: عند سحب الملفات إلى مربع المطالبة، اضغط مع الاستمرار على
Shift؛ انقر على×الموجودة على المرفق لإزالته.
على سبيل المثال، عند تتبع خطأ في النمط (style bug)، حيث يحتوي CSS على خمس أو ست طبقات متداخلة. يمكنك ببساطة تحديد تلك القاعدة المشبوهة وطرح سؤال "لماذا لا يعمل هذا هنا"، سيحدد في جولتين أن overflow: hidden للعنصر الأب يقوم بقص العنصر الابن—وصف هذا التداخل نصيًا سيستغرق وقتًا طويلاً في الكتابة.
⚠️ يتم إرسال النص المحدد والملفات المفتوحة حاليًا إلى Claude افتراضيًا مع المطالبة. بالنسبة للملفات الحساسة مثل
.env، توصي المصادر الرسمية بإضافة قاعدة رفض (Deny rule) للإجراءReadللمسار، وبمجرد تطابقها، لن تصل إلى Claude (يُرجى الرجوع إلى المستندات الرسمية للحصول على التفاصيل).
💡 ملخص بعبارة واحدة: الإشارة بـ
@توفر الملفات، وتحديد الكود يوفر السياق تلقائيًا—مما يقضي تمامًا على أكبر تكلفة للتخمين وهي "ما هو المقطع الذي تقصده".
05 المراجعة المخططة: دعه يقدم خطة أولاً، ولن يبدأ حتى توافق عليها
ربما يكون هذا القسم هو أكبر تحسن في تجربة الإضافة مقارنةً بالجهاز الطرفي. دعونا نتحدث أولاً عن أوضاع الأذونات: يمكنك النقر على مؤشر الوضع أسفل مربع المطالبة للتبديل، يمتلك Claude Code الأوضاع التالية:
| الوضع | سلوك Claude | متى يُستخدم |
|---|---|---|
| الوضع العادي (الافتراضي) | يسألك قبل كل إجراء إذا كنت توافق | مهام غير مألوفة، عندما تريد التحكم الكامل |
| Plan Mode (وضع التخطيط) | يصف ما يخطط للقيام به أولاً، ولن يبدأ حتى توافق | تغييرات كبيرة، ملفات متعددة، عندما تريد رؤية الخطة أولاً |
| وضع القبول التلقائي | يغير مباشرة، ولن يسألك في كل مرة | تغييرات متكررة صغيرة وموثوقة |
هناك وضع رابع
bypassPermissions(تجاوز جميع فحوصات الأذونات)، يتطلب تفعيلallowDangerouslySkipPermissionsفي الإعدادات، وهو مناسب فقط لبيئات الحماية (sandbox) المعزولة تمامًا، ولا يُنصح باستخدامه يوميًا.
تشبيه: هل يسألك المتدرب قبل بدء العمل. الوضع العادي هو "رفع اليد للسؤال قبل كل خطوة"، والقبول التلقائي هو "دعه يفعل ما يشاء"—لكن وضع التخطيط هو الأكثر تميزًا، يشبه متدربًا يسلمك خطة "أنوي القيام بذلك" لتراجعها، ولن يبدأ العمل حتى توافق.
يتمتع وضع التخطيط في VS Code بميزة لا يمكن أن يوفرها الجهاز الطرفي: سيقوم Claude تلقائيًا بفتح الخطة كمستند Markdown كامل، ويمكنك إضافة تعليقات مضمنة عليه. لن تحتاج للرد بردود عامة مثل "الخطوة الثانية خاطئة"، بل يمكنك الكتابة مباشرة بجانب سطر "الخطوة الثانية": "لا تغير قاعدة البيانات هنا، أضف ذاكرة تخزين مؤقت أولاً"، وسوف يمتص ملاحظاتك قبل أن يبدأ العمل—هذا أدق بكثير من طلب إعادة العمل شفهيًا.
الصورة أعلاه تعرض مستند خطة Markdown مفتوحًا في وضع التخطيط: يدرج Claude كل خطوة، وأنت تكتب تعليقًا مضمنًا بجوار "الخطوة 2" ("لا تغير قاعدة البيانات، أضف ذاكرة تخزين مؤقت في الذاكرة أولاً")، وسيقوم بدمج هذه الملاحظة قبل الموافقة على بدء العمل.
هل تريد جعله الافتراضي؟ قم بتغيير claudeCode.initialPermissionMode في الإعدادات إلى plan. العادة الآمنة هي التبديل إلى وضع التخطيط أولاً لأي تغيير يتضمن "ملفات متعددة وأكثر من 50 سطرًا". هناك درس شائع هنا: إذا قمت بتشغيل القبول التلقائي طوال الوقت لتوفير الجهد، وطلبت منه إضافة سجلات (logs) إلى وحدة ما، فقد يقوم أيضًا بـ "تحسين" ترتيب الاستيراد لعدة ملفات في طريقه، وستضطر لقضاء عشر دقائق لاحقًا لتكتشف ما الذي قام بتعديله. يجب دائمًا مراجعة الخطط للتغييرات الكبيرة وتقييدها في مرحلة التخطيط، فهذا أنظف بكثير من التنظيف لاحقًا.
💡 ملخص بعبارة واحدة: وضع التخطيط = رؤية الخطة قبل التنفيذ، ويمكنك أيضًا التعليق سطرًا بسطر على خطة Markdown—قم بالتبديل إليه قبل التعديلات الكبيرة على ملفات متعددة، لتوفير الكثير من إعادة العمل.
06 قسم التدريب العملي: 10 دقائق لتجربة سير عمل الواجهة الرسومية بالكامل
فيما يلي سنمر بالخطوات من الصفر، وكل خطوة تحدد "ما يجب أن تراه"، اتبعها لتختبر بنفسك ما إذا كنت قد قمت بالتثبيت بشكل صحيح وإذا كنت تعرف كيفية الاستخدام.
الخطوة 0: إنشاء مشروع تدريب صغير جدًا
لا تحتاج إلى مشروع حقيقي، فقط أنشئ مجلدًا فارغًا وضع فيه ملفًا. في الجهاز الطرفي، قم بتشغيل:
mkdir vscode-claude-demo && cd vscode-claude-demo
printf 'def greet(name):\n return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .النتيجة المتوقعة: يفتح VS Code هذا المجلد، ويمكنك رؤية demo.py في مستكشف الملفات على اليسار. (إذا لم يكن لديك أداة سطر الأوامر code مثبتة، فافتح هذا المجلد يدويًا).
الخطوة 1: فتح لوحة Claude وتسجيل الدخول
انقر لفتح demo.py (تذكر، يجب فتح الملف)، وانقر على أيقونة Spark أعلى اليمين. عندما تظهر شاشة تسجيل الدخول لأول مرة، انقر على تسجيل الدخول وأكمل التفويض في المتصفح.
النتيجة المتوقعة: تظهر لوحة محادثة Claude Code على اليمين، ولا يعود يظهر في الأعلى عبارة "غير مسجل الدخول".
الخطوة 2: تحديد الكود + جعله يعدله، لمشاهدة diff المضمن
حدد السطرين الخاصين بالدالة greet في demo.py، يجب أن يعرض أسفل مربع المطالبة "تم تحديد سطرين (2)". ثم أدخل:
قم بتغييره لاستخدام f-string، وأضف التعليقات التوضيحية للنوعالنتيجة المتوقعة: لن يسألك Claude "أي دالة" (مما يعني أن سياق التحديد تم تمريره)، وسيعرض مباشرة diff جنبًا إلى جنب—الجانب الأيمن يغير return "Hello " + name إلى return f"Hello {name}"، ويضيف توقيع الدالة التعليقات التوضيحية للنوع، ويظهر بالأسفل مطالبات القبول / الرفض. راجع بوضوح ثم انقر فوق قبول.
الخطوة 3: جرب وضع التخطيط مرة واحدة
انقر على مؤشر الوضع أسفل مربع المطالبة للتبديل إلى Plan Mode، وأدخل طلبًا أكبر قليلاً:
أضف دعم وسيطات سطر الأوامر لهذا الملف، للسماح للمستخدمين بتمرير الاسم من الجهاز الطرفيالنتيجة المتوقعة: لن يقوم Claude بتعديل الملف مباشرة، بل سيفتح أولاً مستند خطة Markdown يسرد فيه ما ينوي القيام به (مثل استيراد argparse). تقوم أنت بالتأكيد أو تكتب تعليقات بجانب بعض الخطوات، ثم يقوم بالتنفيذ. عند وصولك إلى هذه الخطوة، ستكون قد جربت الميزات الأساسية الثلاث: diff المضمن، التحديد للإشارة، والمراجعة المخططة.
07 للحفظ السريع: اختصارات لوحة المفاتيح الشائعة و "التبديل إلى CLI"
مجموعة من اختصارات لوحة المفاتيح الشائعة (من المصادر الرسمية، تم تحديد اختلافات المنصة):
| الإجراء | الاختصار | الوصف |
|---|---|---|
| تبديل التركيز (المحرر ↔ Claude) | Cmd+Esc / Ctrl+Esc | يعمل الاختصار بناءً على اللوحة التي يوجد بها المؤشر |
| فتح المحادثة في علامة تبويب جديدة | Cmd+Shift+Esc / Ctrl+Shift+Esc | فتح عدة محادثات للعمل بالتوازي |
إدراج إشارة بـ @ | Option+K / Alt+K | يتطلب أن يكون المحرر هو موضع التركيز |
| إعادة فتح الجلسة المغلقة حديثًا | Cmd+Shift+T / Ctrl+Shift+T | مفعل افتراضيًا |
| بدء محادثة جديدة | Cmd+N / Ctrl+N | معطل افتراضيًا، يجب تفعيل enableNewConversationShortcut في الإعدادات |
يوجد فخ في نظام macOS Tahoe وما بعده: ميزة "Game Overlay" في النظام تستخدم
Cmd+Escافتراضيًا وتقوم باعتراضه. اذهب إلى "إعدادات النظام → لوحة المفاتيح → اختصارات لوحة المفاتيح → وحدات التحكم في الألعاب" وقم بإلغاء تحديد هذا الخيار، أو قم بإعادة تعيينClaude Code: Focus inputإلى مفتاح آخر.
هل تريد العودة إلى واجهة تشبه CLI؟ ما عليك سوى فتح الجهاز الطرفي المدمج (`+Cmd / `+Ctrl) وتشغيل claude—سيتصل CLI تلقائيًا بـ VS Code، ويمكنك الاستمرار في استخدام diff الأصلي (في الأجهزة الطرفية الخارجية، قم بتشغيل /ide للاتصال اليدوي)؛ أو حدد استخدام الجهاز الطرفي (useTerminal) في الإعدادات لبدء تشغيل الإضافة مباشرة في وضع الجهاز الطرفي.
مزودو الطرف الثالث (Bedrock / Vertex AI / Foundry): حدد أولاً تعطيل مطالبة تسجيل الدخول (
disableLoginPrompt)، ثم قم بتكوين~/.claude/settings.jsonوفقًا لتعليمات المزود (يُرجى الرجوع إلى المستندات الرسمية).
💡 ملخص بعبارة واحدة:
Cmd+Escلتبديل التركيز هو الأكثر شيوعًا،Option+Kلإدراج الإشارات، وإذا أردت تجربة الجهاز الطرفي قم بتشغيلclaudeأو حددuseTerminal—يمكنك التبديل بين الواجهة الرسومية وسطر الأوامر كما تشاء.
08 الخلاصة
هذه المقالة نقلت Claude Code من الجهاز الطرفي إلى VS Code، وتتمحور حول هذه النقاط الرئيسية:
- الإضافة ≠ بديل لـ CLI: نفس المحرك، يتشاركان السجل والتكوين، استخدم الإضافة لكتابة الكود، وإذا كنت بحاجة إلى ميزات حصرية لـ CLI قم بالتبديل إلى الجهاز الطرفي.
- التحدي الأول بعد التثبيت هو العثور على الأيقونة: ابحث عن الناشر Anthropic، أيقونة Spark تظهر فقط عند فتح ملف، وإذا لم تجدها، استخدم المدخل الموجود في شريط الحالة بالأسفل.
- ثلاث ميزات رائعة للواجهة الرسومية: diff جنبًا إلى جنب (افهم قبل أن توافق، ويمكن التعديل فورًا)، الإشارة بـ
@/ تحديد الكود (توفير السياق بدقة)، المراجعة المخططة (رؤية الخطة أولاً، مع إمكانية التعليق سطرًا بسطر).
يجب أن تكون الآن قادرًا على تثبيت الإضافة بشكل مستقل، واستخدام diff جنبًا إلى جنب لمراجعة التغييرات، واستخدام @ والتحديد لتوفير السياق، والتبديل إلى وضع التخطيط قبل التغييرات الكبيرة. بمجرد أن تعتاد على سير العمل هذا، يمكنك الاعتماد عليه بثبات في كتابة الكود يوميًا.
المقالة التالية 09 تكامل JetBrains—إذا كان اعتمادك الأساسي على عائلة JetBrains مثل IntelliJ IDEA أو PyCharm، فإن Claude Code يمتلك أيضًا إضافة أصلية لها. سنلقي نظرة على ما يماثل وما يختلف عن إضافة VS Code، بالإضافة إلى بعض نقاط التكوين الخاصة بمستخدمي JetBrains.