دليل VS Code العملي: نصائح وأدوات أساسية للمطورين ذوي الكفاءة العالية

Visual Studio Code (VS Code) هو محرر أكواد مجاني ومفتوح المصدر ومتعدد المنصات، يحظى بشعبية كبيرة بين المطورين. يتميز بوظائفه القوية ونظامه البيئي الغني بالإضافات وواجهته البسيطة وسهلة الاستخدام. ستجمع هذه المقالة، بالاعتماد على المناقشات الأخيرة على X/Twitter، نصائح VS Code العملية وتوصيات الأدوات لمساعدتك على تحسين كفاءة التطوير.

ما الذي يجعل VS Code جذابًا؟

من خلال مناقشات X/Twitter، يمكننا أن نرى حماس المطورين لـ VS Code. ذكر @@freeCodeCamp عدة مرات انتشار VS Code وطبيعته المجانية، مع التأكيد على الوظائف الغنية التي يقدمها. شاركت @@chomado محررها المفضل وأوصت بوظائف الإضافة لمهندسي الواجهة الأمامية.

لتلخيص ذلك، تشمل المزايا الرئيسية لـ VS Code ما يلي:

• مجاني ومفتوح المصدر: يمكن لأي شخص استخدامه مجانًا والمشاركة في تطوير المجتمع.
• متعدد المنصات: يدعم أنظمة تشغيل متعددة مثل Windows و macOS و Linux.
• خفيف الوزن: سرعة تشغيل عالية واستهلاك منخفض للموارد.
• نظام بيئي قوي للإضافات: من خلال تثبيت الإضافات، يمكنك تحسين وظائف VS Code وتلبية احتياجات التطوير المختلفة.
• أدوات تصحيح الأخطاء المضمنة: يدعم تصحيح الأخطاء للعديد من لغات البرمجة، مما يسهل على المطورين تحديد المشكلات وحلها بسرعة.
• تكامل Git: يسهل على المطورين التحكم في الإصدار.
• اقتراحات ذكية: يوفر إكمال التعليمات البرمجية والتحقق من بناء الجملة ووظائف أخرى لتحسين كفاءة الترميز.

نصائح VS Code العملية: حسّن كفاءة التطوير لديك

1. إتقان اختصارات لوحة المفاتيح: يوفر VS Code مجموعة غنية من اختصارات لوحة المفاتيح، وإتقان هذه الاختصارات يمكن أن يحسن بشكل كبير من كفاءة التطوير. فيما يلي بعض اختصارات لوحة المفاتيح الشائعة:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): افتح لوحة الأوامر. هذه إحدى الوظائف الأساسية في VS Code، ويمكنك تنفيذ عمليات مختلفة من خلال لوحة الأوامر.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): افتح ملفًا بسرعة.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): انتقل بسرعة إلى الرموز (الدوال والفئات وما إلى ذلك).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): بحث شامل.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): حدد المطابقة التالية. يمكنك تحرير نصوص متطابقة متعددة في نفس الوقت.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): انسخ السطر الحالي إلى السطر التالي/السابق.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): تعليق/إلغاء تعليق السطر الحالي أو كتلة التعليمات البرمجية المحددة.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): حرّك السطر الحالي أو كتلة التعليمات البرمجية المحددة لأعلى/لأسفل.
   • Ctrl+K Ctrl+S: افتح واجهة إعدادات اختصارات لوحة المفاتيح، حيث يمكنك عرض اختصارات لوحة المفاتيح وتخصيصها.

2. الاستفادة من لوحة الأوامر: من خلال فتح لوحة الأوامر باستخدام Ctrl+Shift+P / Cmd+Shift+P، يمكنك تنفيذ عمليات مختلفة، على سبيل المثال:

   • Settings: افتح واجهة الإعدادات.

   • Extensions: Install Extension: تثبيت إضافة.

   • Git: Commit: إرسال تغييرات Git.

   • Format Document: تنسيق المستند الحالي.

   • Go to Symbol in Workspace: انتقل بسرعة إلى الرمز الموجود في مساحة العمل.3. إعدادات مخصصة: يسمح VS Code للمستخدمين بتخصيص إعدادات مختلفة، بما في ذلك السمات والخطوط وطرق المسافة البادئة وما إلى ذلك. يمكنك فتح واجهة الإعدادات من خلال File -> Preferences -> Settings، أو تحرير ملف settings.json مباشرة.

   • السمة: اختر السمة التي تفضلها، والتي يمكن أن تحسن راحة الترميز.

   • الخط: اختر الخط المناسب، والذي يمكن أن يحسن إمكانية قراءة التعليمات البرمجية. يوصى باستخدام خطوط أحادية المسافة، مثل Fira Code و JetBrains Mono وما إلى ذلك.

   • طريقة المسافة البادئة: قم بتعيين طريقة المسافة البادئة وفقًا لمواصفات المشروع، ويمكنك استخدام المسافات أو مفتاح Tab.

   • الحفظ التلقائي: قم بتمكين وظيفة الحفظ التلقائي لتجنب فقد التعليمات البرمجية بسبب نسيان الحفظ.

3. الاستفادة من مقتطفات التعليمات البرمجية (Code Snippets): يمكن أن تساعدك مقتطفات التعليمات البرمجية على إدراج كتل التعليمات البرمجية الشائعة بسرعة. يحتوي VS Code على بعض مقتطفات التعليمات البرمجية الشائعة المضمنة، ويمكنك أيضًا تخصيص مقتطفات التعليمات البرمجية.

   • افتح لوحة الأوامر، وأدخل Preferences: Configure User Snippets، وحدد اللغة التي تريد تحريرها، ثم يمكنك تحرير مقتطفات التعليمات البرمجية.
   • على سبيل المثال، يمكنك إنشاء مقتطف تعليمات برمجية clog لـ JavaScript لإدراج console.log() بسرعة:

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

4. استخدام التحرير متعدد المؤشرات: اضغط باستمرار على مفتاح Alt (Windows/Linux) / Option (macOS)، ثم انقر بالماوس لإنشاء مؤشرات في مواقع متعددة، وتحرير أسطر متعددة من التعليمات البرمجية في نفس الوقت. يمكنك أيضًا استخدام Ctrl+D / Cmd+D لتحديد المطابقة التالية للتحرير متعدد المؤشرات.

5. تقسيم المحرر: يمكنك تقسيم المحرر إلى نوافذ متعددة لعرض وتحرير ملفات متعددة في نفس الوقت. يمكنك استخدام الأمر View -> Editor Layout -> Split Editor لتقسيم المحرر.

6. التطوير عن بعد: يوفر VS Code ملحق Remote Development، والذي يسمح لك بتحرير التعليمات البرمجية على خادم بعيد محليًا. هذا مفيد جدًا لتطوير تطبيقات جانب الخادم.

7. استخدام VS Code في المتصفح: كما أشار @@Prathkum، من خلال زيارة vscode.dev، يمكنك استخدام VS Code مباشرة في المتصفح، وهو أمر مريح وسريع. هذا مفيد للتحرير المؤقت أو العمل على جهاز لم يتم تثبيت VS Code عليه. عمل @@CompuIves يزيد من تحسين هذا، حيث نجح في تشغيل VS Code مباشرة في المتصفح والاتصال بواجهة برمجة تطبيقات CodeSandbox.

توصيات أدوات VS Code: قم بإنشاء IDE المخصص الخاص بك

تكمن قوة VS Code في نظام الملحقات الغني الخاص به. فيما يلي بعض توصيات الملحقات الشائعة:

• Prettier: أداة تنسيق التعليمات البرمجية، يمكنها تنسيق التعليمات البرمجية تلقائيًا والحفاظ على اتساق نمط التعليمات البرمجية.

  ext install esbenp.prettier-vscode
  

• ESLint: أداة فحص كود JavaScript، يمكنها فحص الأخطاء والمشاكل المحتملة في التعليمات البرمجية.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** أداة للحفاظ على اتساق نمط الكود بين المحررات المختلفة.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: تشغيل سريع لخادم محلي، لتسهيل تصحيح أخطاء كود الواجهة الأمامية. @@ThreatSynop ذكر ثغرة أمنية في Live Server، لتذكير المطورين بالانتباه إلى الأمان عند استخدام الإضافة.

  ext install ritwickdey.LiveServer
  

• Code Runner: يدعم تشغيل العديد من لغات البرمجة، لتسهيل الاختبار السريع لمقتطفات الكود. وبالمثل، أشار @@ThreatSynop أيضًا إلى ثغرة أمنية في Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: إضافة تعزز وظائف Git، ويمكنها عرض سجل التزام الكود ومعلومات المؤلف وما إلى ذلك.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: تلوين أزواج الأقواس، لتسهيل عرض بنية الكود.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (مقدمة من Microsoft) إكمال الكود بمساعدة الذكاء الاصطناعي، ويمكنها تقديم اقتراحات كود أكثر ذكاءً بناءً على السياق.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (مقدمة من GitHub، مدفوعة) مساعد كود بالذكاء الاصطناعي، يمكنه إنشاء مقتطفات كود ووظائف وحتى ملفات كاملة بناءً على التعليمات البرمجية الخاصة بك. ذكر @@aadhilkh فعالية تكلفة استخدام VS Code Copilot.

• Markdown Preview Enhanced: إضافة أفضل لمعاينة Markdown. أشار @@ThreatSynop أيضًا إلى وجود مشكلات أمنية في هذه الإضافة، والتي يجب الانتباه إليها.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: تتضمن إضافات مثل SSH و Containers و WSL، لتسهيل التطوير عن بعد.

حول تكامل LLM و VS Code

ظهرت أيضًا بعض المناقشات حول تكامل LLM و VS Code على X/Twitter. شارك @@akshay_pachaar طريقة لتدريب LLM في VS Code. ذكر @@MacopeninSUTABA تكامل وكيل ترميز الذكاء الاصطناعي "Claude Code" من Anthropic مع VS Code. تشير كل هذه إلى أن الذكاء الاصطناعي سيلعب دورًا متزايد الأهمية في التطوير المستقبلي.

نصائح الأمان

كما ذكر @@ThreatSynop، توجد ثغرات أمنية في بعض إضافات VS Code، والتي قد تؤدي إلى سرقة الملفات وتنفيذ التعليمات البرمجية عن بُعد. لذلك، عند استخدام الإضافات، انتبه إلى النقاط التالية:

• اختر الإضافات الرسمية أو ذات السمعة الطيبة.
• قم بتحديث الإضافات بانتظام.
• اقرأ بعناية أوصاف أذونات الإضافة.
• قم بتثبيت أدوات فحص الكود، مثل ESLint، والتي يمكن أن تساعدك في اكتشاف المشكلات المحتملة في التعليمات البرمجية الخاصة بك.
• تابع إعلانات الأمان الخاصة بـ VS Code والإضافات، وقم بإصلاح الثغرات الأمنية في الوقت المناسب.## ملخص

VS Code كمحرر أكواد قوي، يمتلك العديد من التقنيات العملية ونظام بيئي غني بالإضافات، يمكن أن يساعد المطورين على تحسين كفاءة التطوير. من خلال إتقان اختصارات لوحة المفاتيح، والإعدادات المخصصة، واستخدام مقتطفات التعليمات البرمجية، وتثبيت الإضافات المناسبة، يمكنك تحويل VS Code إلى IDE خاص بك. في الوقت نفسه، يجب الانتباه إلى مشكلات الأمان، واختيار الإضافات الرسمية أو ذات السمعة الطيبة، وتحديث الإضافات بانتظام. آمل أن يكون هذا المقال مفيدًا لك!