إعدادات VSCode لتسريع VSCode 10 مرات

لنكن صريحين. لقد مررنا جميعًا بهذا الموقف. أنت في قمة تركيزك، الكود يتدفق بسلاسة، ثم... يبدأ VSCode بالتباطؤ. المؤشر يتلعثم، الإكمال التلقائي يأخذ استراحة قهوة، ومروحة حاسوبك المحمول تصدر صوتًا وكأنها تستعد للإقلاع. إنه أمر محبط، يكسر تركيزك، وبصراحة، إنه قاتل هائل للإنتاجية.

لفترة طويلة جدًا، كنت أتقبل هذا الأمر باعتباره ثمن استخدام محرر قوي وقابل للتوسيع. كنت أتنهد، أغلق بعض علامات التبويب، وأدعو لمعجزة. هذا حتى قررت أن أغوص عميقًا في جوهر المشكلة وأقوم بتحسين إعداداتي بشكل منهجي. والنتيجة؟ لم أحصل فقط على زيادة طفيفة في السرعة؛ بل حولت VSCode من مستهلك بطيء للموارد إلى آلة ترميز رشيقة وقوية، تشعر وكأنها أصبحت أسرع 10 مرات تقريبًا.

لم تكن الرحلة مجرد نسخ إعدادات بشكل أعمى من منتدى. بل كانت تدور حول فهم لماذا يصبح VSCode بطيئًا وتطبيق الإصلاحات بشكل منهجي.

وبالمناسبة، بينما نتحدث عن تحسين سير عمل المطورين لدينا، إذا كنت أيضًا متعبًا من التنقل بين Postman وSwagger وخوادم Mock لعمل API، فعليك أن تلقي نظرة على Apidog.

زر

في هذا المنشور، سأرشدك خلال الإعدادات والاستراتيجيات الدقيقة التي استخدمتها. سنتجاوز الأساسيات مثل "تعطيل إضافة أو اثنتين" ونتعمق في تفاصيل مراقبة الملفات، وتحسين TypeScript، ومصادر استنزاف الأداء الخفية. استعد لاستعادة بيئة التطوير الخاصة بك.

الجناة: لماذا VSCode الخاص بك بطيء جدًا؟

قبل أن نبدأ في تطبيق الإصلاحات، من الأهمية بمكان أن نفهم ما نواجهه. فكر في الأمر كتشخيص سيارة؛ لا تبدأ باستبدال الأجزاء عشوائيًا. تحتاج إلى معرفة ما الذي يسبب الصوت الغريب.

من خلال تحقيقي، حددت ثلاثة أشرار رئيسيين مسؤولين عن مشاكل أداء VSCode:

1. حِمل الإضافات الزائد: هذا هو، بلا شك، المذنب الأول. كل إضافة تقوم بتثبيتها تشبه تطبيقًا صغيرًا يعمل داخل VSCode. بعضها جيد التصرف وخفيف الوزن، لكن البعض الآخر وحوش تستهلك الموارد بشكل مكثف ويمكن أن تُركع محرر الكود بأكمله. تتفاقم المشكلة مع كل إضافة جديدة تضيفها.
2. هوس مراقبة الملفات: يحتوي VSCode على خدمة مدمجة تراقب ملفات مشروعك باستمرار بحثًا عن التغييرات. هذا ما يدعم ميزات مثل تحديث مستكشف الملفات المباشر وحالة Git في الشريط الجانبي. ومع ذلك، في المشاريع الكبيرة، خاصة تلك التي تحتوي على مجلدات ضخمة مثل node_modules أو dist أو build، يمكن لمراقب الملفات هذا أن يعمل بشكل مفرط، مستهلكًا كميات هائلة من وحدة المعالجة المركزية (CPU) والذاكرة بينما يحاول تتبع آلاف وآلاف الملفات.
3. إجهاد TypeScript وخادم اللغة: بالنسبة لأولئك منا في عالم TypeScript/JavaScript، فإن خادم اللغة (الذي يوفر IntelliSense، والتحقق من الأخطاء، وإعادة الهيكلة) هو صانع معجزات. لكن هذه القوة تأتي بثمن. في قواعد الكود الكبيرة، يمكن أن يكون التحقق المستمر من الأنواع والتحليل استنزافًا كبيرًا للأداء.

الآن بعد أن عرفنا الأعداء، دعنا نبني خطة معركتنا. سنتعامل مع هذه الأمور بترتيب تأثيرها.

المرحلة الأولى: تطهير الإضافات – أقوى رافعة لديك

هنا سترى التحسن الأكثر دراماتيكية. لقد انتقلت من 40 إضافة مثبتة بشكل كسول إلى 20 إضافة أساسية، ولم يكن الفرق قابلاً للقياس فحسب، بل كان ملموسًا.

الخطوة 1: تحديد الإضافات المستنزفة للموارد

أولاً، تحتاج إلى معرفة أي الإضافات تبطئك بالفعل. لحسن الحظ، يحتوي VSCode على أدوات مدمجة رائعة لهذا الغرض.

• افتح لوحة الأوامر باستخدام Ctrl+Shift+P (أو Cmd+Shift+P على Mac).
• اكتب وقم بتشغيل Developer: Show Running Extensions.

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

الخطوة 2: الضربة الجراحية باستخدام Extension Bisect

ماذا لو لم تكن تعرف أي إضافة تسبب المشكلة؟ تعطيلها يدويًا واحدة تلو الأخرى أمر مرهق. إليك أحد أفضل أسرار VSCode: Extension Bisect.

• افتح لوحة الأوامر مرة أخرى وقم بتشغيل Developer: Start Extension Bisect.

تستخدم هذه الميزة الرائعة خوارزمية البحث الثنائي. ستقوم بتعطيل نصف إضافاتك وتسألك عما إذا كانت المشكلة لا تزال موجودة. تقول نعم أو لا، وتقوم بتعطيل/تمكين النصف الآخر، مما يضيق نطاق الجاني بسرعة في بضع خطوات فقط. إنه مثل المحقق الذي يجد الممثل السيئ في قائمة إضافاتك بشكل منهجي.

الخطوة 3: التقليم بلا رحمة وإدارة مساحة العمل

بمجرد تحديد الإضافات التي تسبب مشاكل أو ببساطة غير مستخدمة، حان الوقت لتكون قاسيًا.

• التعطيل عالميًا: للإضافات التي لا تستخدمها أبدًا، ما عليك سوى النقر بزر الماوس الأيمن وتعطيلها عالميًا.
• التعطيل حسب مساحة العمل: هذا يغير قواعد اللعبة. لا تحتاج إلى أداة فحص Python الخاصة بك نشطة في مشروع React الخاص بك، والعكس صحيح. انقر بزر الماوس الأيمن على إضافة واختر "تعطيل (مساحة العمل)". هذا يبقيها ممكّنة للمشاريع الأخرى ولكنه يوقفها للمشروع الحالي، مما يوفر موارد قيمة.

علاوة على ذلك، لا تنسَ الإضافات المدمجة. ابحث عن @builtin في عرض الإضافات. قد تجد إضافات افتراضية للغات أو أطر عمل لا تستخدمها. تعطيل هذه الإضافات يمكن أن يوفر أيضًا دفعة أداء جيدة.

نتائج تطهير الإضافات الخاص بي

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

لم يبدأ محرري بشكل أسرع فحسب؛ بل شعر بأنه أكثر استجابة بشكل عام. هذه الخطوة الواحدة هي الإجراء الذي يحقق أعلى عائد على الاستثمار يمكنك اتخاذه.

المرحلة الثانية: ترويض مراقب نظام الملفات

بعد التعامل مع الإضافات، يأتي الفوز الأكبر التالي من التحكم في مراقب الملفات النهم في VSCode. هذه الخدمة ضرورية، لكنها لا تحتاج إلى مراقبة كل ملف واحد في مشروعك.

إعداد القوة files.watcherExclude

هذا الإعداد هو أفضل صديق لك. يخبر VSCode بالتوقف عن إهدار الموارد في مراقبة المجلدات التي تتغير كثيرًا ولكنها لا تؤثر على عمل التطوير الأساسي الخاص بك.

إليك التكوين الذي وضعته في ملف settings.json الخاص بي والذي أحدث فرقًا هائلاً في استخدام وحدة المعالجة المركزية (CPU) والذاكرة:

json

{
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  }
}

ماذا يفعل هذا: يتجاهل بشكل خاص كل الفوضى داخل node_modules، ومخرجات البناء الخاصة بك (dist، build)، ومكونات Git الداخلية، وأدلة التخزين المؤقت الأخرى. يتم تحديث هذه المجلدات بواسطة مديري الحزم وأدوات البناء، وليس بواسطتك مباشرة، لذلك لا توجد حاجة لـ VSCode لإرهاق نفسه بمراقبتها.

تنظيف إضافي: files.exclude و search.exclude

بينما أنت في ذلك، دعنا ننظف الشريط الجانبي الخاص بك ونسرع عمليات البحث.

• files.exclude: يخفي الملفات والمجلدات من الشريط الجانبي للمستكشف. هذا لا يوفر الكثير من الأداء، ولكنه يجعل شجرة مشروعك أنظف بكثير.
• search.exclude: هذا الإعداد يحسن الأداء بالفعل. يمنع VSCode من فهرسة والبحث في آلاف الملفات غير ذات الصلة في node_modules وأدلة البناء الأخرى، مما يجعل ميزة البحث سريعة بشكل لا يصدق.

تكويني:

json

{
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "__pycache__": true,
    ".next": true,
    "dist": true,
    "build": true
  },
  "search.exclude": {
    "node_modules": true,
    "bower_components": true,
    ".code-search": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  }
}

المرحلة الثالثة: تحسين محرك TypeScript الخاص بك

إذا كنت مطور TypeScript، يمكن أن يكون خادم اللغة استنزافًا صامتًا للموارد. إليك كيفية جعله أكثر كفاءة.

شحن ملف tsconfig.json الخاص بك

المكان الأول للبحث هو ملف tsconfig.json الخاص بمشروعك. يساعد التكوين الصحيح هنا مترجم TypeScript (وبالتالي VSCode) على تجنب العمل غير الضروري.

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    ".spec.ts",
    ".test.ts",
    "coverage"
  ]
}

خيار skipLibCheck: true مهم بشكل خاص. فهو يتخطى التحقق من النوع لملفات التعريف في node_modules، مما يمكن أن يقلل بشكل كبير من وقت الترجمة والتحليل.

إعدادات TypeScript الخاصة بـ VSCode

بعد ذلك، أضف هذه الإعدادات التي تركز على الأداء إلى ملف settings.json الخاص بـ VSCode:

json

{
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false
}

• "typescript.tsserver.log": "off": يوقف إخراج السجل الداخلي، مما يوفر عمليات الإدخال/الإخراج للقرص.
• "typescript.disableAutomaticTypeAcquisition": true: يمنع VSCode من محاولة تنزيل تعريفات الأنواع تلقائيًا لـ node_modules الخاص بك، وهي عملية يمكن أن تكون بطيئة وغير متوقعة.
• "typescript.tsserver.experimental.enableProjectDiagnostics": false: يقلل من حمل التشخيص، وهو أمر مفيد في المشاريع الكبيرة جدًا.

الخيار النووي: مسح ذاكرة التخزين المؤقت لـ TypeScript

في بعض الأحيان، يمكن أن تتلف ذاكرة التخزين المؤقت لخادم لغة TypeScript أو تنتفخ. مسحها يمكن أن يحل مشاكل الأداء الغريبة والاستخدام العالي للذاكرة.

• Windows: C:\\Users\\<اسم_المستخدم_الخاص_بك>\\AppData\\Local\\Microsoft\\TypeScript
• macOS: ~/Library/Caches/Microsoft/TypeScript
• Linux: ~/.cache/typescript

كلمة تحذير: هذا ليس إجراءً رسميًا، لذا قم به على مسؤوليتك الخاصة. ومع ذلك، في تجربتي، حذف هذه المجلدات آمن وغالبًا ما يكون له تأثير "إزالة الأتربة"، مما يجعل الأمور أكثر سرعة.

المرحلة الرابعة: تبسيط واجهة المستخدم

واجهة مستخدم VSCode غنية بالميزات، ولكنك لا تحتاج إلى عرض كل تلك البكسلات. تعطيل عناصر واجهة المستخدم التي لا تستخدمها يمكن أن يحرر موارد العرض، مما يجعل المحرر يبدو أكثر سلاسة.

إليك تحسينات واجهة المستخدم المفضلة لدي:

json

{
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

لقد وجدت أن الخريطة المصغرة (minimap) تستنزف الموارد بشكل خاص للملفات الأكبر حجمًا. كان إيقاف تشغيلها فوزًا فوريًا. وبالمثل، يمكن أن تكون CodeLens (تلك الروابط القابلة للتنفيذ مثل المراجع والتطبيقات فوق وظائفك) مكلفة للحساب والعرض.

المرحلة الخامسة: الضبط الدقيق للسلوكيات التلقائية

الأتمتة رائعة حتى تعترض طريقك.

الحفظ التلقائي والتنسيق

يمكن أن يتسبب الحفظ التلقائي والتنسيق العدواني في حدوث تأخيرات دقيقة أثناء الكتابة. لقد وجدت نقطة توازن جيدة مع هذه الإعدادات:

json

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

هذا يحفظ فقط عندما أتحول بعيدًا عن الملف الحالي، ويقوم بالتنسيق فقط عند الحفظ وليس مع كل ضغطة مفتاح أو لصق. هذا يمنع المنسق من العمل باستمرار في الخلفية بينما أحاول التفكير والكتابة.

تكامل Git

تكامل Git في VSCode مريح، لكن استقصاءه المستمر يمكن أن يكون استنزافًا.

json

{
  "git.enabled": true,
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false
}

هذا يبقي Git ممكّنًا ولكنه يوقف التحديث والجلب التلقائي. يمكنك دائمًا الجلب والتحديث يدويًا عندما تحتاج إلى ذلك. تعطيل الزخارف (الخطوط الملونة في الشريط الجانبي) يوفر أيضًا بعض الحمل الزائد على العرض.

تجميع كل شيء: ملف settings.json النهائي

حسنًا، دعنا نوحد كل شيء. إليك ملف settings.json الكامل والمشروح الذي يشكل العمود الفقري لتجربتي في VSCode الأسرع 10 مرات. هذا هو "نسخ ولصق واحد ليحكمهم جميعًا".

json

{
  // ===== استثناءات مراقبة الملفات (موفر لوحدة المعالجة المركزية والذاكرة) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== تنظيف الشريط الجانبي للمستكشف =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== تعزيز أداء البحث =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== تحسينات TypeScript =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== وضع واجهة المستخدم الخفيف =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== الحفظ التلقائي والتنسيق الذكي =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== تكامل Git الفعال =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== التعامل مع الملفات الكبيرة =====
  "files.maxMemoryForLargeFilesMB": 4096
}

التشخيصات المتقدمة والأفكار النهائية

إذا قمت بتطبيق كل هذه الإعدادات وما زلت فضوليًا، فإن VSCode لديه أداة قوية أخرى.

• قم بتشغيل Developer: Startup Performance من لوحة الأوامر.

يمنحك هذا تفصيلاً دقيقًا، بالمللي ثانية، لما يحدث أثناء بدء تشغيل VSCode. إنه رائع لتحديد أي اختناقات نهائية وعنيدة.

نهج شامل للأداء

تحسين VSCode هو خطوة رائعة، ولكن تذكر أن بيئة التطوير البطيئة يمكن أن يكون لها العديد من المصادر. تمامًا كما قمنا بتبسيط محرر الكود الخاص بنا، من المفيد استخدام أدوات تبسط أجزاء أخرى من سير عملنا. لهذا السبب قمت بدمج Apidog في عمليتي. يمكن أن تكون إدارة واجهات برمجة التطبيقات (APIs) مضيعة كبيرة للوقت إذا كانت أدواتك بطيئة أو غير متصلة. وجود حل سريع وشامل لتصميم وتصحيح واختبار واجهات برمجة التطبيقات يكمل بيئة الترميز عالية الأداء بشكل مثالي، مما يحافظ على حلقة التطوير بأكملها محكمة وفعالة.

في الختام، VSCode السريع ليس سحرًا. إنه يتعلق بالنية. إنه يتعلق بفهم المقايضات في الأدوات والإضافات التي نستخدمها واتخاذ خيارات واعية. من خلال التحكم في إضافاتك، ترويض مراقب الملفات، تحسين TypeScript، وتبسيط واجهة المستخدم، يمكنك بالتأكيد تحقيق شعور "أسرع 10 مرات".

إذن، ماذا تنتظر؟ افتح إعدادات VSCode الخاصة بك وابدأ رحلة التحسين الخاصة بك. ستشكرك وحدة المعالجة المركزية (CPU) الخاصة بك (وعقلك).

زر