Mes paramètres VSCode pour accélérer VSCode x10

Soyons honnêtes. Nous sommes tous passés par là. Vous êtes dans votre bulle, le code coule à flots, et puis... VSCode commence à ralentir. Le curseur saccade, l'autocomplétion prend une pause café, et le ventilateur de votre ordinateur portable donne l'impression de se préparer au décollage. C'est frustrant, cela brise votre concentration, et franchement, c'est un énorme frein à la productivité.

Pendant très longtemps, j'ai simplement accepté cela comme le prix à payer pour utiliser un éditeur puissant et extensible. Je soupirais, fermais quelques onglets et priais pour un miracle. C'est du moins ce que je faisais, jusqu'à ce que je décide de plonger au cœur du problème et d'optimiser systématiquement ma configuration. Le résultat ? Je n'ai pas seulement obtenu un petit gain de vitesse ; j'ai transformé VSCode d'un glouton en ressources lent en une machine de codage épurée et efficace, qui semble presque 10 fois plus rapide.

Le parcours ne consistait pas seulement à copier aveuglément des paramètres d'un forum. Il s'agissait de comprendre pourquoi VSCode ralentit et d'appliquer méthodiquement des correctifs.

Et tant que nous parlons d'optimisation de notre flux de travail de développeur, si vous en avez marre de jongler entre Postman, Swagger et les serveurs Mock pour le travail d'API, vous devez absolument jeter un œil à Apidog.

Dans cet article, je vais vous guider à travers les paramètres et les stratégies exacts que j'ai utilisés. Nous irons au-delà du simple "désactiver une ou deux extensions" et nous plongerons dans les détails de la surveillance des fichiers, de l'optimisation TypeScript et des drains de performance cachés. Préparez-vous à récupérer votre environnement de développement.

Les Coupables : Pourquoi Votre VSCode Est-il Si Lent ?

Avant de commencer à appliquer des correctifs, il est crucial de comprendre à quoi nous sommes confrontés. Pensez-y comme au diagnostic d'une voiture ; vous ne commencez pas à remplacer des pièces au hasard. Vous devez savoir ce qui cause le bruit.

Au cours de mon enquête, j'ai identifié trois principaux coupables responsables des problèmes de performance de VSCode :

1. Surcharge d'extensions : C'est, de loin, le coupable numéro un. Chaque extension que vous installez est comme une petite application fonctionnant à l'intérieur de VSCode. Certaines sont bien conçues et légères, mais d'autres sont des monstres gourmands en ressources qui peuvent mettre votre éditeur entier à genoux. Le problème s'aggrave avec chaque nouvelle extension que vous ajoutez.
2. La frénésie de la surveillance des fichiers : VSCode dispose d'un service intégré qui surveille constamment les fichiers de votre projet à la recherche de modifications. C'est ce qui alimente des fonctionnalités comme la mise à jour en direct de l'explorateur de fichiers et le statut Git dans la barre latérale. Cependant, dans les grands projets, en particulier ceux avec d'énormes dossiers node_modules, dist ou build, ce surveillant de fichiers peut s'emballer, consommant des quantités insensées de CPU et de mémoire en essayant de suivre des milliers et des milliers de fichiers.
3. La tension de TypeScript et du serveur de langage : Pour ceux d'entre nous qui évoluent dans le monde TypeScript/JavaScript, le serveur de langage (qui fournit l'IntelliSense, la vérification des erreurs et le refactoring) est un miracle. Mais cette puissance a un coût. Sur les grandes bases de code, la vérification et l'analyse constantes des types peuvent être un drain significatif sur les performances.

Maintenant que nous connaissons les ennemis, élaborons notre plan de bataille. Nous les aborderons par ordre d'impact.

Phase 1 : La Purge des Extensions – Votre Levier le Plus Puissant

C'est ici que vous verrez l'amélioration la plus spectaculaire. Je suis passé de 40 extensions installées paresseusement à 20 extensions essentielles, et la différence n'était pas seulement mesurable, elle était palpable.

Étape 1 : Identifier les Gros Consommateurs de Ressources

Tout d'abord, vous devez voir quelles extensions vous ralentissent réellement. Heureusement, VSCode dispose d'excellents outils intégrés pour cela.

• Ouvrez la palette de commandes avec Ctrl+Shift+P (ou Cmd+Shift+P sur Mac).
• Tapez et exécutez Developer: Show Running Extensions (Développeur : Afficher les extensions en cours d'exécution).

Cela ouvre un panneau qui vous montre chaque extension en cours d'exécution et, surtout, son "Temps d'activation". C'est le temps qu'il faut à l'extension pour démarrer. Les extensions avec un temps d'activation élevé sont souvent celles qui ont le plus grand impact sur les performances de démarrage. Voir cette liste pour la première fois a été une véritable révélation pour moi.

Étape 2 : L'Attaque Chirurgicale avec la Bissection d'Extensions

Que faire si vous ne savez pas quelle extension est à l'origine du problème ? Les désactiver manuellement une par une est fastidieux. Voici l'un des secrets les mieux gardés de VSCode : la Bissection d'Extensions.

• Ouvrez à nouveau la palette de commandes et exécutez Developer: Start Extension Bisect (Développeur : Démarrer la bissection d'extensions).

Cette fonctionnalité brillante utilise un algorithme de recherche binaire. Elle désactivera la moitié de vos extensions et vous demandera si le problème persiste. Vous répondez oui ou non, et elle désactive/active une autre moitié, réduisant rapidement le coupable en quelques étapes seulement. C'est comme un détective qui trouve systématiquement le mauvais acteur dans votre liste d'extensions.

Étape 3 : Élagage Impitoyable et Gestion de l'Espace de Travail

Une fois que vous avez identifié les extensions problématiques ou simplement inutilisées, il est temps d'être impitoyable.

• Désactiver globalement : Pour les extensions que vous n'utilisez jamais, faites un clic droit et désactivez-les globalement.
• Désactiver par espace de travail : C'est un changement majeur. Vous n'avez pas besoin de votre linter Python actif dans votre projet React, et vice versa. Faites un clic droit sur une extension et sélectionnez "Désactiver (Espace de travail)". Cela la maintient activée pour d'autres projets mais la désactive pour votre projet actuel, économisant de précieuses ressources.

De plus, n'oubliez pas les extensions intégrées. Recherchez @builtin dans la vue des extensions. Vous pourriez trouver des extensions par défaut pour des langages ou des frameworks que vous n'utilisez pas. Les désactiver peut également apporter un petit coup de pouce aux performances.

Les Résultats de Ma Purge d'Extensions

Parlons chiffres. J'ai mesuré les performances de démarrage de mon VSCode avant et après la grande purge des extensions. Les résultats ont été stupéfiants :

Mon éditeur n'a pas seulement démarré plus vite ; il était globalement plus réactif. Cette seule étape est l'action la plus rentable que vous puissiez entreprendre.

Phase 2 : Maîtriser le Surveillant de Système de Fichiers

Après avoir géré les extensions, le prochain grand gain vient du contrôle du surveillant de fichiers insatiable de VSCode. Ce service est essentiel, mais il n'a pas besoin de surveiller chaque fichier de votre projet.

Le paramètre puissant files.watcherExclude

Ce paramètre est votre meilleur ami. Il indique à VSCode d'arrêter de gaspiller des ressources à surveiller des dossiers qui changent souvent mais n'affectent pas votre travail de développement principal.

Voici la configuration que j'ai ajoutée à mon settings.json et qui a fait une énorme différence en termes d'utilisation du CPU et de la mémoire :

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

Ce que cela fait : Cela ignore spécifiquement tout le chaos à l'intérieur de node_modules, vos sorties de build (dist, build), les internes de Git et d'autres répertoires de cache. Ces dossiers sont mis à jour par les gestionnaires de paquets et les outils de build, pas directement par vous, il n'est donc pas nécessaire que VSCode s'épuise à les surveiller.

Nettoyage bonus : files.exclude et search.exclude

Pendant que vous y êtes, nettoyons votre barre latérale et accélérons les recherches.

• files.exclude : Masque les fichiers et les dossiers de la barre latérale de l'explorateur. Cela n'économise pas beaucoup de performances, mais cela rend l'arborescence de votre projet beaucoup plus propre.
• search.exclude : Celui-ci améliore les performances. Il empêche VSCode d'indexer et de rechercher des milliers de fichiers non pertinents dans node_modules et d'autres répertoires de build, rendant la fonction de recherche incroyablement rapide.

Ma configuration :

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 : Optimisation de Votre Moteur TypeScript

Si vous êtes un développeur TypeScript, le serveur de langage peut être une source silencieuse de consommation de ressources. Voici comment le rendre plus efficace.

Boostez votre tsconfig.json

Le premier endroit où chercher est le tsconfig.json de votre projet. Une bonne configuration ici aide le compilateur TypeScript (et par extension, VSCode) à éviter un travail inutile.

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

L'option skipLibCheck: true est particulièrement importante. Elle ignore la vérification de type des fichiers de déclaration dans node_modules, ce qui peut réduire considérablement le temps de compilation et d'analyse.

Paramètres TypeScript spécifiques à VSCode

Ensuite, ajoutez ces paramètres axés sur les performances à votre settings.json de VSCode :

json

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

• "typescript.tsserver.log": "off" : Arrête la sortie des logs internes, économisant les E/S disque.
• "typescript.disableAutomaticTypeAcquisition": true" : Empêche VSCode d'essayer de télécharger automatiquement les définitions de types pour vos node_modules, un processus qui peut être lent et imprévisible.
• "typescript.tsserver.experimental.enableProjectDiagnostics": false" : Réduit la charge de diagnostic, ce qui est utile dans de très grands projets.

L'option nucléaire : Vider le cache TypeScript

Parfois, le cache du serveur de langage TypeScript peut être corrompu ou gonflé. Le vider peut résoudre des problèmes de performance étranges et une utilisation élevée de la mémoire.

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

Un mot de prudence : Ce n'est pas une procédure officielle, alors faites-le à vos risques et périls. Cependant, d'après mon expérience, la suppression de ces dossiers est sûre et a souvent un effet de "nettoyage des toiles d'araignée", rendant les choses plus rapides.

Phase 4 : Rationalisation de l'Interface Utilisateur

L'interface utilisateur de VSCode est riche en fonctionnalités, mais vous n'avez pas besoin que tous ces pixels soient rendus. La désactivation des éléments d'interface utilisateur que vous n'utilisez pas peut libérer des ressources de rendu, rendant l'éditeur plus fluide.

Voici mes optimisations d'interface utilisateur préférées :

json

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

J'ai constaté que la minimap était un gouffre de ressources, en particulier pour les fichiers volumineux. La désactiver a été un gain instantané. De même, CodeLens (ces liens cliquables comme les références et les implémentations au-dessus de vos fonctions) peut être coûteux à calculer et à rendre.

Phase 5 : Affiner les Comportements Automatiques

L'automatisation est géniale jusqu'à ce qu'elle devienne un obstacle.

Sauvegarde automatique et formatage

Une sauvegarde et un formatage automatiques agressifs peuvent provoquer des micro-ralentissements pendant que vous tapez. J'ai trouvé un juste milieu avec ces paramètres :

json

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

Cela ne sauvegarde que lorsque je quitte le fichier actuel, et cela formate uniquement à la sauvegarde, pas à chaque frappe ou collage. Cela empêche le formateur de s'exécuter constamment en arrière-plan pendant que j'essaie de réfléchir et de taper.

Intégration Git

L'intégration Git de VSCode est pratique, mais son interrogation constante peut être un drain.

json

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

Ceci maintient Git activé mais désactive le rafraîchissement et la récupération automatiques. Vous pouvez toujours récupérer et rafraîchir manuellement lorsque vous en avez besoin. La désactivation des décorations (les lignes colorées dans la barre latérale) permet également d'économiser un peu de surcharge de rendu.

Tout Rassembler : Le settings.json Ultime

Très bien, consolidons tout. Voici le settings.json complet et annoté qui constitue l'épine dorsale de mon expérience VSCode 10 fois plus rapide. C'est le "un copier-coller pour les gouverner tous".

json

{
  // ===== EXCLUSIONS DE SURVEILLANCE DE FICHIERS (Économie CPU & Mémoire) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== NETTOYER LA BARRE LATÉRALE DE L'EXPLORATEUR =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== OPTIMISER LES PERFORMANCES DE RECHERCHE =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

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

  // ===== MODE LÉGER DE L'INTERFACE UTILISATEUR =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== SAUVEGARDE AUTO & FORMATAGE INTELLIGENTS =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== INTÉGRATION GIT EFFICACE =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== GÉRER LES GRANDS FICHIERS =====
  "files.maxMemoryForLargeFilesMB": 4096
}

Diagnostics Avancés et Réflexions Finales

Si vous avez appliqué tous ces paramètres et que vous êtes toujours curieux, VSCode dispose d'un outil puissant supplémentaire.

• Exécutez Developer: Startup Performance (Développeur : Performances au démarrage) depuis la palette de commandes.

Ceci vous donne une ventilation détaillée, milliseconde par milliseconde, de ce qui se passe pendant le démarrage de VSCode. C'est fantastique pour identifier les derniers goulots d'étranglement tenaces.

Une Approche Holistique de la Performance

Optimiser VSCode est une étape fantastique, mais rappelez-vous qu'un environnement de développement lent peut avoir de nombreuses sources. Tout comme nous avons rationalisé notre éditeur de code, il est payant d'utiliser des outils qui rationalisent d'autres parties de notre flux de travail. C'est pourquoi j'ai intégré Apidog à mon processus. La gestion des API peut être une énorme perte de temps si vos outils sont lents ou déconnectés. Avoir une solution rapide et tout-en-un pour concevoir, déboguer et tester les API complète parfaitement un environnement de codage haute performance, maintenant la boucle de développement serrée et efficace.

En conclusion, un VSCode rapide n'est pas une question de magie. C'est une question d'intentionnalité. Il s'agit de comprendre les compromis des outils et des extensions que nous utilisons et de faire des choix conscients. En prenant le contrôle de vos extensions, en maîtrisant le surveillant de fichiers, en optimisant TypeScript et en rationalisant l'interface utilisateur, vous pouvez absolument atteindre cette sensation de "10 fois plus rapide".

Alors, qu'attendez-vous ? Ouvrez les paramètres de votre VSCode et commencez votre propre parcours d'optimisation. Votre CPU (et votre santé mentale) vous remercieront.