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

Comment ajouter la fin de tâche à la barre des tâches de Windows 11

Comment ajouter la fin de tâche à la barre des tâches de Windows 11

Windows 11 dispose d'une fonctionnalité qui ajoute un bouton Fin de tâche directement sur la barre des tâches, vous n'avez donc pas besoin d'accéder au Gestionnaire des tâches pour fermer les applications qui ne répondent pas.

Outils damélioration visuelle indispensables pour le bureau Windows

Outils damélioration visuelle indispensables pour le bureau Windows

Si vous en avez assez de regarder la même interface tous les jours, ces outils amélioreront votre expérience de bureau.

Windows 11 ne respectera pas votre vie privée tant que vous n’aurez pas effectué ces modifications !

Windows 11 ne respectera pas votre vie privée tant que vous n’aurez pas effectué ces modifications !

Windows 11 a la réputation d'être un système d'exploitation peu respectueux de la vie privée, avec de nombreux paramètres par défaut pouvant poser problème. Mais rassurez-vous : il existe des moyens de reprendre le contrôle sur ce point.

Comment exécuter et arrêter le démarrage en mode minimal sous Windows 11

Comment exécuter et arrêter le démarrage en mode minimal sous Windows 11

Clean Boot est une technique de dépannage utilisée pour démarrer Windows avec un ensemble de pilotes et de programmes de démarrage essentiels.

Récupérez Windows Photo Viewer sur Windows 10 pour afficher les photos plus rapidement, Photos est trop lent !

Récupérez Windows Photo Viewer sur Windows 10 pour afficher les photos plus rapidement, Photos est trop lent !

Si vous n'aimez pas Photos sur Windows 10 et que vous souhaitez afficher des photos à l'aide de la visionneuse de photos Windows sur Windows 10, suivez ce guide pour intégrer la visionneuse de photos Windows à Windows 10, vous aidant à afficher des photos plus rapidement.

Comment cloner un disque dur Windows sans logiciel tiers

Comment cloner un disque dur Windows sans logiciel tiers

Le processus de clonage consiste à déplacer des données d'un périphérique de stockage vers un autre (dans ce cas, un disque dur) avec une copie exacte copiée à partir du lecteur de destination.

Comment désactiver le démarrage rapide sous Windows

Comment désactiver le démarrage rapide sous Windows

Le démarrage rapide de Windows 11 aide votre ordinateur à démarrer plus rapidement, mais cela peut également être la raison pour laquelle votre ordinateur Windows ne s'éteint pas complètement.

Comment corriger les erreurs de disque sous Windows

Comment corriger les erreurs de disque sous Windows

Les erreurs liées au lecteur de votre ordinateur peuvent empêcher votre système de démarrer correctement et restreindre l'accès à vos fichiers et applications.

Instructions pour la configuration et la gestion du serveur FTP sous Windows 10

Instructions pour la configuration et la gestion du serveur FTP sous Windows 10

Si vous souhaitez créer un cloud privé pour partager et transférer des fichiers volumineux sans aucune limite, vous pouvez créer un serveur FTP (File Transfer Protocol Server) sur votre ordinateur Windows 10.

Quest-ce que le dossier ProgramData sous Windows ?

Quest-ce que le dossier ProgramData sous Windows ?

Dans les versions plus récentes de Windows, vous trouverez un dossier appelé ProgramData sur votre disque système (généralement C:\). Cependant, ce dossier est masqué ; vous ne pouvez donc le voir que si vous activez l'affichage des dossiers et des fichiers dans l'Explorateur de fichiers.

Comment ouvrir des fichiers EPUB sous Windows 10 (sans Microsoft Edge)

Comment ouvrir des fichiers EPUB sous Windows 10 (sans Microsoft Edge)

Le nouveau navigateur Edge de Microsoft, basé sur Chromium, ne prend plus en charge les fichiers eBook EPUB. Vous aurez besoin d'une application de lecture EPUB tierce pour consulter les fichiers EPUB sous Windows 10. Voici quelques options gratuites intéressantes.

Comment afficher les applications de création de texte et dimages de Windows 11

Comment afficher les applications de création de texte et dimages de Windows 11

À partir de Windows 11 build 26120.4741 (Beta 24H2) et build 26200.5710 (Dev 25H2), les utilisateurs peuvent voir quelles applications tierces ont utilisé des modèles d'IA basés sur Windows.

Comment utiliser Flyby11 pour installer Windows 11 sur un ancien ordinateur

Comment utiliser Flyby11 pour installer Windows 11 sur un ancien ordinateur

La prise en charge de Windows 10 touche à sa fin, et si votre ordinateur ne peut plus exécuter Windows 11, il est voué à la casse. Mais il existe un outil astucieux qui permet de faire fonctionner Windows 11 sur votre ancien ordinateur grâce à un simple hack.

Tout sur le mode Jeu sur Windows

Tout sur le mode Jeu sur Windows

Le mode Jeu, l'accélérateur de performances de Windows 10/11, peut faire bien plus que simplement extraire quelques images supplémentaires par seconde de votre FPS préféré.

Comment utiliser SpeedFan pour vérifier la température du processeur et la vitesse du ventilateur de lordinateur

Comment utiliser SpeedFan pour vérifier la température du processeur et la vitesse du ventilateur de lordinateur

L'outil SpeedFan vérifie la température de votre ordinateur, l'utilisation du processeur et la vitesse du ventilateur afin que vous puissiez le refroidir.