Partager via


Ouverture de fichiers sources dans Visual Studio Code

L’expérience Fichiers open source dans Visual Studio Code vous permet d’utiliser Microsoft Edge DevTools, mais de modifier vos fichiers dans Visual Studio Code plutôt que dans l’éditeur de code de l’outil Sources DevTools.

Lorsque vous utilisez cette expérience, si vous utilisez Visual Studio Code et que vous utilisez DevTools pour modifier vos règles CSS, vous n’avez plus besoin d’utiliser l’éditeur de code dans l’outil Sources de DevTools. Vous pouvez simplement utiliser l’éditeur de code dans Visual Studio Code. Lorsque vous activez cette expérience, les fichiers locaux reçoivent un traitement différent.

Configuration de la modification de fichiers locaux dans Visual Studio Code

Tout d’abord, sélectionnez DevTools >Settings>Experiments>Open source files in Visual Studio Code, puis redémarrez DevTools.

Une fois cette expérience activée, supposons que dans Microsoft Edge, vous accédez à un serveur local (par http://localhost exemple, ou http://127.0.0.1) ou ouvrez un fichier local.

Microsoft Edge avec un fichier local ouvert

Lorsque vous ouvrez DevTools, vous êtes invité à identifier votre dossier racine. Vous pouvez désactiver en sélectionnant Fermer (x) ou en sélectionnant le Don't show again bouton . Vous pouvez obtenir plus d’informations en sélectionnant le Learn more lien.

Outils de développement affichant une barre d’informations vous demandant d’identifier votre dossier racine

Si vous sélectionnez le bouton Définir le dossier racine , le système d’exploitation vous invite à accéder au dossier et à le sélectionner.

Sélection de l’emplacement du dossier racine à l’aide du gestionnaire de fichiers de votre système d’exploitation

Après avoir sélectionné un dossier racine, vous devez accorder à DevTools un accès complet au dossier. Au-dessus de la barre d’outils, une invite avec les boutons Autoriser ou Refuser vous demande si vous devez accorder l’autorisation à DevTools d’accéder au dossier.

DevTools demandant à accéder au dossier

Après avoir accordé l’autorisation, le dossier que vous sélectionnez est ajouté en tant qu’espace de travail dans DevTools, sous l’onglet Système de fichiers de l’outil Sources . Cela signifie que tout fichier que vous modifiez dans DevTools s’ouvre désormais dans Microsoft Visual Studio Code plutôt que dans l’outil Sources. En guise d’indicateur, nous affichons une linked icône en regard du nom de fichier. Dans cet exemple, nous allons sélectionner le base.css lien dans l’outil Styles .

La sélection d’un lien de fichier dans l’outil Styles ouvre le fichier dans Visual Studio Code

DevTools ouvre un instance de Visual Studio Code et affiche tous les fichiers dans le dossier racine. DevTools ouvre également le fichier que vous avez sélectionné et fait défiler jusqu’à la ligne correcte du sélecteur CSS.

Visual Studio Code ouvert avec les fichiers de dossier racine et le fichier sélectionné ouvert

Toutes les modifications que vous apportez au fichier dans DevTools seront désormais synchronisées avec Visual Studio Code. Par exemple, si vous modifiez le background pour les green styles du corps, la même règle CSS est automatiquement ajoutée au base.css fichier dans l’éditeur de code de Visual Studio Code.

Les modifications apportées au code dans l’outil Styles sont désormais reflétées dans le code source dans Visual Studio Code

Modification des paramètres de l’espace de travail

Pour modifier le comportement de l’expérience Fichiers open source dans Visual Studio Code , accédez à la page Paramètres DevTools en cliquant sur Paramètres (icône d’engrenage) ou en appuyant sur Maj+ ?, puis sélectionnez la page Espace de travail :

Volet paramètres de l’espace de travail affichant plusieurs options

La page Paramètres>Espace de travail répertorie vos espaces de travail, ainsi que les options de configuration suivantes :

Contrôle de l’interface utilisateur Description
Case à cocher Fichiers open source dans Visual Studio Code Définit s’il faut open source fichiers dans Visual Studio Code.
Case à cocher Enregistrer les modifications de DevTools sur le disque Enregistre automatiquement les modifications DevTools sur le disque.
Zone de texte Modèle d’exclusion de dossier Exclut automatiquement les dossiers d’un dossier d’espace de travail.
Bouton Ajouter en regard de Dossiers exclus Exclut un dossier d’un espace de travail spécifique.
Bouton Ajouter un dossier Ajoute un espace de travail supplémentaire.