10 conseils de productivité essentiels pour Visual Studio Code

Visual Studio Code se distingue comme un éditeur de texte de programmation exceptionnel. Il a gagné en popularité au point de surpasser Sublime Text pour de nombreux développeurs. Bien que basé sur Electron et JavaScript, il offre une rapidité remarquable et évite les problèmes de performance souvent associés aux applications JavaScript.

Il est important de noter que VS Code est un projet open source, accessible sur GitHub. Si vous souhaitez améliorer votre productivité et optimiser votre flux de travail, voici des astuces essentielles pour exploiter pleinement Visual Studio Code.

1. Optimiser l'utilisation de la palette de commandes de VS Code

À l'instar de Sublime Text (et de TextMate avant lui), VS Code intègre une palette de commandes. Cette fonctionnalité vous permet d'accéder à diverses actions en les saisissant directement, sans avoir à naviguer dans les menus à l'aide de votre souris.

Vous pouvez ouvrir la palette de commandes via le raccourci clavier Ctrl + Shift + P (ou Cmd + Shift + P). Commencez à taper ce que vous recherchez (par exemple, "fermer") et les options correspondantes apparaîtront en temps réel. Certaines commandes sont organisées par catégories (par exemple, "Fichier", "Git", "Terminal", etc.) facilitant ainsi leur localisation.

2. Définir un dossier de projet actif

En cliquant sur l'icône de l'Explorateur dans la barre latérale, un nouveau panneau s'ouvre. Ce panneau est composé de deux sections (vous devrez peut-être cliquer sur le menu à trois points et sélectionner "Ouvrir les éditeurs" pour l'afficher) : "Éditeurs ouverts" (les fichiers et documents actuellement ouverts) et "Aucun dossier ouvert". C'est cette dernière section qui nous intéresse.

Cliquez sur "Ouvrir le dossier" (ou choisissez Fichier > Ouvrir le dossier dans la barre de menu) et sélectionnez un dossier de votre système. Ce dossier sera alors chargé dans VS Code en tant que "projet de travail actif", vous offrant un accès facile à tous les fichiers et sous-dossiers, évitant ainsi les allers-retours constants vers l'explorateur de fichiers.

3. Afficher plusieurs fichiers simultanément

La plupart des éditeurs de texte modernes permettent de gérer plusieurs fichiers simultanément, en passant de l'un à l'autre via une interface à onglets. Les éditeurs plus avancés, tel que VS Code, peuvent même afficher l'édition côte à côte (bien qu'horizontalement uniquement).

Cependant, l'édition côte à côte peut s'avérer difficile sur les petits écrans comme les ordinateurs portables ou les anciens moniteurs. C'est là que VS Code se distingue.

Il propose des panneaux dynamiques, qui s'élargissent automatiquement lorsqu'un document ouvert devient actif (lorsque votre curseur est placé dessus), surtout si l'espace disponible est réduit. Cette fonctionnalité est particulièrement appréciable si vous utilisez une résolution proche de 720p.

4. Modifier plusieurs lignes simultanément

Si vous devez insérer ou supprimer du texte à plusieurs endroits dans un document, il suffit de créer plusieurs curseurs. Maintenez la touche Alt (ou Option sur Mac) enfoncée et cliquez là où vous souhaitez ajouter un curseur. Chaque clic créera un nouveau curseur.

Cette fonctionnalité est très pratique pour manipuler du code HTML, par exemple, lorsque vous devez ajouter la même classe à plusieurs éléments ou modifier des hyperliens en masse. Apprenez à l'utiliser, vous l'apprécierez.

5. Accéder à la définition d'un élément

Lorsque vous programmez, vous rencontrerez fréquemment des variables ou des méthodes que vous ne connaissez pas. Au lieu de passer du temps à chercher dans vos fichiers, vous pouvez sélectionner la variable ou la méthode avec votre curseur et appuyer sur F12 pour accéder immédiatement à sa définition. Une autre méthode est de sélectionner l'élément puis d'appuyer sur Ctrl ou Cmd tout en cliquant dessus.

Vous pouvez aussi utiliser le raccourci clavier Alt + F12 (ou Cmd + F12) pour visualiser la définition à l'endroit où se trouve votre curseur, sans ouvrir le fichier source.

À l'inverse, si vous souhaitez trouver toutes les références à une variable ou une méthode, sélectionnez-la et utilisez le raccourci Maj + F12. Les références s'afficheront à proximité de votre curseur.

Pour que ces fonctionnalités soient actives, assurez-vous que le dossier de projet est bien défini comme "projet de travail actif" (voir astuce n°2).

6. Renommer toutes les occurrences

La refactorisation est indispensable pour maintenir un code propre, mais peut devenir fastidieuse, surtout lorsque vous travaillez sur un module volumineux. Au lieu de parcourir des dizaines de fichiers pour renommer une variable ou une méthode, laissez VS Code s'en charger pour vous.

Sélectionnez une variable ou une méthode et appuyez sur F2 pour la renommer. VS Code modifiera automatiquement toutes ses occurrences dans l'ensemble du projet de travail actif.

Si vous souhaitez seulement modifier les occurrences dans le fichier courant, utilisez le raccourci Ctrl/Cmd + F2. VS Code générera un curseur à chaque instance trouvée dans le fichier.

7. Effectuer des recherches dans plusieurs fichiers

Si vous travaillez sur des fichiers qui ne sont pas du code source, les fonctions de recherche de symboles décrites précédemment (dans l'astuce n°5) ne seront pas disponibles. Dans ce cas, comment trouver un mot ou une phrase lorsque vous ignorez son emplacement ? La fonction de recherche classique est la solution.

Ctrl/Cmd + F permet de rechercher dans le fichier actuel, tandis que Ctrl + Shift + F (ou Shift + Cmd + F) permet de rechercher dans tous les fichiers du projet de travail actif, y compris tous les sous-dossiers de manière récursive.

8. Utiliser la ligne de commande dans VS Code

VS Code intègre un terminal. Sous Windows, il s'agit d'une invite de commande. Sur Mac et Linux, il s'agit d'une invite Bash. Le terminal s'ouvre dans le répertoire du projet de travail actif, s'il en existe un, ou dans votre dossier personnel dans le cas contraire.

Vous pouvez ouvrir plusieurs terminaux simultanément. Cliquez sur le bouton Plus (+) en haut à droite pour créer de nouvelles instances de terminal, ou sur la corbeille pour fermer le terminal actuel. Un menu déroulant permet de basculer facilement entre eux, sans encombrer l'espace d'affichage avec une interface à onglets.

9. Installer un nouveau thème dans VS Code

Vous pouvez personnaliser la coloration syntaxique du texte et du code source dans VS Code. Malheureusement, l'interface elle-même n'est pas thématisable, mais la coloration syntaxique est l'élément crucial. Un bon thème peut augmenter votre productivité plus que vous ne le pensez.

Vous trouverez de nouveaux thèmes sur le Marketplace de VS Code (ils sont gratuits), ou vous pouvez les rechercher directement dans VS Code. Consultez notre liste des meilleurs thèmes VS Code si vous avez besoin de recommandations.

10. Installer des extensions tierces dans VS Code

La dernière fonctionnalité essentielle à souligner est l'extensibilité de VS Code via des extensions tierces. Comme pour les thèmes, vous les trouverez sur le Marketplace de VS Code (elles sont également gratuites), ou vous pouvez les rechercher directement dans VS Code. Accédez au panneau "Extensions" via le raccourci clavier Ctrl + Shift + X (ou Shift + Cmd + X).

Les extensions sont essentielles pour optimiser votre productivité. Vous y trouverez toutes sortes d'outils, tels que des linters, des débogueurs, des extraits, des améliorations de l'ergonomie de VS Code, des outils de compilation, et même des extensions utilisant ChatGPT pour faciliter la programmation dans VS Code.

Visual Studio Code : un éditeur de texte de premier choix

Malgré son succès, VS Code n'est pas parfait pour tous les utilisateurs (rien ne l'est jamais), et il se peut qu'il ne corresponde pas à vos besoins spécifiques. Il est important de garder à l'esprit que VS Code est un éditeur de texte, et non un IDE à part entière.

Cependant, il vaut la peine d'être essayé avec un esprit ouvert. Ses fonctionnalités pourraient bien vous surprendre !