Meine VSCode Einstellungen für 10x schnelleres VSCode

Seien wir ehrlich. Wir alle kennen das. Man ist im Fluss, der Code fließt, und dann... fängt VSCode an zu laggen. Der Cursor stottert, die Autovervollständigung macht eine Kaffeepause, und der Laptop-Lüfter klingt, als würde er sich auf den Start vorbereiten. Das ist frustrierend, es unterbricht die Konzentration und ist, ehrlich gesagt, ein enormer Produktivitätskiller.

Lange Zeit habe ich das einfach als den Preis für die Nutzung eines leistungsstarken, erweiterbaren Editors hingenommen. Ich seufzte, schloss ein paar Tabs und betete für ein Wunder. Das änderte sich, als ich beschloss, tief in das Innere des Systems einzutauchen und meine Einrichtung systematisch zu optimieren. Das Ergebnis? Ich habe nicht nur einen kleinen Geschwindigkeitsschub bekommen; ich habe VSCode von einem trägen Ressourcenfresser in eine schlanke, effiziente Coding-Maschine verwandelt, die sich fast 10x schneller anfühlt.

Die Reise bestand nicht nur darin, blind Einstellungen aus einem Forum zu kopieren. Es ging darum zu verstehen, warum VSCode langsam wird und methodisch Korrekturen anzuwenden.

Und hey, wo wir gerade über die Optimierung unseres Entwickler-Workflows sprechen: Wenn Sie es leid sind, für API-Arbeiten zwischen Postman, Swagger und Mock-Servern zu jonglieren, sollten Sie sich unbedingt Apidog ansehen.

In diesem Beitrag werde ich Ihnen die genauen Einstellungen und Strategien vorstellen, die ich verwendet habe. Wir werden über das einfache "Deaktivieren ein oder zwei Erweiterungen" hinausgehen und uns mit den Details der Dateiüberwachung, der TypeScript-Optimierung und versteckten Leistungsbremsen befassen. Machen Sie sich bereit, Ihre Entwicklungsumgebung zurückzuerobern.

Die Übeltäter: Warum ist Ihr VSCode so langsam?

Bevor wir mit der Anwendung von Korrekturen beginnen, ist es entscheidend zu verstehen, womit wir es zu tun haben. Stellen Sie es sich wie die Diagnose eines Autos vor; Sie fangen nicht einfach an, Teile zufällig auszutauschen. Sie müssen wissen, was das klopfende Geräusch verursacht.

Durch meine Untersuchung habe ich drei Hauptübeltäter identifiziert, die für die Leistungsprobleme von VSCode verantwortlich sind:

1. Erweiterungsüberladung: Dies ist, ohne Zweifel, der Hauptschuldige Nummer eins. Jede Erweiterung, die Sie installieren, ist wie eine kleine App, die in VSCode läuft. Einige sind gutmütig und leichtgewichtig, aber andere sind ressourcenintensive Monster, die Ihren gesamten Editor in die Knie zwingen können. Das Problem verschärft sich mit jeder neuen Erweiterung, die Sie hinzufügen.
2. Der Dateiüberwachungs-Wahn: VSCode verfügt über einen integrierten Dienst, der Ihre Projektdateien ständig auf Änderungen überwacht. Dies ermöglicht Funktionen wie die Live-Aktualisierung des Datei-Explorers und den Git-Status in der Seitenleiste. In großen Projekten, insbesondere solchen mit riesigen node_modules-, dist- oder build-Ordnern, kann dieser Dateiüberwacher jedoch überdrehen und enorme Mengen an CPU und Speicher verbrauchen, während er versucht, Tausende über Tausende von Dateien zu verfolgen.
3. TypeScript & Language Server Belastung: Für diejenigen von uns in der TypeScript/JavaScript-Welt ist der Language Server (der IntelliSense, Fehlerprüfung und Refactoring bereitstellt) ein Wundertäter. Aber diese Leistung hat ihren Preis. Bei großen Codebasen kann die ständige Typenprüfung und Analyse eine erhebliche Belastung für die Leistung darstellen.

Nun, da wir die Feinde kennen, lassen Sie uns unseren Schlachtplan erstellen. Wir werden diese in der Reihenfolge ihrer Auswirkungen angehen.

Phase 1: Die Erweiterungsbereinigung – Ihr mächtigster Hebel

Hier werden Sie die dramatischste Verbesserung sehen. Ich bin von 40 nachlässig installierten Erweiterungen auf 20 essentielle umgestiegen, und der Unterschied war nicht nur messbar – er war spürbar.

Schritt 1: Ressourcenfresser identifizieren

Zuerst müssen Sie herausfinden, welche Erweiterungen Sie tatsächlich ausbremsen. Glücklicherweise verfügt VSCode über fantastische integrierte Tools dafür.

• Öffnen Sie die Befehlspalette mit Strg+Umschalt+P (oder Cmd+Umschalt+P auf Mac).
• Geben Sie Developer: Show Running Extensions ein und führen Sie es aus.

Dies öffnet ein Panel, das Ihnen jede laufende Erweiterung und, am wichtigsten, ihre "Aktivierungszeit" anzeigt. Dies ist die Zeit, die die Erweiterung zum Starten benötigt. Erweiterungen mit einer hohen Aktivierungszeit sind oft diejenigen, die den größten Einfluss auf Ihre Startleistung haben. Diese Liste zum ersten Mal zu sehen, war für mich eine echte Offenbarung.

Schritt 2: Der chirurgische Schlag mit Extension Bisect

Was, wenn Sie nicht wissen, welche Erweiterung das Problem verursacht? Sie manuell einzeln zu deaktivieren, ist mühsam. Hier kommt eines der bestgehüteten Geheimnisse von VSCode ins Spiel: Extension Bisect.

• Öffnen Sie die Befehlspalette erneut und führen Sie Developer: Start Extension Bisect aus.

Diese brillante Funktion verwendet einen binären Suchalgorithmus. Sie deaktiviert die Hälfte Ihrer Erweiterungen und fragt Sie, ob das Problem immer noch besteht. Sie sagen ja oder nein, und es deaktiviert/aktiviert eine weitere Hälfte, wodurch der Übeltäter in nur wenigen Schritten schnell eingegrenzt wird. Es ist wie ein Detektiv, der systematisch den Übeltäter in Ihrer Erweiterungsliste findet.

Schritt 3: Schonungsloses Beschneiden und Workspace-Management

Sobald Sie die problematischen oder einfach ungenutzten Erweiterungen identifiziert haben, ist es Zeit, rücksichtslos zu sein.

• Global deaktivieren: Für Erweiterungen, die Sie nie verwenden, klicken Sie einfach mit der rechten Maustaste und deaktivieren Sie sie global.
• Pro Arbeitsbereich deaktivieren: Das ist ein Wendepunkt. Sie benötigen Ihren Python-Linter nicht in Ihrem React-Projekt und umgekehrt. Klicken Sie mit der rechten Maustaste auf eine Erweiterung und wählen Sie "Deaktivieren (Arbeitsbereich)". Dies hält sie für andere Projekte aktiviert, schaltet sie aber für Ihr aktuelles Projekt aus, was wertvolle Ressourcen spart.

Vergessen Sie außerdem nicht die integrierten Erweiterungen. Suchen Sie nach @builtin in der Erweiterungsansicht. Möglicherweise finden Sie Standarderweiterungen für Sprachen oder Frameworks, die Sie nicht verwenden. Das Deaktivieren dieser kann ebenfalls einen netten kleinen Leistungsschub bewirken.

Die Ergebnisse meiner Erweiterungsbereinigung

Reden wir über Zahlen. Ich habe die Startleistung meines VSCode vor und nach der großen Erweiterungsbereinigung gemessen. Die Ergebnisse waren überwältigend:

Mein Editor startete nicht nur schneller; er fühlte sich insgesamt reaktionsfreudiger an. Dieser einzelne Schritt ist die Maßnahme mit dem höchsten Return-on-Investment, die Sie ergreifen können.

Phase 2: Den Dateisystem-Watcher zähmen

Nachdem wir uns mit Erweiterungen befasst haben, kommt der nächste große Erfolg durch die Kontrolle des unersättlichen Datei-Watchers von VSCode. Dieser Dienst ist unerlässlich, aber er muss nicht jede einzelne Datei in Ihrem Projekt überwachen.

Die leistungsstarke Einstellung files.watcherExclude

Diese Einstellung ist Ihr bester Freund. Sie weist VSCode an, keine Ressourcen mehr zu verschwenden, indem es Ordner überwacht, die sich oft ändern, aber Ihre zentrale Entwicklungsarbeit nicht beeinflussen.

Hier ist die Konfiguration, die ich in meine settings.json eingefügt habe und die einen massiven Unterschied im CPU- und Speichernutzung gemacht hat:

JSON

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

Was das bewirkt: Es ignoriert gezielt das gesamte Chaos innerhalb von node_modules, Ihre Build-Ausgaben (dist, build), Git-Interna und andere Cache-Verzeichnisse. Diese Ordner werden von Paketmanagern und Build-Tools aktualisiert, nicht direkt von Ihnen, daher muss sich VSCode nicht erschöpfen, indem es sie überwacht.

Bonus-Bereinigung: files.exclude und search.exclude

Wenn Sie schon dabei sind, lassen Sie uns Ihre Seitenleiste aufräumen und Suchen beschleunigen.

• files.exclude: Blendet Dateien und Ordner aus der Explorer-Seitenleiste aus. Dies spart nicht viel Leistung, macht aber Ihren Projektbaum viel übersichtlicher.
• search.exclude: Diese verbessert die Leistung. Sie verhindert, dass VSCode Tausende irrelevanter Dateien in node_modules und anderen Build-Verzeichnissen indiziert und durchsucht, wodurch die Suchfunktion unglaublich schnell wird.

Meine Konfiguration:

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
  }
}

Phase 3: Optimierung Ihrer TypeScript-Engine

Wenn Sie ein TypeScript-Entwickler sind, kann der Sprachserver ein stiller Ressourcenfresser sein. So machen Sie ihn effizienter.

Boosten Sie Ihre tsconfig.json

Der erste Ort, an dem Sie suchen sollten, ist die tsconfig.json Ihres Projekts. Eine korrekte Konfiguration hier hilft dem TypeScript-Compiler (und damit VSCode), unnötige Arbeit zu vermeiden.

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"
  ]
}

Die Option skipLibCheck: true ist besonders wichtig. Sie überspringt die Typenprüfung von Deklarationsdateien in node_modules, was die Kompilierungs- und Analysezeit drastisch reduzieren kann.

VSCode-spezifische TypeScript-Einstellungen

Fügen Sie als Nächstes diese leistungsbezogenen Einstellungen zu Ihrer VSCode settings.json hinzu:

JSON

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

• "typescript.tsserver.log": "off": Stoppt die interne Protokollausgabe und spart so Festplatten-I/O.
• "typescript.disableAutomaticTypeAcquisition": true: Verhindert, dass VSCode automatisch versucht, Typdefinitionen für Ihre node_modules herunterzuladen, ein Prozess, der langsam und unvorhersehbar sein kann.
• "typescript.tsserver.experimental.enableProjectDiagnostics": false: Reduziert die Diagnosebelastung, was bei sehr großen Projekten hilfreich ist.

Die Nuklearoption: Den TypeScript-Cache leeren

Manchmal kann der Cache des TypeScript Language Servers beschädigt oder aufgebläht werden. Das Leeren kann seltsame Leistungsprobleme und hohen Speicherverbrauch beheben.

• Windows: C:\\Users\\<IhrBenutzername>\\AppData\\Local\\Microsoft\\TypeScript
• macOS: ~/Library/Caches/Microsoft/TypeScript
• Linux: ~/.cache/typescript

Ein Wort der Vorsicht: Dies ist kein offizielles Verfahren, daher tun Sie es auf eigenes Risiko. Nach meiner Erfahrung ist das Löschen dieser Ordner jedoch sicher und hat oft einen "Staubwedel-Effekt", der die Dinge flüssiger macht.

Phase 4: Optimierung der Benutzeroberfläche

Die Benutzeroberfläche von VSCode ist funktionsreich, aber Sie benötigen nicht alle diese gerenderten Pixel. Das Deaktivieren von UI-Elementen, die Sie nicht verwenden, kann Rendering-Ressourcen freigeben und den Editor flüssiger erscheinen lassen.

Hier sind meine bevorzugten UI-Optimierungen:

JSON

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

Ich empfand die Minimap als einen besonderen Ressourcenfresser bei größeren Dateien. Das Ausschalten war ein sofortiger Gewinn. Ähnlich kann CodeLens (diese anklickbaren Links wie Referenzen und Implementierungen über Ihren Funktionen) teuer in der Berechnung und Darstellung sein.

Phase 5: Feinabstimmung automatischer Verhaltensweisen

Automatisierung ist großartig, bis sie im Weg steht.

Automatisches Speichern und Formatieren

Aggressives automatisches Speichern und Formatieren kann beim Tippen zu Mikroverzögerungen führen. Ich habe mit diesen Einstellungen einen optimalen Punkt gefunden:

JSON

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

Dies speichert nur, wenn ich von der aktuellen Datei wechsle, und es formatiert nur beim Speichern, nicht bei jedem Tastendruck oder Einfügen. Dies verhindert, dass der Formatierer ständig im Hintergrund läuft, während ich versuche zu denken und zu tippen.

Git-Integration

Die Git-Integration von VSCode ist praktisch, aber ihr ständiges Abfragen kann eine Belastung sein.

JSON

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

Dies hält Git aktiviert, schaltet aber das automatische Aktualisieren und Abrufen aus. Sie können jederzeit manuell abrufen und aktualisieren, wenn Sie es benötigen. Das Deaktivieren von Dekorationen (die farbigen Linien in der Seitenleiste) spart ebenfalls etwas Rendering-Overhead.

Alles zusammenfügen: Die ultimative settings.json

Gut, fassen wir alles zusammen. Hier ist die vollständige, kommentierte settings.json, die das Rückgrat meiner 10x schnelleren VSCode-Erfahrung bildet. Dies ist das "eine Kopieren-Einfügen, um sie alle zu beherrschen".

JSON

{
  // ===== DATEIÜBERWACHUNGSAUSSCHLÜSSE (CPU- & Speicherschoner) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== EXPLORER-SEITENLEISTE BEREINIGEN =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== SUCHLEISTUNG OPTIMIEREN =====
  "search.exclude": {
    "node_modules": true,
    "bower_components": true,
    ".code-search": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== TYPESCRIPT-OPTIMIERUNGEN =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== UI LEICHTGEWICHTSMODUS =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== SMARTES AUTOMATISCHES SPEICHERN & FORMATIEREN =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== EFFIZIENTE GIT-INTEGRATION =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== GROSSE DATEIEN HANDHABEN =====
  "files.maxMemoryForLargeFilesMB": 4096
}

Erweiterte Diagnose und abschließende Gedanken

Wenn Sie all diese Einstellungen angewendet haben und immer noch neugierig sind, hat VSCode noch ein weiteres leistungsstarkes Tool.

• Führen Sie Developer: Startup Performance aus der Befehlspalette aus.

Dies gibt Ihnen eine detaillierte, Millisekunde für Millisekunde aufgeschlüsselte Übersicht darüber, was während des Starts von VSCode passiert. Es ist fantastisch, um letzte, hartnäckige Engpässe zu identifizieren.

Ein ganzheitlicher Ansatz zur Leistung

Die Optimierung von VSCode ist ein fantastischer Schritt, aber denken Sie daran, dass eine langsame Entwicklungsumgebung viele Ursachen haben kann. So wie wir unseren Code-Editor optimiert haben, lohnt es sich, Tools zu verwenden, die andere Teile unseres Workflows optimieren. Deshalb habe ich Apidog in meinen Prozess integriert. Die Verwaltung von APIs kann ein enormer Zeitfresser sein, wenn Ihre Tools langsam oder getrennt sind. Eine schnelle, All-in-One-Lösung zum Entwerfen, Debuggen und Testen von APIs ergänzt eine Hochleistungs-Coding-Umgebung perfekt und hält den gesamten Entwicklungszyklus straff und effizient.

Zusammenfassend lässt sich sagen: Ein schnelles VSCode ist keine Magie. Es geht um Absichtlichkeit. Es geht darum, die Kompromisse der von uns verwendeten Tools und Erweiterungen zu verstehen und bewusste Entscheidungen zu treffen. Indem Sie die Kontrolle über Ihre Erweiterungen übernehmen, den Datei-Watcher zähmen, TypeScript optimieren und die Benutzeroberfläche optimieren, können Sie dieses "10x schnellere" Gefühl absolut erreichen.

Also, worauf warten Sie noch? Öffnen Sie Ihre VSCode-Einstellungen und beginnen Sie Ihre eigene Optimierungsreise. Ihre CPU (und Ihr Verstand) werden es Ihnen danken.