L’environnement de travail dans Visual Studio Code se présente comme un regroupement de fichiers accessibles depuis une seule fenêtre. Un tel espace peut concerner un unique dossier, mais parfois, il englobera divers fichiers, une configuration de développement désignée sous le terme d’espaces de travail multi-racines. Si votre travail sur un projet exige l’ouverture simultanée de multiples fichiers au sein de cette plateforme, la fonctionnalité d’espace de travail devient un atout majeur. Elle vous permet de rassembler plusieurs fichiers dans une même fenêtre, simplifiant ainsi l’accès à l’ensemble des documents nécessaires. Le fichier .code-workspace assure la sauvegarde de la configuration du dossier du projet. Une fois ce fichier configuré, il ouvre automatiquement tous les fichiers définis dans une seule et même fenêtre. Cette approche se révèle bien plus rapide et pratique que l’élaboration d’un script shell. Découvrons ensemble comment créer un espace de travail dans VS Code.
Comment configurer un nouvel espace de travail dans VS Code
Votre espace de travail représente fréquemment une copie locale du code source de l’équipe, que vous exploitez pour tester et développer votre propre code. Dans la plupart des situations, il est généré automatiquement lors de l’ouverture d’un dossier dans VS Code. Toutefois, il peut être judicieux de créer plusieurs espaces pour garder un historique des changements apportés dans les différentes branches d’un projet. Voici la méthode pour regrouper ces fichiers dans un seul espace de travail VS Code.
- Commencez par sélectionner les dossiers que vous voulez intégrer à votre espace de travail.
- Ajoutez-les ensuite à l’espace de travail en allant dans « Fichier », puis « Ajouter un dossier à l’espace de travail ».
- Une fois votre espace configuré, sauvegardez-le en cliquant sur « Fichier », puis sur « Enregistrer l’espace de travail sous ».
Votre nouvel espace de travail est maintenant créé dans VS Code et son nom apparaîtra sous la forme (Nom).code-workspace.
Personnalisation de l’espace de travail
Les paramètres d’un espace de travail surpassent les réglages par défaut et permettent une personnalisation de votre environnement selon vos exigences. Ces paramètres sont conservés dans des fichiers JSON, dont l’emplacement dépendra de la façon dont vous ouvrez votre dossier.
Paramètres d’un espace de travail à dossier unique
Si vous choisissez d’ouvrir un dossier unique comme espace de travail, ces paramètres seront stockés dans le fichier .vscode/settings.json.
Paramètres d’un espace de travail multi-racine
Si le dossier que vous ouvrez est un fichier .code-workspace, tous les paramètres de cet espace y seront inclus.
Il reste possible de personnaliser les paramètres pour chaque dossier racine. Toutefois, les paramètres spécifiques au dossier prévaudront sur ceux définis dans le fichier .code-workspace.
Configurations et lancements de tâches de l’espace de travail
De la même manière que les paramètres, les tâches et les lancements peuvent être configurés pour s’adapter à votre espace de travail. Si vous ouvrez un dossier en tant que fichier .code-workspace, les configurations de tâches et de lancements se trouvent dans le fichier .vsh ou .workspace. Ces paramètres sont également ajustables depuis le dossier.
Optimiser son espace de travail VS Code
Avec sa prise en charge intégrée de divers langages, tels que TypeScript, Javascript et Node JS, l’espace de travail est un outil indispensable pour les développeurs. Voici des suggestions pour améliorer l’efficacité et la navigation dans cette plateforme.
Terminaux
Vous utilisez peut-être le terminal fourni par votre système d’exploitation par défaut. VS Code a intégré un terminal qui centralise tous vos besoins. Il est idéal pour surveiller vos projets de développement et garantir leur bon déroulement. La possibilité de modifier son nom et sa couleur facilite la distinction entre les différents terminaux de votre projet.
Gestion des onglets
Cette fonctionnalité s’avère utile pour les développeurs qui travaillent sur des projets complexes avec de nombreux composants. Il peut être ardu de suivre tous les fichiers lors des changements entre composants. Dans VS Code, les onglets apparaissent dans le navigateur et il faut parfois faire défiler pour voir leur contenu.
Une alternative plus efficace consiste à activer l’option « Wrap Tabs » (via Cmd + et en recherchant cette option). Cette fonctionnalité permet de voir plus aisément le contenu des divers onglets.
Épingler les onglets
Pour tout développeur, l’organisation de son espace de travail est essentielle. Vous pouvez épingler les onglets que vous utilisez fréquemment pour les maintenir accessibles à l’avant-plan. Il est également possible de personnaliser leur apparence en utilisant les commandes « Cmd + » ou « Ctrl + » et en recherchant « Pin Tab ».
Interface utilisateur
L’interface de votre terminal propose différentes options, telles que l’explorateur, la recherche, le gestionnaire de projet et la sortie. Une section située en bas de page permet de rechercher et de modifier certains détails. Dans VS Code, vous pouvez réorganiser ces onglets par glisser-déposer et personnaliser leur disposition pour une meilleure accessibilité. La personnalisation de l’interface utilisateur facilite grandement la navigation au sein de votre espace de travail.
Gestion du langage
Lors de la création d’une nouvelle page dans Visual Studio Code, le fichier n’a pas de titre et vous devez remplir vous-même les informations. Vous devez alors vous rendre dans le nom du fichier et saisir son extension. Ce processus peut devenir répétitif, surtout pour un grand nombre de fichiers.
Vous pouvez optimiser ce processus en permettant à l’IDE de consulter les fichiers. Il utilisera alors les conventions de nommage précédentes pour nommer les nouveaux fichiers que vous créez.
Aperçu des fichiers
Certaines fonctionnalités de VS Code peuvent être frustrantes. Par exemple, si vous ouvrez un fichier en aperçu et que vous ouvrez un autre fichier juste après sans modifier le premier, le programme fermera ce premier fichier. Si vous souhaitez éviter cela et garder les deux fichiers ouverts en aperçu, allez dans les Paramètres et cherchez « Activer l’aperçu ». Cochez la case pour valider ce changement.
Migration vers un nouvel ordinateur
Vous avez peut-être passé du temps à personnaliser votre espace de travail VS Code et vous vous retrouvez avec un nouvel ordinateur. Bien que l’acquisition d’une nouvelle machine soit agréable, il peut être ennuyeux de devoir reconfigurer votre espace de travail.
La configuration de la synchronisation permet de sauvegarder tous vos paramètres à un seul endroit. Ainsi, lorsque vous passez sur un autre appareil, il appliquera automatiquement les paramètres de votre ancien environnement à votre nouvel espace VS Code. Vous évitez ainsi la reconfiguration de votre espace de travail sur votre nouvel ordinateur.
OpenReplay : relecture des sessions
Le débogage d’une application web en production peut s’avérer fastidieux. Avec OpenReplay, vous pouvez surveiller et rejouer toutes les actions de vos utilisateurs, ce qui vous permet de voir le comportement de l’application et de détecter les éventuels problèmes. OpenReplay est une excellente option, car il s’agit d’une alternative gratuite et open source à d’autres outils de débogage tels que LogRocket et FullStory. L’utilisation d’un outil de débogage vous fera gagner un temps précieux lors de l’utilisation de votre espace de travail.
Intégration de GitHub
VS Code intègre directement GitHub, ce qui vous permet de transférer rapidement vos fichiers. La connexion à GitHub depuis VS Code vous évite de passer du temps à écrire des commandes git. L’intégration de VS Code simplifie la maintenance de vos fichiers.
Centralisez vos dossiers
L’espace de travail facilite l’organisation du travail d’équipe. Les fichiers et les dossiers peuvent être stockés à un seul endroit, ce qui permet de les ouvrir et de les visualiser en un clic. L’espace de travail peut également être optimisé pour améliorer l’efficacité et le suivi de vos projets. Grâce à ce guide, vous êtes désormais équipé pour créer un espace de travail sur VS Code et le personnaliser selon vos besoins.
Avez-vous déjà configuré un espace de travail sur VS Code ? Partagez vos expériences en matière de création et d’optimisation dans les commentaires ci-dessous.