Visual Studio Code

Mise à jour : 07/10/2024

Visual Studio Code, souvent abrégé en VS Code, est un environnement de développement intégré (IDE) gratuit et open-source développé par Microsoft. Il s’est rapidement imposé comme l’un des IDE les plus populaires parmi les développeurs de logiciels, grâce à sa polyvalence, sa légèreté et son écosystème d’extensions robuste.

Dans un environnement où la gestion de serveurs, l’automatisation des tâches et le déploiement d’applications sont au cœur du quotidien, avoir un éditeur polyvalent comme VS Code peut grandement simplifier les opérations. Grâce à ses fonctionnalités comme le terminal intégré, la gestion de Git, ou encore ses extensions dédiées à Docker, Ansible ou Kubernetes, VS Code devient un outil indispensable pour toute personne souhaitant rationaliser ses tâches techniques.

Une des principales raisons pour lesquelles j’ai opté personnellement pour Visual Studio Code est sa polyvalence en matière de langages de programmation. Il prend en charge un large éventail de langages, notamment JavaScript, Python, C++, Java, HTML, CSS, Ruby et bien d’autres. Peu importe votre domaine de développement, il y a de fortes chances que VS Code puisse répondre à vos besoins. Même pour écrire du code d’infrastructure comme Ansible, Terrafom, Pulumi !

2. Installation de Visual Studio Code

L’installation de Visual Studio Code dépend du système d’exploitation sur lequel vous travaillez. Dans cette section, je vais détailler les étapes pour installer VS Code sur les trois principales plateformes : Linux, macOS et Windows. Chaque système d’exploitation a ses spécificités, mais l’installation reste simple grâce aux méthodes d’installation proposées par Microsoft.

Installation sur Linux

Sur Linux, Visual Studio Code est disponible en tant que package pour plusieurs distributions. Voici comment installer VS Code sur les principales distributions : Ubuntu/Debian et Fedora/CentOS.

Installation sur Ubuntu/Debian

Pour installer VS Code sur Ubuntu ou une autre distribution basée sur Debian, suivez ces étapes :

Mettez à jour la liste des paquets :
Terminal window
```
sudo apt update
```

Installez les paquets requis :

sudo apt install software-properties-common apt-transport-https wget gpg

Ajoutez la clé GPG de Microsoft :

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg

Ajoutez le dépôt Visual Studio Code à votre système :

echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" |sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null
rm -f packages.microsoft.gpg

Installez VS Code :
Terminal window
```
sudo apt update
sudo apt install code
```

b. Installation sur Fedora/CentOS

Pour les distributions basées sur Fedora ou Red Hat, voici les étapes :

Téléchargez le fichier RPM de VS Code depuis le dépôt officiel de Microsoft :

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" | sudo tee /etc/yum.repos.d/vscode.repo > /dev/null

Installez Visual Studio Code :
Terminal window
```
sudo dnf install code
```

2.2 Installation sur macOS

Sur macOS, l’installation de Visual Studio Code est très simple grâce à l’utilisation de Homebrew, le gestionnaire de paquets pour macOS. Voici les étapes d’installation :

Assurez-vous que Homebrew est installé. Si ce n’est pas le cas, vous pouvez l’installer en exécutant la commande suivante dans le terminal :
Terminal window
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
Installez Visual Studio Code avec Homebrew :
Terminal window
```
brew install --cask visual-studio-code
```
Une fois installé, vous pouvez lancer VS Code via Spotlight ou en tapant code dans le terminal (si vous avez configuré le Path via Command Palette dans VS Code).

Si vous ne souhaitez pas utiliser Homebrew, vous pouvez aussi télécharger directement l’application depuis le site officiel : https://code.visualstudio.com/ ↗.

Après avoir téléchargé le fichier .zip, ouvrez-le et déplacez Visual Studio Code dans le dossier Applications.

Installation sur Windows

Sur Windows, l’installation de Visual Studio Code se fait via un installateur graphique, ce qui rend le processus très simple. Voici les étapes à suivre :

Téléchargez l’installateur de Visual Studio Code à partir du site officiel : https://code.visualstudio.com/Download ↗.
Exécutez le fichier .exe téléchargé. L’assistant d’installation s’ouvrira. Cliquez sur Suivant et acceptez les conditions d’utilisation.
Choisissez un emplacement pour l’installation ou laissez l’emplacement par défaut.
Lors de l’installation, vous aurez la possibilité de cocher plusieurs options. Il est recommandé de cocher l’option Ajouter à PATH pour pouvoir exécuter VS Code depuis n’importe quel terminal en tapant simplement code.
Cliquez sur Installer et attendez que le processus se termine.
Une fois l’installation terminée, lancez Visual Studio Code depuis le menu Démarrer ou en exécutant code dans une fenêtre de commande.

Mise à jour de Visual Studio Code

Pour maintenir Visual Studio Code à jour, il est important de savoir comment vérifier et installer les mises à jour. Par défaut, VS Code vérifie automatiquement les mises à jour à chaque lancement. Cependant, voici comment les gérer manuellement :

Sur Linux, utilisez simplement les gestionnaires de paquets respectifs, par exemple :

sudo apt update && sudo apt upgrade code  # Pour Debian/Ubuntu
sudo dnf upgrade code  # Pour Fedora

Sur macOS, si vous avez utilisé Homebrew, vous pouvez mettre à jour VS Code en utilisant :
Terminal window
```
brew upgrade --cask visual-studio-code
```
Sur Windows, Visual Studio Code se met à jour automatiquement, mais vous pouvez forcer la mise à jour en allant dans le menu Aide > Rechercher des mises à jour.

L’installation de VS Code est rapide et facile sur n’importe quel système d’exploitation. Une fois en place, vous pouvez commencer à exploiter toute la puissance de cet éditeur.

Prise en main de l’interface

interface visual studio
code

L’interface de Visual Studio Code est conçue pour être simple et intuitive, tout en restant puissante. Elle est divisée en plusieurs sections, chacune ayant un rôle bien précis pour faciliter la gestion de projets et le développement. Cette image montre clairement les différentes zones de l’interface, que je vais détailler ci-dessous.

Barre latérale (1)

La barre latérale, située à gauche, est l’une des zones principales de VS Code. Elle donne accès à plusieurs fonctionnalités importantes :

Explorateur de fichiers : C’est ici que sont affichés les fichiers et dossiers de votre projet. Il permet de naviguer facilement entre les fichiers de votre workspace.
Recherche : Permet de faire des recherches textuelles dans tous les fichiers de votre projet.
Contrôle de source (Git) : Intégration native avec Git, permettant de suivre les modifications, effectuer des commits, des push/pull et gérer les branches.
Débogage : Gère les sessions de débogage et les points d’arrêt.
Extensions : Donne accès à la vaste bibliothèque d’extensions de VS Code pour ajouter de nouvelles fonctionnalités (comme Docker, Python, etc.).

Barre d’activité (2)

En haut de l’image, la barre d’activité permet de gérer le projet courant. Elle contient les menus classiques comme Fichier, Édition, Affichage, etc. Elle offre aussi des options comme ouvrir de nouveaux fichiers, fermer des onglets, accéder aux paramètres de VS Code, ou encore effectuer des actions liées à l’éditeur, comme splitter l’écran pour afficher plusieurs fichiers en parallèle. C’est ici que vous pouvez ajuster l’affichage, ajouter des dossiers à votre workspace ou configurer les préférences de l’éditeur.

Zone d’édition (3)

La zone d’édition est l’endroit où vous passez la majeure partie de votre temps. Elle affiche les fichiers ouverts sous forme d’onglets. Vous pouvez ouvrir plusieurs fichiers simultanément et les organiser dans des onglets multiples. Dans cette zone :

Vous codez, modifiez et explorez vos fichiers de projet.
Les surlignages de syntaxe facilitent la lecture et la compréhension du code.
L’autocomplétion suggère des options pour accélérer la rédaction de code.

Dans l’exemple de l’image, on voit du code JSON pour un projet. Les différents niveaux de hiérarchie du fichier sont visualisés à l’aide d’indentations et de lignes pointillées, ce qui aide à structurer et à comprendre rapidement la logique du fichier.

Terminal intégré (4)

Un atout majeur de VS Code est la possibilité d’utiliser un terminal intégré, visible en bas de l’image. Cela permet d’exécuter des commandes directement dans l’éditeur sans avoir à basculer vers une autre fenêtre de terminal. Vous pouvez :

Exécuter des scripts bash, Python, ou d’autres langages directement ici.
Gérer plusieurs terminaux en parallèle (par exemple, un pour l’application et un autre pour exécuter des commandes Docker).
Utiliser Git pour gérer le contrôle de version.

Zone de sortie (5)

Juste à coté du terminal, vous pouvez voir la zone de sortie qui affiche les logs ou le retour des actions exécutées par l’éditeur. Que vous déboguiez une application ou que vous lanciez un script, cette zone vous fournira des informations en temps réel sur l’état de l’exécution. Cela inclut aussi les résultats de tests unitaires, les erreurs de compilation, ou encore les messages d’extensions comme Docker ou Git.

Split view (multi-éditeurs)

Une fonctionnalité très pratique dans VS Code est la possibilité de diviser l’interface pour afficher plusieurs fichiers côte à côte. Vous pouvez ainsi travailler simultanément sur plusieurs fichiers, ce qui est particulièrement utile pour les projets complexes ou lors de comparaisons de code. Pour ce faire, vous pouvez soit cliquer avec le bouton droit sur un onglet et sélectionner l’option de division, soit utiliser un raccourci clavier.

Personnalisation de l’Interface

Visual Studio Code offre de nombreuses options de personnalisation pour son interface utilisateur. Vous pouvez modifier les thèmes visuels, ajuster la disposition de la barre latérale, masquer ou afficher des barres d’outils, et configurer les raccourcis clavier selon vos préférences. Pour accéder à ces options, vous pouvez utiliser le menu “Affichage” et choisir “Palettes de commandes” pour rechercher et exécuter des commandes de personnalisation.

L’interface utilisateur de Visual Studio Code est conçue pour être intuitive et flexible, ce qui permet à chaque développeur de créer un environnement de travail adapté à ses besoins. Dans les chapitres suivants, nous explorerons davantage les fonctionnalités d’édition de code et de gestion de projet de cet IDE.

Exécuter des commandes

L’une des caractéristiques les plus utiles de la barre de menus est la recherche de commandes. Vous pouvez simplement appuyer sur Ctrl+Shift+P (ou Cmd+Shift+P sur macOS) pour afficher la palette de commandes. De là, vous pouvez rechercher n’importe quelle commande par son nom et l’exécuter instantanément. C’est un moyen rapide de naviguer dans l’IDE sans avoir à mémoriser tous les menus et sous-menus.

Configuration et personnalisation

L’un des atouts majeurs de Visual Studio Code est sa capacité à être hautement personnalisable. Chaque utilisateur peut configurer l’éditeur selon ses besoins spécifiques, que ce soit pour modifier l’apparence, ajuster les raccourcis clavier ou configurer des paramètres avancés pour différents langages ou environnements. Dans cette section, je vais vous montrer comment personnaliser VS Code pour en faire un outil parfaitement adapté à votre utilisation quotidienne, notamment en tant qu’administrateur systèmes.

Paramètres de base

VS Code offre deux types de paramètres : les paramètres utilisateur et les paramètres de l’espace de travail. Les paramètres utilisateur affectent tous les projets, tandis que les paramètres de l’espace de travail ne s’appliquent qu’au projet courant. Vous pouvez accéder à ces paramètres via le menu Fichier > Préférences > Paramètres ou en utilisant la Command Palette (Ctrl + Shift + P) et en tapant “settings”.

Tous les paramètres sont stockés dans un fichier settings.json et vous pouvez les ajuster directement en modifiant ce fichier.

Synchronisation des paramètres

Si vous travaillez sur plusieurs machines, il peut être fastidieux de configurer VS Code à chaque fois. Heureusement, VS Code propose une option de synchronisation des paramètres qui vous permet de conserver la même configuration sur toutes vos installations. Cette fonctionnalité synchronise vos thèmes, raccourcis, extensions et autres paramètres via votre compte GitHub ou Microsoft.

Thèmes et apparence

L’apparence de l’éditeur peut grandement influencer votre confort de travail. VS Code permet de changer de thème facilement. Par défaut, plusieurs thèmes sont inclus, mais vous pouvez en installer beaucoup d’autres via l’extension Color Themes. Voici comment procéder pour changer de thème :

Ouvrez la Command Palette (Ctrl + Shift + P).
Tapez “color theme” et sélectionnez Preferences: Color Theme.
Parcourez la liste des thèmes disponibles et choisissez celui qui vous convient.

Il est également possible d’installer des thèmes supplémentaires via le Marketplace. Par exemple, le thème Dracula ou One Dark Pro sont très populaires parmi les développeurs et administrateurs systèmes.

Personnalisation des raccourcis clavier

L’un des moyens les plus efficaces d’améliorer votre productivité est de personnaliser les raccourcis clavier. Par défaut, VS Code propose de nombreux raccourcis, mais ils peuvent être modifiés pour s’adapter à vos préférences personnelles. Vous pouvez accéder aux raccourcis clavier via Fichier > Préférences > Raccourcis clavier, ou en utilisant la commande Preferences: Open Keyboard Shortcuts (Ctrl + K, Ctrl + S).

Extensions et fonctionnalités supplémentaires

La personnalisation de VS Code passe également par les extensions, qui ajoutent des fonctionnalités spécifiques. Vous pouvez accéder au Marketplace d’extensions depuis la barre latérale (icône en forme de blocs empilés) ou via la Command Palette.

Les extensions de VS Code couvrent une vaste gamme de domaines. Voici quelques-uns des types d’extensions les plus courants :

Extensions de langage : Elles ajoutent la prise en charge de langages de programmation spécifiques à VS Code, avec des fonctionnalités d’autocomplétion, de mise en forme et de débogage.
Extensions de productivité : Ces extensions visent à améliorer votre productivité en ajoutant des raccourcis clavier, des fonctions de recherche avancée, ou des outils de gestion de tâches.
Extensions de thèmes : Vous pouvez personnaliser l’apparence de VS Code en installant des thèmes visuels pour l’éditeur de code.
Extensions d’intégration d’outils : Certaines extensions intègrent des outils tiers, tels que des gestionnaires de packages, des bases de données, ou des outils de déploiement.

Voici quelques extensions incontournables pour les administrateurs systèmes :

Remote - SSH : Permet d’éditer et gérer des fichiers directement sur des serveurs distants via SSH.
Docker : Gère les conteneurs Docker depuis VS Code.
YAML : Très utile pour travailler avec les fichiers de configuration utilisés dans des outils comme Ansible ou Kubernetes.
Ansible : Cette extension propose la coloration syntaxique, l’autocomplétion et le linting pour vos fichiers de playbook Ansible.

Pour installer une extension via le terminal, vous pouvez utiliser la commande suivante :

code --install-extension ms-vscode-remote.remote-ssh

Les snippets

Les “snippets” ou “extraits de code” sont de courts morceaux de code pré-définis, souvent utilisés pour automatiser la saisie de code récurrent. Dans Visual Studio Code, vous pouvez créer, personnaliser et utiliser des snippets pour gagner du temps lors de la rédaction de code. Par exemple, un snippet pour un “if-else” en JavaScript pourrait générer automatiquement la structure de base, vous permettant de remplir les détails spécifiques.

Les snippets peuvent être utilisés pour des structures de code courantes, des modèles de fonctions, des blocs de code réutilisables, ou même pour des balises HTML, CSS et d’autres langages. Ils améliorent la productivité des développeurs en réduisant la saisie manuelle et en évitant les erreurs de syntaxe fréquentes.

Conclusion

Au fil de ce guide, nous avons exploré en profondeur les nombreuses fonctionnalités et capacités de Visual Studio Code et vu comment cet éditeur peut devenir un outil indispensable. Que vous soyez en train de configurer des serveurs, de déployer des conteneurs Docker, de gérer des dépôts Git ou d’écrire des scripts pour automatiser des tâches, VS Code s’adapte parfaitement à vos besoins grâce à sa flexibilité, ses extensions et son interface intuitive.

Plus d’infos

Le site officiel ↗

Des liens

J’ai rédigé plusieurs billets de blog où ↗ :