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.

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 .
   
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.
   
3. Cliquez sur la barre de recherche pour activer l'écriture.
   
4. Saisissez "ouvrir dans le navigateur". Choisissez une extension qui correspond à votre terme de recherche.
   
5. Cliquez sur le bouton "Installer".
   
6. Recharger le programme.
7. Sélectionnez l'Explorateur dans la barre d'outils de gauche.
   
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".
   
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é.
   
2. Allez dans la barre d'outils à gauche et sélectionnez "Extensions".
   
3. Cliquez sur la barre de recherche dans le panneau Extensions et écrivez "ouvrir dans le navigateur".
   
4. Choisissez une extension et cliquez sur "Installer".
   
5. Rechargez le logiciel.
6. Allez dans la barre d'outils de gauche et sélectionnez Explorer.
   
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".
   
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.
   

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.
   
   
2. Extension 2 : "Ctrl + Alt + O" sous Windows, "Commande + Option (Alt) + O" sur Mac.
   
3. Extension 3 : « Ctrl + Maj + F9 » sous Windows, « Commande + Maj + F9 » sur Mac.
   
   
4. Extension 4 : « Ctrl + Maj + P » sous Windows, « Commande + Maj + P » sur Mac.
   
   

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.
   
2. Allez dans "Fichier", puis cliquez sur "Enregistrer".
   
3. À l'aide de HTML:5, activez le modèle pour HTML. Ensuite, ouvrez le fichier que vous avez enregistré à l'étape 2.
   
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.
   
6. Revenez au navigateur et cliquez sur Actualiser. Vous devriez voir la page changer en fonction de votre modification.
   
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.
   
2. Dans la barre de recherche des extensions, saisissez "serveur en direct".
   
3. Cliquez sur le bouton "Installer" à côté de l'extension Live Server.
   
4. Créez et enregistrez un nouveau fichier HTML.
   
   
5. Dans l'explorateur de code Visual Studio, cliquez avec le bouton droit sur votre nouveau fichier. Sélectionnez "Ouvrir le serveur en direct".
   
6. Le fichier HTML s'ouvrira dans le navigateur. Une fois que c'est fait, essayez de modifier le code HTML. Enregistrez votre progression.
   
   
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.
   

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.