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

7 façons intelligentes dutiliser votre moniteur sans ordinateur

7 façons intelligentes dutiliser votre moniteur sans ordinateur

Lorsqu'on pense à un moniteur, on l'imagine souvent connecté à un PC ou un ordinateur portable. Pourtant, ce moniteur peut en réalité fonctionner avec de nombreux autres appareils.

Pourquoi y a-t-il une icône de verrouillage sur le lecteur et comment la supprimer ?

Pourquoi y a-t-il une icône de verrouillage sur le lecteur et comment la supprimer ?

Vous vous demandez pourquoi il y a une icône de cadenas sur un lecteur dans l'Explorateur de fichiers ? Cet article explique ce que c'est et comment supprimer l'icône de cadenas d'un lecteur sous Windows 10.

Comment modifier le format des nombres dans Windows 11

Comment modifier le format des nombres dans Windows 11

Les formats numériques déterminent l'affichage des nombres, notamment le choix du séparateur décimal (comme un point ou une virgule) et du séparateur de milliers. Voici comment modifier le format des nombres sous Windows 11.

Comment vérifier lhistorique de lordinateur pour voir si quelquun a accédé à votre ordinateur et la utilisé ?

Comment vérifier lhistorique de lordinateur pour voir si quelquun a accédé à votre ordinateur et la utilisé ?

Si vous pensez que quelqu'un accède à votre ordinateur et l'utilise sans autorisation, vous pouvez appliquer certaines des astuces ci-dessous pour vérifier l'historique d'activation/désactivation de l'ordinateur, afficher les activités récentes sur l'ordinateur pour confirmer et réaffirmer cela.

Comment télécharger, mettre à jour et dépanner les pilotes USB sous Windows 10

Comment télécharger, mettre à jour et dépanner les pilotes USB sous Windows 10

Les périphériques USB sont devenus indispensables dans la vie quotidienne, nous permettant de connecter une grande variété de matériel essentiel à nos PC.

4 types de données Windows qui augmentent en taille : comment les contrôler ?

4 types de données Windows qui augmentent en taille : comment les contrôler ?

Bien que Windows Storage Sense supprime efficacement les fichiers temporaires, certains types de données sont permanents et continuent de s’accumuler.

Erreurs courantes lors des tests de vitesse Internet

Erreurs courantes lors des tests de vitesse Internet

Si les résultats semblent plus lents que prévu, ne blâmez pas trop vite votre FAI : des erreurs lors de l'exécution du test peuvent fausser vos chiffres.

Comment corriger lerreur de perte de son lors de la mise à jour de Windows 11

Comment corriger lerreur de perte de son lors de la mise à jour de Windows 11

Le problème de perte de son lors de la mise à jour de Windows 11 peut être lié au logiciel ou au pilote audio de l'ordinateur. Vous trouverez ci-dessous des instructions pour corriger cette erreur.

Comment changer le format de devise dans Windows 11

Comment changer le format de devise dans Windows 11

Ce guide vous montrera comment modifier le format de devise utilisé pour votre compte dans Windows 10 et Windows 11.

Instructions pour linstallation de .NET Framework 3.5 sur Windows 10

Instructions pour linstallation de .NET Framework 3.5 sur Windows 10

Ce guide vous montrera différentes manières d’installer .NET Framework 3.5 en ligne et hors ligne dans Windows 10.

Voici comment supprimer la partition de récupération et la partition de récupération de 450 Mo sous Windows 10

Voici comment supprimer la partition de récupération et la partition de récupération de 450 Mo sous Windows 10

La partition de récupération est une partition distincte sur le disque dur ou le SSD de votre ordinateur et est utilisée pour restaurer ou réinstaller le système d'exploitation en cas de panne du système.

Comment utiliser efficacement plusieurs écrans dordinateur en même temps

Comment utiliser efficacement plusieurs écrans dordinateur en même temps

Les configurations à deux écrans sont de plus en plus courantes de nos jours. Le multitâche sur un seul écran est trop restrictif.

Les méthodes et personnalisations de cet article vous aideront à accélérer votre Windows 10 comme le vent.

Les méthodes et personnalisations de cet article vous aideront à accélérer votre Windows 10 comme le vent.

Vous souhaitez accélérer Windows 10, améliorer sa vitesse ou accélérer son démarrage ? Cet article vous présente toutes les solutions pour accélérer Windows 10. Lisez-les et appliquez-les pour accélérer votre ordinateur Windows 10 !

Ces alternatives sûres au Wi-Fi public aident à protéger vos données

Ces alternatives sûres au Wi-Fi public aident à protéger vos données

Que vous travailliez dans un café ou que vous consultiez vos e-mails à l'aéroport, ces alternatives plus sécurisées protégeront vos données sans sacrifier votre connexion.

Instructions pour modifier la taille des icônes dans la barre des tâches de Windows 11

Instructions pour modifier la taille des icônes dans la barre des tâches de Windows 11

Les utilisateurs peuvent ajuster et modifier la taille des icônes de la barre des tâches pour qu'elles soient plus petites ou plus grandes, en fonction des besoins de chacun.