Comment ouvrir dans le navigateur à partir du code VS

Si vous utilisez des fichiers HTML, PHP ou JS, vous souhaiterez peut-être les ouvrir dans votre navigateur à partir de Visual Studio Code. Cependant, il n'y a pas d'option intégrée pour le faire. Cela peut être frustrant, surtout si vous voulez avoir un aperçu rapide du résultat de votre codage.

Comment ouvrir dans le navigateur à partir du code VS

Heureusement, vous pouvez activer la fonction "Ouvrir dans le navigateur" par d'autres méthodes. Cet article vous montrera comment faire exactement cela.

Comment ouvrir dans le navigateur dans VS Code sur un PC Windows

Le moyen le plus simple d'obtenir l'option Ouvrir dans le navigateur pour Visual Studio Code dans Windows consiste à utiliser une extension. L'installation d'extensions dans Visual Studio Code est relativement simple, tout comme leur utilisation pour ouvrir des fichiers dans le navigateur.

  1. Ouvrez votre fichier HTML dans l' éditeur de code Visual Studio .
    Comment ouvrir dans le navigateur à partir du code VS
  2. Dans la barre d'outils verticale à l'extrême gauche, cliquez sur "Extensions". Alternativement, vous pouvez utiliser le raccourci clavier "Ctrl + Maj + X" pour lancer les extensions.
    Comment ouvrir dans le navigateur à partir du code VS
  3. Cliquez sur la barre de recherche pour activer l'écriture.
    Comment ouvrir dans le navigateur à partir du code VS
  4. Saisissez "ouvrir dans le navigateur". Choisissez une extension qui correspond à votre terme de recherche.
    Comment ouvrir dans le navigateur à partir du code VS
  5. Cliquez sur le bouton "Installer".
    Comment ouvrir dans le navigateur à partir du code VS
  6. Recharger le programme.
  7. Sélectionnez l'Explorateur dans la barre d'outils de gauche.
    Comment ouvrir dans le navigateur à partir du code VS
  8. Trouvez votre fichier HTML dans l'explorateur et faites un clic droit dessus. Choisissez "Ouvrir dans le navigateur par défaut" ou "Ouvrir dans d'autres navigateurs".
    Comment ouvrir dans le navigateur à partir du code VS
  9. Si vous sélectionnez l'option "Ouvrir dans le navigateur par défaut", le fichier HTML sera lancé dans le navigateur défini par défaut. Si vous choisissez "Ouvrir dans d'autres navigateurs", vous devrez spécifier quel navigateur sera utilisé.

Vous pouvez trouver de nombreuses extensions utiles sur Visual Studio Marketplace . Ou vous pouvez obtenir les extensions Ouvrir dans le navigateur avec les avis d'utilisateurs les plus positifs ici : Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Comment ouvrir dans le navigateur dans VS Code sur un Mac

Visual Studio Code peut être mis à niveau à l'aide de diverses extensions qui augmentent les fonctionnalités du programme. Un type d'extension peut permettre d'ouvrir des fichiers HTML, PHP ou JS dans un navigateur par défaut ou autre. Voici comment activer cette option sur un Mac.

  1. À l'aide de Visual Studio Code Editor , ouvrez le fichier souhaité.
    Comment ouvrir dans le navigateur à partir du code VS
  2. Allez dans la barre d'outils à gauche et sélectionnez "Extensions".
    Comment ouvrir dans le navigateur à partir du code VS
  3. Cliquez sur la barre de recherche dans le panneau Extensions et écrivez "ouvrir dans le navigateur".
    Comment ouvrir dans le navigateur à partir du code VS
  4. Choisissez une extension et cliquez sur "Installer".
    Comment ouvrir dans le navigateur à partir du code VS
  5. Rechargez le logiciel.
  6. Allez dans la barre d'outils de gauche et sélectionnez Explorer.
    Comment ouvrir dans le navigateur à partir du code VS
  7. Localisez le fichier que vous souhaitez ouvrir dans le panneau Explorateur et cliquez dessus avec le bouton droit. Sélectionnez "Ouvrir dans le navigateur par défaut" ou "Ouvrir dans d'autres navigateurs".
    Comment ouvrir dans le navigateur à partir du code VS
  8. L'option "Ouvrir dans le navigateur par défaut" lancera le fichier à l'aide du navigateur présélectionné. "Ouvrir dans d'autres navigateurs" fera apparaître une invite où vous pourrez choisir l'un des navigateurs installés sur votre machine.
    Comment ouvrir dans le navigateur à partir du code VS

Visual Studio Marketplace propose une vaste sélection d'extensions pouvant ajouter de nouvelles fonctions à Visual Studio Code. Le site Web vaut la peine d'être exploré si vous souhaitez peaufiner davantage le programme. Et si vous êtes exclusivement intéressé par les extensions Ouvrir dans le navigateur, voici quelques suggestions : Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Ouvrir dans le raccourci du navigateur

Presque toutes les extensions Open in Browser pour Visual Studio Code sont livrées avec des raccourcis clavier activés. Cependant, les raccourcis ne sont pas uniformes. Au lieu de cela, chaque extension a une combinaison particulière de touches qui activera l'ouverture du fichier dans votre navigateur.

Voici les raccourcis clavier pour les extensions suggérées dans cet article.

  1. Extension 1 : « Ctrl + 1 » sur Windows, « Commande + 1 » sur Mac.
    Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS
  2. Extension 2 : "Ctrl + Alt + O" sous Windows, "Commande + Option (Alt) + O" sur Mac.Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS
  3. Extension 3 : « Ctrl + Maj + F9 » sous Windows, « Commande + Maj + F9 » sur Mac.
    Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS
  4. Extension 4 : « Ctrl + Maj + P » sous Windows, « Commande + Maj + P » sur Mac.
    Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS

Notez que ces raccourcis ne fonctionneront que sur leurs extensions respectives liées dans cet article. Si vous choisissez d'installer une extension différente, les raccourcis pertinents seront probablement répertoriés sur sa page Marketplace.

Exécution de HTML dans Visual Studio Code

Si vous souhaitez travailler avec HTML dans Visual Studio Code, voici quelques méthodes d'exécution de code HTML dans le programme.

La première méthode consiste à charger manuellement le fichier que vous souhaitez exécuter.

  1. Ouvrez Visual Studio Code et créez un nouveau fichier HTML.
    Comment ouvrir dans le navigateur à partir du code VS
  2. Allez dans "Fichier", puis cliquez sur "Enregistrer".
    Comment ouvrir dans le navigateur à partir du code VS
  3. À l'aide de HTML:5, activez le modèle pour HTML. Ensuite, ouvrez le fichier que vous avez enregistré à l'étape 2.
    Comment ouvrir dans le navigateur à partir du code VS
  4. Utilisez l'extension Ouvrir dans le navigateur que vous avez installée précédemment pour lancer le fichier dans votre navigateur.
  5. En laissant le navigateur ouvert, revenez à Visual Studio Code et modifiez le fichier HTML en enregistrant vos modifications.
    Comment ouvrir dans le navigateur à partir du code VS
  6. Revenez au navigateur et cliquez sur Actualiser. Vous devriez voir la page changer en fonction de votre modification.
    Comment ouvrir dans le navigateur à partir du code VS
  7. Répétez les étapes 5 et 6 pour vérifier votre progression à mesure que vous continuez à modifier le fichier HTML.

La méthode manuelle peut aider à garder une trace de votre travail. Cependant, il existe une solution encore meilleure : le chargement automatique. Cette option vous obligera à installer une autre extension, mais devrait en valoir la peine.

  1. Dans Visual Studio Code, accédez à Extensions, situé en bas de la barre d'outils de gauche.
    Comment ouvrir dans le navigateur à partir du code VS
  2. Dans la barre de recherche des extensions, saisissez "serveur en direct".
    Comment ouvrir dans le navigateur à partir du code VS
  3. Cliquez sur le bouton "Installer" à côté de l'extension Live Server.
    Comment ouvrir dans le navigateur à partir du code VS
  4. Créez et enregistrez un nouveau fichier HTML.
    Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS
  5. Dans l'explorateur de code Visual Studio, cliquez avec le bouton droit sur votre nouveau fichier. Sélectionnez "Ouvrir le serveur en direct".
    Comment ouvrir dans le navigateur à partir du code VS
  6. Le fichier HTML s'ouvrira dans le navigateur. Une fois que c'est fait, essayez de modifier le code HTML. Enregistrez votre progression.
    Comment ouvrir dans le navigateur à partir du code VS
    Comment ouvrir dans le navigateur à partir du code VS
  7. Dès que vous créez une modification dans le code et que vous l'enregistrez, votre navigateur doit s'actualiser et afficher le nouveau contenu. Vous n'aurez pas besoin de rafraîchir la page manuellement et pourrez à la place avoir une confirmation visuelle des changements en temps réel.
    Comment ouvrir dans le navigateur à partir du code VS

Autres extensions HTML de code Visual Studio utiles

Comme mentionné, Visual Studio Marketplace regorge d'excellents outils, dont beaucoup sont orientés vers HTML. Voici les dix extensions les plus utiles et les mieux notées pour HTML.

  • lit-plugin : Un outil qui met en évidence la syntaxe, vérifie la frappe et vous aide à compléter le code sans erreur. Cette extension a des règles personnalisables.
  • SCSS Everywhere : Une extension de saisie semi-automatique pour les définitions de classe pour HTML, SCSS, Elixir, SASS, PHP, CSS et de nombreux autres types de fichiers.
  • Extraits angulaires : ajoute des extraits angulaires pour une utilisation facile en HTML et TypeScript. L'extension fonctionne en dépliant un extrait une fois qu'il est partiellement saisi.
  • ES6 String HTML : Active la prise en charge du code de chaîne es6 pour la coloration syntaxique. Fonctionne avec HTML, CSS, XML, GLSL et d'autres formats.
  • Split HTML Attributes : Cette extension divisera les attributs HTML, ainsi que les props et directives Angular, Vue et React. Vous pouvez l'utiliser sur les balises d'ouverture et de fermeture automatique, ainsi que sur les sélections multiples.
  • Djaneiro - Django Snippets : Une vaste collection d'extraits pour les modèles HTML Django. L'utilisation de cette extension réduira considérablement le temps passé à taper.
  • Live Preview : L'extension Live Preview de Microsoft permet l'hébergement d'un serveur local. Si vous avez un projet qui n'utilise pas Angular, React ou d'autres outils serveur, cette extension permettra une prévisualisation HTML régulière et intégrée avec des actualisations de page en temps réel.
  • Oracle JET Core : Cette extension créée par Oracle Corporation fournit une prise en charge complète des données HTML personnalisées Oracle JET. Les extraits inclus compléteront automatiquement tous les attributs et balises JET.
  • Navigation CSS : Active Aller à la définition pour HTML vers CSS, HTML vers moins et HTML vers Sass. La commande Peek Definition est également activée.
  • Convertisseur de caractères HTML accentués : remplace de manière transparente les caractères spéciaux par les entités HTML appropriées. Cette extension est utile en fonction de la situation, mais essentielle lors de la gestion de chaînes localisables.

Vous pouvez exécuter le code Visual Studio à partir de votre navigateur

En plus d'exécuter des fichiers HTML dans un navigateur, il est également possible d'utiliser l'intégralité du code Visual Studio en ligne. Cela nécessite que vous lanciez une version particulière du programme développé pour une utilisation par navigateur.

Il convient de noter que cette version est beaucoup plus légère par rapport au bureau Visual Studio Code. Cependant, il peut s'agir d'une solution simple pour faciliter la navigation dans le référentiel et les fichiers, ainsi que pour les modifications mineures du code.

Si vous souhaitez essayer la variante de navigateur Visual Studio Code, vous pouvez commencer immédiatement en cliquant ici .

Obtenez vos fichiers HTML opérationnels

L'ouverture de fichiers HTML dans votre navigateur est facilitée par l'extension dédiée pour Visual Studio Code. Si vous décidez d'explorer les vastes offres d'extensions pour cet outil de codage, la fonction Ouvrir dans le navigateur ne sera que le début de votre voyage.

Avez-vous réussi à ouvrir votre fichier HTML dans le navigateur de votre choix ? Quelle extension as-tu utilisé ? Faites-nous savoir dans la section commentaires ci-dessous.

Sign up and earn $1000 a day ⋙

Leave a Comment

Supprimez complètement les fichiers les plus tenaces sous Windows

Supprimez complètement les fichiers les plus tenaces sous Windows

Lorsque vous ne pouvez pas ouvrir, modifier ou supprimer un fichier dans l'Explorateur de fichiers Windows, le fichier est toujours ouvert dans un programme exécuté en arrière-plan ou quelque chose ne se ferme pas correctement.

Comment configurer un double écran parfait sous Windows avec FancyZones

Comment configurer un double écran parfait sous Windows avec FancyZones

Si vous utilisez régulièrement des configurations multi-écrans, FancyZones peut changer la donne. Cet utilitaire Windows PowerToys vous permet de personnaliser entièrement la disposition de votre bureau.

Comment utiliser Google Authenticator sur un PC Windows

Comment utiliser Google Authenticator sur un PC Windows

Google Authenticator peut être utile, mais il est ennuyeux que Google n'ait pas encore créé d'application de bureau officielle. Cependant, vous pouvez utiliser Google Authenticator sur votre PC Windows par d’autres moyens. Explorons les différentes façons dont vous pouvez utiliser Google Authenticator sur votre PC.

Comment corriger lerreur de carte réseau introuvable sous Windows 10

Comment corriger lerreur de carte réseau introuvable sous Windows 10

De nombreuses personnes rencontrent des problèmes avec des adaptateurs réseau qui disparaissent du Gestionnaire de périphériques ou reçoivent un message indiquant qu'un adaptateur réseau est manquant. Cet article vous expliquera comment résoudre le problème du pilote de carte réseau manquant sous Windows 10.

Comment masquer/afficher la barre des tâches sur Windows 11

Comment masquer/afficher la barre des tâches sur Windows 11

Sous Windows 11, la barre des tâches n’occupe qu’une petite partie de l’espace d’affichage en bas de l’écran.

Comment créer un démarrage USB à laide de linvite de commande

Comment créer un démarrage USB à laide de linvite de commande

Créer une clé USB bootable pour installer Windows devient de plus en plus populaire. Il existe de nombreux logiciels qui permettent de créer une clé USB bootable en quelques clics. Mais si vous connaissez l'invite de commande, vous pouvez utiliser cet outil pour créer une clé USB bootable sans installer de logiciel supplémentaire.

Comment restaurer WordPad sous Windows 11

Comment restaurer WordPad sous Windows 11

Microsoft va supprimer son éditeur de texte enrichi gratuit WordPad à la fin de 2023 dans le but de faire passer les utilisateurs vers des applications Office premium.

Comment réaliser des captures décran longues et défilantes sous Windows

Comment réaliser des captures décran longues et défilantes sous Windows

Ce guide présente les meilleurs outils pour prendre de longues captures d’écran défilantes dans Windows 11 et Windows 10.

Comment définir la visionneuse de photos Windows comme visionneuse de photos par défaut sur Windows 11

Comment définir la visionneuse de photos Windows comme visionneuse de photos par défaut sur Windows 11

Windows Photo Viewer a été lancé pour la première fois en même temps que Windows XP et est rapidement devenu l'un des outils les plus fréquemment utilisés sous Windows.

Windows 11 est sur le point dajouter une section de conseils de configuration système

Windows 11 est sur le point dajouter une section de conseils de configuration système

Les derniers aperçus de Windows 11 publiés par Microsoft cette semaine incluent une section À propos améliorée dans l'application Paramètres, où les utilisateurs peuvent obtenir plus d'informations sur le matériel à l'intérieur de leur ordinateur.

Windows 11 permet désormais aux utilisateurs de taper facilement avec une manette Xbox

Windows 11 permet désormais aux utilisateurs de taper facilement avec une manette Xbox

Pour résoudre les problèmes courants rencontrés par les joueurs sur PC, Microsoft a enfin rendu le système d'exploitation Windows plus facile à naviguer avec une manette Xbox.

AMD exige officiellement Windows 11 pour ses dernières cartes graphiques

AMD exige officiellement Windows 11 pour ses dernières cartes graphiques

Dans son nouveau document de support UEFI, AMD indique que les GPU Radeon à partir de la série 9000 ne prendront officiellement en charge que le mode UEFI.

Comment mettre à jour les pilotes graphiques sous Windows 10 et 11

Comment mettre à jour les pilotes graphiques sous Windows 10 et 11

La mise à jour du pilote de votre carte graphique vers la dernière version peut aider à résoudre les problèmes de résolution d'écran, de jeux et de performances graphiques globales de votre ordinateur.

Découvrez la nature de lUAC dans Windows et comment utiliser ce paramètre pour contrôler les autorisations des utilisateurs Windows.

Découvrez la nature de lUAC dans Windows et comment utiliser ce paramètre pour contrôler les autorisations des utilisateurs Windows.

Dans l'article suivant, Quantrimang.com entrera dans les détails spécifiques de ce qu'est l'UAC, de son fonctionnement et des avantages de l'activation de cette fonctionnalité dans n'importe quelle version de Windows.

Conseils utiles pour ne jamais manquer despace de stockage Windows

Conseils utiles pour ne jamais manquer despace de stockage Windows

Les notifications constantes concernant un espace de stockage faible vous rendront fou. Alors commencez à mettre en œuvre des habitudes intelligentes pour vous assurer de ne jamais manquer d’espace de stockage !