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

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Qu'est-ce qu'un VPN ? Quels sont ses avantages et ses inconvénients ? Avec WebTech360, découvrons la définition d'un VPN et comment appliquer ce modèle et ce système au travail.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La sécurité Windows ne se limite pas à une simple protection contre les virus. Elle protège contre le phishing, bloque les rançongiciels et empêche l'exécution d'applications malveillantes. Cependant, ces fonctionnalités sont difficiles à repérer : elles sont dissimulées derrière des couches de menus.

Le codage n’est pas aussi difficile que vous le pensez

Le codage n’est pas aussi difficile que vous le pensez

Une fois que vous aurez appris et essayé par vous-même, vous constaterez que le cryptage est incroyablement facile à utiliser et incroyablement pratique pour la vie de tous les jours.

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Dans l'article suivant, nous présenterons les opérations de base pour récupérer des données supprimées sous Windows 7 avec l'outil d'assistance Recuva Portable. Avec Recuva Portable, vous pouvez stocker vos données sur n'importe quelle clé USB et les utiliser à tout moment. Compact, simple et facile à utiliser, cet outil offre les fonctionnalités suivantes :

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

CCleaner recherche les fichiers en double en quelques minutes seulement, puis vous permet de décider lesquels peuvent être supprimés en toute sécurité.

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Déplacer le dossier de téléchargement du lecteur C vers un autre lecteur sous Windows 11 vous aidera à réduire la capacité du lecteur C et aidera votre ordinateur à fonctionner plus facilement.

Comment arrêter les mises à jour Windows sur PC

Comment arrêter les mises à jour Windows sur PC

Il s’agit d’un moyen de renforcer et d’ajuster votre système afin que les mises à jour se produisent selon votre propre calendrier, et non celui de Microsoft.

Comment afficher les extensions de fichiers et les afficher sous Windows

Comment afficher les extensions de fichiers et les afficher sous Windows

L'Explorateur de fichiers Windows propose de nombreuses options pour modifier l'affichage des fichiers. Ce que vous ignorez peut-être, c'est qu'une option importante est désactivée par défaut, bien qu'elle soit cruciale pour la sécurité de votre système.

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

Avec les bons outils, vous pouvez analyser votre système et supprimer les logiciels espions, les logiciels publicitaires et autres programmes malveillants qui peuvent se cacher sur votre système.

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

Vous trouverez ci-dessous une liste de logiciels recommandés lors de l'installation d'un nouvel ordinateur, afin que vous puissiez choisir les applications les plus nécessaires et les meilleures sur votre ordinateur !

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Conserver l'intégralité d'un système d'exploitation sur une clé USB peut s'avérer très utile, surtout si vous n'avez pas d'ordinateur portable. Mais ne pensez pas que cette fonctionnalité soit limitée aux distributions Linux ; il est temps d'essayer de cloner votre installation Windows.

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

La désactivation de certains de ces services peut vous faire économiser une quantité importante de batterie sans affecter votre utilisation quotidienne.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

Ctrl + Z est une combinaison de touches extrêmement courante sous Windows. Elle permet d'annuler des actions dans tous les domaines de Windows.

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Les URL raccourcies sont pratiques pour nettoyer les liens trop longs, mais elles masquent également la véritable destination. Pour éviter les logiciels malveillants ou le phishing, cliquer aveuglément sur ce lien n'est pas une bonne idée.

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Après une longue attente, la première mise à jour majeure de Windows 11 est officiellement sortie.