Comment ouvrir dans le navigateur à partir de VS Code

2022/06/10

Si vous utilisez des fichiers HTML, PHP ou JS, vous pouvez les ouvrir dans un navigateur à partir de Visual Studio Code. Cependant, il n’y a pas d’option intégrée pour cela. Cela peut être gênant, surtout si vous souhaitez voir rapidement le résultat de votre encodage.

Heureusement, vous pouvez activer la fonction « Ouvrir dans le navigateur » d’autres manières. Cet article vous montrera comment.

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 sous Windows consiste à utiliser l’extension. L’installation d’extensions dans Visual Studio Code est relativement facile, tout comme leur utilisation pour ouvrir des fichiers dans un navigateur.

Ouvrez le fichier HTML dans l’éditeur de code Visual Studio .

Dans la barre d’outils verticale la plus à gauche, cliquez sur Extensions. Alternativement, vous pouvez utiliser le raccourci clavier « Ctrl + Maj + X » pour lancer les extensions.

Cliquez sur la barre de recherche pour activer l’entrée.

Tapez « ouvrir dans le navigateur ». Sélectionnez l’extension qui correspond à votre requête de recherche.

Cliquez sur le bouton « Installer ».

Recharger le programme.
Sélectionnez Explorateur de fichiers dans la barre d’outils de gauche.

Trouvez votre fichier HTML dans l’explorateur de fichiers et faites un clic droit dessus. Sélectionnez « Ouvrir dans le navigateur par défaut » ou « Ouvrir dans d’autres navigateurs ».

Si vous sélectionnez l’option « Ouvrir dans le navigateur par défaut », le fichier HTML s’exécutera dans n’importe quel navigateur par défaut. Si vous sélectionnez « Ouvrir dans d’autres navigateurs », vous devrez spécifier quel navigateur sera utilisé.

Vous pouvez trouver de nombreuses extensions utiles dans 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 Mac

Visual Studio Code peut être mis à jour avec diverses extensions qui augmentent les fonctionnalités du programme. Un type d’extension vous permet d’ouvrir des fichiers HTML, PHP ou JS dans votre navigateur par défaut ou dans un autre navigateur. Voici comment activer cette option sur un Mac.

À l’ aide de l’éditeur de code Visual Studio, ouvrez le fichier souhaité.

Allez dans la barre d’outils à gauche et sélectionnez « Extensions ».

Cliquez sur la barre de recherche dans la barre d’extension et écrivez « ouvrir dans le navigateur ».

Sélectionnez une extension et cliquez sur Installer.

Rechargez le logiciel.
Allez dans la barre d’outils de gauche et sélectionnez Explorateur de fichiers.

Trouvez le fichier que vous souhaitez ouvrir dans la barre d’exploration et faites un clic droit dessus. Sélectionnez « Ouvrir dans le navigateur par défaut » ou « Ouvrir dans d’autres navigateurs ».

L’option « Ouvrir dans le navigateur par défaut » ouvrira le fichier à l’aide du navigateur présélectionné. « Ouvrir dans d’autres navigateurs » fera apparaître une invite dans laquelle vous pourrez sélectionner l’un des navigateurs installés sur votre ordinateur.

Visual Studio Marketplace offre une grande variété d’extensions qui peuvent ajouter de nouvelles fonctionnalités à Visual Studio Code. Le site Web mérite d’être exploré si vous souhaitez personnaliser davantage le programme. Et si seules les extensions Ouvrir dans le navigateur vous intéressent, 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 inclus. Cependant, les étiquettes ne sont pas uniformes. Au lieu de cela, chaque extension a une combinaison de touches spécifique qui active l’ouverture du fichier dans votre navigateur.

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

Extension 1 : « Ctrl + 1 » sous Windows, « Commande + 1 » sur Mac.

Extension 2 : « Ctrl + Alt + O » sous Windows, « Commande + Option (Alt) + O » sur Mac.

Extension 3 : « Ctrl + Maj + F9 » sous Windows, « Commande + Maj + F9 » sur Mac.

Extension 4 : « Ctrl + Maj + P » sous Windows, « Commande + Maj + P » sur Mac.

Veuillez noter que ces raccourcis ne fonctionneront qu’avec les extensions correspondantes liées dans cet article. Si vous choisissez d’installer une autre extension, les raccourcis correspondants seront très 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 façons d’exécuter du code HTML dans votre programme.

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

Ouvrez Visual Studio Code et créez un nouveau fichier HTML.

Allez dans Fichier, puis cliquez sur Enregistrer.

À l’aide de HTML:5, activez le modèle pour HTML. Ouvrez ensuite le fichier que vous avez enregistré à l’étape 2.

Utilisez l’extension « Ouvrir dans le navigateur » que vous avez installée précédemment pour lancer le fichier dans le navigateur.
Avec votre navigateur ouvert, revenez à Visual Studio Code et modifiez le fichier HTML, en enregistrant vos modifications.

Revenez au navigateur et cliquez sur Actualiser. Vous devriez voir la page changer en fonction de votre modification.

Répétez les étapes 5 et 6 pour vérifier votre progression tout en continuant à 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 cela en vaut la peine.

Dans Visual Studio Code, accédez à la section « Extensions » située en bas de la barre d’outils de gauche.

Dans la barre de recherche des extensions, tapez « live server ».

Cliquez sur le bouton « Installer » à côté de l’extension Live Server.

Créez et enregistrez un nouveau fichier HTML.

Dans l’explorateur de code Visual Studio, cliquez avec le bouton droit sur le nouveau fichier. Sélectionnez « Ouvrir le serveur en direct ».

Le fichier HTML s’ouvrira dans le navigateur. Une fois que cela se produit, essayez de modifier le code HTML. Enregistrez votre progression.

Dès que vous apportez une modification au code et que vous l’enregistrez, votre navigateur devrait s’actualiser en affichant le nouveau contenu. Vous n’aurez pas besoin d’actualiser la page manuellement, mais vous pourrez confirmer visuellement les modifications 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 HTML. Voici dix des extensions HTML les plus utiles et les mieux notées.

lit-plugin : Un outil qui fournit la coloration syntaxique, valide les entrées et aide à compléter le code sans erreurs. Cette extension a des règles personnalisées.
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éveloppant le fragment après qu’il soit partiellement imprimé.
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 plus encore.
Strip HTML Attributes : Cette extension supprimera les attributs HTML ainsi que les props et directives Angular, Vue et React. Vous pouvez l’utiliser pour ouvrir et fermer automatiquement des balises, ainsi que pour des 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 d’héberger un serveur local. Si vous avez un projet qui n’utilise pas Angular, React ou d’autres outils côté serveur, cette extension vous permettra d’effectuer des aperçus HTML réguliers et en ligne avec une actualisation de la page en temps réel.
Oracle JET Core : Créée par Oracle Corporation, cette extension fournit une prise en charge complète des données personnalisées Oracle JET HTML. Les extraits inclus rempliront automatiquement tous les attributs et balises JET.
Navigation CSS : vous permet de naviguer vers les définitions de HTML dans CSS, HTML dans Less et HTML dans Sass. La commande Peek Definition est également incluse.
Convertisseur de caractères HTML accentués : remplace en douceur les caractères spéciaux par les entités HTML correspondantes. Cette extension est utile dans certaines situations, mais nécessaire lorsqu’il s’agit de chaînes localisables.

Vous pouvez exécuter Visual Studio Code depuis votre navigateur

En plus d’exécuter des fichiers HTML dans un navigateur, vous pouvez également utiliser tout le code Visual Studio en ligne. Cela nécessite que vous exécutiez une version spécifique d’un programme conçu pour être utilisé dans un navigateur.

Il convient de noter que cette version est beaucoup plus légère que Visual Studio Code for Desktop. Cependant, cela peut être une solution simple pour une navigation facile dans le référentiel et les fichiers, et pour apporter des modifications mineures au code.

Si vous souhaitez essayer la version basée sur un navigateur de Visual Studio Code, vous pouvez commencer immédiatement en cliquant ici .

Préparez vos fichiers HTML et exécutez-les

L’ouverture de fichiers HTML dans le navigateur est facilitée par une extension personnalisée pour Visual Studio Code. Si vous choisissez d’explorer les nombreuses offres d’extensions pour cet outil de codage, la fonctionnalité « Ouvrir dans le navigateur » ne sera que le début de votre voyage.

Avez-vous pu ouvrir le fichier HTML dans le navigateur de votre choix ? Quelle extension as-tu utilisé ? Faites-le nous savoir dans les commentaires ci-dessous.