Prise en main de l’utilisation de Visual Studio Code avec le sous-système Windows pour LinuxGet started using Visual Studio Code with Windows Subsystem for Linux

Visual Studio Code, avec l’extension WSL distante, vous permet d’utiliser WSL en tant qu’environnement de développement à plein temps directement à partir de VS Code.Visual Studio Code, along with the Remote - WSL extension, enables you to use WSL as your full-time development environment directly from VS Code. Vous pouvez :You can:

  • développer dans un environnement Linuxdevelop in a Linux-based environment
  • utiliser des chaînes et des utilitaires spécifiques à Linuxuse Linux-specific toolchains and utilities
  • Exécutez et déboguez vos applications Linux à partir du confort de Windows tout en conservant l’accès aux outils de productivité comme Outlook et Officerun and debug your Linux-based applications from the comfort of Windows while maintaining access to productivity tools like Outlook and Office
  • utiliser le VS Code terminal intégré pour exécuter votre distribution Linux de votre choixuse the VS Code built-in terminal to run your Linux distribution of choice
  • Tirez parti des fonctionnalités de VS Code telles que la saisie semi-automatique de code IntelliSense , ledécodage, la prise en charge du débogage, les extraits de codeet les tests unitairestake advantage of VS Code features like Intellisense code completion, linting, debug support, code snippets, and unit testing
  • Gérez facilement votre contrôle de version avec la prise en charge intégrée de Git de vs codeeasily manage your version control with VS Code's built-in Git support
  • exécuter des commandes et des extensions de VS Code directement dans vos projets WSLrun commands and VS Code extensions directly on your WSL projects
  • Modifiez les fichiers de votre système de fichiers Linux ou Windows monté (par exemple/mnt/c) sans vous soucier des problèmes de chemin d’accès, de compatibilité binaire ou d’autres problèmes liés au système d’exploitation.edit files in your Linux or mounted Windows filesystem (for example /mnt/c) without worrying about pathing issues, binary compatibility, or other cross-OS challenges

Installer VS Code et l’extension WSL distanteInstall VS Code and the Remote WSL extension

  • Accédez à la page d’installation de vs code et sélectionnez le programme d’installation 32 ou 64 bits.Visit the VS Code install page and select the 32 or 64 bit installer. Installez Visual Studio Code sur Windows (et non dans votre système de fichiers WSL).Install Visual Studio Code on Windows (not in your WSL file system).

  • Lorsque vous êtes invité à Sélectionner des tâches supplémentaires lors de l’installation, veillez à cocher l’option Ajouter au chemin d’accès afin de pouvoir ouvrir facilement un dossier dans WSL à l’aide de la commande code.When prompted to Select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command.

  • Installez le Pack d’extension de développement distant.Install the Remote Development extension pack. Ce pack d’extension comprend l’extension WSL distante, en plus des extensions Remote-SSH et Remote-Containers, ce qui vous permet d’ouvrir n’importe quel dossier dans un conteneur, sur un ordinateur distant ou dans WSL.This extension pack includes the Remote - WSL extension, in addition to the Remote - SSH, and Remote - Containers extensions, enabling you to open any folder in a container, on a remote machine, or in WSL.

Important

Pour installer l’extension WSL à distance, vous avez besoin de la version 1,35 de mai ou d’une version ultérieure de vs code.In order to install the Remote-WSL extension, you will need the 1.35 May release version or later of VS Code. Nous vous déconseillons d’utiliser WSL dans VS Code sans l’extension WSL distante, car vous perdrez la prise en charge de la saisie semi-automatique, du débogage, du découpage, etc. Fait amusant : cette extension WSL est installée dans $HOME/.vscode/extensions (entrez la commande ls $HOME\.vscode\extensions\ dans PowerShell).We do not recommend using WSL in VS Code without the Remote-WSL extension as you will lose support for auto-complete, debugging, linting, etc. Fun fact: this WSL extension is installed in $HOME/.vscode/extensions (enter the command ls $HOME\.vscode\extensions\ in PowerShell).

Mettre à jour votre distribution LinuxUpdate your Linux distribution

Certaines distributions Linux WSL ne disposent pas de bibliothèques requises par le serveur VS Code pour démarrer.Some WSL Linux distributions are lacking libraries that are required by the VS Code server to start up. Vous pouvez ajouter des bibliothèques supplémentaires à votre distribution Linux à l’aide de son gestionnaire de package.You can add additional libraries into your Linux distribution by using its package manager.

Par exemple, pour mettre à jour Debian ou Ubuntu, utilisez :For example, to update Debian or Ubuntu, use:

sudo apt-get update

Pour ajouter wget (pour récupérer du contenu à partir de serveurs Web) et des certificats d’autorité de certification (pour permettre aux applications SSL de vérifier l’authenticité des connexions SSL), entrez :To add wget (to retrieve content from web servers) and ca-certificates (to allow SSL-based applications to check for the authenticity of SSL connections), enter:

sudo apt-get install wget ca-certificates

Ouvrez un projet WSL dans Visual Studio CodeOpen a WSL project in Visual Studio Code

À partir de la ligne de commandeFrom the command-line

Pour ouvrir un projet à partir de votre distribution WSL, ouvrez la ligne de commande de la distribution, puis entrez : code .To open a project from your WSL distribution, open the distribution's command line and enter: code .

Ouvrir le projet WSL avec VS Code serveur distant

À partir de VS CodeFrom VS Code

Vous pouvez également accéder à d’autres options de VS Code à distance à l’aide du raccourci : CTRL+SHIFT+P dans vs code pour afficher la palette de commandes.You can also access more VS Code Remote options by using the shortcut: CTRL+SHIFT+P in VS Code to bring up the command palette. Si vous tapez VSCODE-REMOTE , vous verrez toutes les options de vs code à distance disponibles, ce qui vous permet de rouvrir le dossier dans une session à distance, de spécifier la distribution que vous souhaitez ouvrir dans, et bien plus encore.If you then type VSCODE-REMOTE you will see all of the VS Code Remote options available, allowing you to reopen the folder in a remote session, specify which distribution you want to open in, and more.

Palette de commandes de VS Code

Extensions à l’intérieur de VS Code à distanceExtensions inside of VS Code Remote

L’extension WSL distante fractionne les VS Code dans une architecture « client-serveur », avec le client (l’interface utilisateur) en cours d’exécution sur votre ordinateur Windows et le serveur (votre code, git, plug-ins, etc.) exécuté à distance.The Remote-WSL extension splits VS Code into a “client-server” architecture, with the client (the user interface) running on your Windows machine and the server (your code, Git, plugins, etc) running remotely.

Lors de l’exécution de VS Code à distance, la sélection de l’onglet « Extensions » affiche une liste d’extensions comprise entre votre ordinateur local et votre distribution WSL.When running VS Code Remote, selecting the 'Extensions' tab will display a list of extensions split between your local machine and your WSL distribution.

L’installation d’une extension locale, comme un thème, ne doit être installée qu’une seule fois.Installing a local extension, like a theme, only needs to be installed once.

Certaines extensions, telles que l' extension Python ou tout élément qui gère des éléments tels que le débogage ou le débogage, doivent être installées séparément sur chaque distribution WSL distante.Some extensions, like the Python extension or anything that handles things like linting or debugging, must be installed separately on each remote WSL distributions. VS Code affichera une icône d’avertissement ⚠ , ainsi qu’un bouton « installer en WSL » vert, si une extension installée localement n’est pas installée sur votre ordinateur distant WSL.VS Code will display a warning icon ⚠, along with a green "Install in WSL" button, if you have an extension locally installed that is not installed on your WSL Remote.

VS Code avec les extensions WSL à distance et les extensions locales

Pour plus d’informations, consultez les documents VS Code :For further information, see the VS Code docs:

  • Lorsque VS Code Remote est démarré dans WSL, aucun script de démarrage de l’interpréteur de commandes n’est exécuté.When VS Code Remote is started in WSL, no shell startup scripts are run. Pour plus d’informations sur l’exécution de commandes supplémentaires ou la modification de l’environnement, consultez l’article script de configuration de l’environnement avancé .See this advanced environment setup script article for more info on how to run additional commands or modify the environment.

  • Vous rencontrez des problèmes lors du lancement de VS Code à partir de votre ligne de commande WSL ?Having problems launching VS Code from your WSL command line? Ce Guide de dépannage contient des conseils sur la modification des variables de chemin d’accès, la résolution des erreurs d’extension sur les dépendances manquantes, la résolution des problèmes de fin de ligne git, l’installation d’un VSIX local sur un ordinateur distant, le lancement d’une fenêtre de navigateur, le port localhost du bloqueur, les sockets Web qui ne fonctionnent pas, les erreurs de stockage desThis troubleshooting guide includes tips on changing path variables, resolving extension errors about missing dependencies, resolving Git line ending issues, installing a local VSIX on a remote machine, launching a browser window, blocker localhost port, web sockets not working, errors storing extension data, and more.

Installer Git (facultatif)Install Git (optional)

Si vous envisagez de collaborer avec d’autres personnes ou d’héberger votre projet sur un site open source (comme GitHub), VS Code prend en charge le contrôle de version avec Git.If you plan to collaborate with others, or host your project on an open-source site (like GitHub), VS Code supports version control with Git. L’onglet Contrôle de code source de VS Code assure le suivi de toutes vos modifications et contient des commandes Git courantes (ajouter, valider, pousser, extraire) intégrées directement dans l’interface utilisateur.The Source Control tab in VS Code tracks all of your changes and has common Git commands (add, commit, push, pull) built right into the UI.

Pour installer Git, consultez configurer Git pour fonctionner avec le sous-système Windows pour Linux.To install Git, see set up Git to work with Windows Subsystem for Linux.

Installer le Terminal Windows (facultatif)Install Windows Terminal (optional)

Le nouveau terminal Windows active plusieurs onglets (basculer rapidement entre l’invite de commandes, PowerShell ou plusieurs distributions Linux), les combinaisons de touches personnalisées (créez vos propres touches de raccourci pour ouvrir ou fermer les onglets, copier + coller, etc.), les Emoji ☺ et les thèmes personnalisés (modèles de couleurs, styles et tailles de police, image d’arrière-plan/flouThe new Windows Terminal enables multiple tabs (quickly switch between Command Prompt, PowerShell, or multiple Linux distributions), custom key bindings (create your own shortcut keys for opening or closing tabs, copy+paste, etc.), emojis ☺, and custom themes (color schemes, font styles and sizes, background image/blur/transparency). En savoir plus dans les documents Windows Terminal Server.Learn more in the Windows Terminal docs.

  1. Procurez-vous le Terminal Windows dans le Microsoft Store : En installant via le Store, les mises à jour sont gérées automatiquement.Get Windows Terminal in the Microsoft Store: By installing via the store, updates are handled automatically.

  2. Une fois l’installation terminée, ouvrez le Terminal Windows, puis sélectionnez Paramètres pour personnaliser votre terminal à l’aide du fichier profile.json.Once installed, open Windows Terminal and select Settings to customize your terminal using the profile.json file.

Ressources supplémentairesAdditional Resources

D’autres extensions sont disponibles :A few additional extensions you may want to consider include:

  • Mappages de touches d'autres éditeurs : ces extensions peuvent être utiles si vous utilisiez auparavant un autre éditeur de texte (comme Atom, Sublime, Vim, eMacs, Notepad++, etc.).Keymaps from other editors: These extensions can help your environment feel right at home if you're transitioning from another text editor (like Atom, Sublime, Vim, eMacs, Notepad++, etc).
  • Synchronisation des paramètres : vous permet de synchroniser vos paramètres VS Code entre différentes installations à l'aide de GitHub.Settings Sync: Enables you to synchronize your VS Code settings across different installations using GitHub. Si vous travaillez sur plusieurs ordinateurs, cela permet de garantir la cohérence de votre environnement.If you work on different machines, this helps keep your environment consistent across them.
  • Débogueur pour Chrome: une fois que vous avez terminé le développement côté serveur avec Linux, vous devez développer et tester le côté client.Debugger for Chrome: Once you finish developing on the server side with Linux, you'll need to develop and test the client side. Cette extension intègre votre éditeur VS Code au service de débogage de votre navigateur Chrome, pour plus d'efficacité.This extension integrates your VS Code editor with your Chrome browser debugging service, making things a bit more efficient.