Comment exécuter un fichier HTML dans VS Code
Visual Studio Code (VS Code) apparaît comme une excellente alternative aux éditeurs de code plus grands et plus complexes pour ceux qui débutent dans le codage. Pour les développeurs Web, en particulier, il offre de nombreuses possibilités d’écriture et de modification de sections HTML, ainsi que de nombreuses fonctionnalités qui font du développement un parcours passionnant.
Mais comment exécuter exactement un fichier HTML dans VS Code si vous Vous êtes nouveau dans le monde du développement ? Répondons à cette question et explorons les fonctions que VS Code réserve aux codeurs HTML.
Exécuter un fichier HTML dans VS Code
Même si VS Code n’a pas d’aperçu HTML évident fonctionnalité dès que vous le lancez, il compense avec une vaste gamme d’extensions. Ces modules complémentaires communautaires peuvent combler le vide et vous offrir une fonctionnalité de visualisation en temps réel comme si elle avait toujours été intégrée. Voici comment les utiliser :
Ouvrez le Affichez les extensions dans VS Code en appuyant sur Ctrl+Shift+X. À partir de là, vous pouvez rechercher n’importe quelle extension qui vous convient.
Pour trouver l’extension correcte, saisissez des mots-clés tels que « vue en direct » ou « aperçu HTML » dans cette vue. Chaque extension possède des fonctionnalités différentes, telles que des aperçus en direct faciles à utiliser ou des vues de navigateur intégrées dans l’environnement VS Code.
Une fois que vous avez trouvé l’extension qui semble adapté à votre projet, cliquez sur « Installer » et il fera partie de votre environnement Visual Studio Code pour une utilisation future.
Cliquez sur le bouton d’aperçu en écran partagé pour afficher votre fichier HTML dans l’écran partagé.
Ensuite, il est temps d’explorer le nouvelles fonctionnalités de l’extension que vous venez d’installer. Consultez sa documentation ou voyez quelles options sont disponibles via les menus contextuels du clic droit dans votre fichier HTML.
Exécutez HTML dans le terminal
Si vous Je préfère ne pas jouer avec les extensions pour l’instant, le terminal de VS Code vous permet d’exécuter un fichier HTML sans extensions, même si c’est un peu plus complexe :
Ouvrez ou créez un nouveau fichier pour le code HTML.
Cliquez sur Terminal en haut et sélectionnez Nouveau terminal pour l’ouvrir.
Basculez vers l’emplacement de votre fichier HTML avec le 
Tapez « start » suivi du nom du fichier HTML et appuyez sur Entrée. Cela lancera le fichier HTML dans votre navigateur par défaut.
Ouvrir dans le navigateur
Retour aux extensions, une autre extension pratique pour HTML et Web Le développement, en général, est « Ouvrir dans le navigateur », qui ouvre un fichier HTML dans le navigateur Web directement à partir de VS Code. Voici comment procéder :
Cliquez sur le bouton Extensions sur le côté.
Tapez « ouvrir dans le navigateur » dans la barre de recherche pour trouver l’extension.
Une fois que vous voyez l’extension éponyme, installez-la.
Après l’avoir installé, cliquez avec le bouton droit n’importe où dans votre code HTML.
Sélectionnez « Ouvrir dans le navigateur par défaut » ou choisissez un autre navigateur dans « Ouvrir dans un autre navigateur ». option.
Fonctionnalités avancées pour le développement HTML dans VS Code
Une fois que vous avez configuré votre environnement de développement et obtenu toutes les extensions appropriées, votre projet a vient juste de commencer. Explorons brièvement les fonctionnalités de VS Code que vous pouvez utiliser lors de la visualisation de fichiers HTML pour faciliter votre travail.
IntelliSense
IntelliSense est le compagnon de programmation numérique qui accélère le développement en remplissant automatiquement votre code au fur et à mesure que vous tapez. Il devine le code le plus probable et le fait de manière intelligente et non invasive. IntelliSense offre une aide instantanée lors de l’écriture de structures HTML, en prédisant correctement le moment où vous devez fermer les balises et en fournissant une liste contextuelle d’éléments ou d’attributs potentiels.
Cette fonctionnalité vous évite de perdre du temps à faire défiler les syntaxes ou manuellement. insérer et tout mémoriser. De cette façon, vous pouvez créer un site Web plus rapidement que jamais.
Validation
Faire des erreurs de codage est inévitable, peu importe votre expérience ou vos connaissances : les erreurs arrivent à tout le monde. Cependant, trouver ces erreurs à temps peut vous éviter un débogage sans fin. VS Code dispose d’une validation intégrée astucieuse qui soumet votre HTML, JavaScript et CSS intégrés sous contrôle pour détecter les bogues avant qu’ils ne s’infiltrent dans votre site Web et ne provoquent des perturbations pour les utilisateurs. Un site Web sans bug est celui qui attire les utilisateurs et les incite à rester.
Formatage
Suivre le formatage correct peut parfois être intimidant, surtout si vous êtes sur le point”jetez des trucs dessus et voyez ce qui fonctionne. L’organisation n’est pas toujours facile. Mais sans une structure appropriée, les choses peuvent rapidement devenir compliquées et déroutantes pour vous et les autres développeurs qui collaborent éventuellement avec vous.
Avec VS Code Avec la commande Formater le document (Ctrl+Maj+I), vous pouvez garder le code propre et ordonné, conformément aux normes de l’industrie. Il s’agit d’une modification apparemment minime en un seul clic, mais une fois que vous la voyez, vous appréciez instantanément sa fonctionnalité.
Emmet Snippets
Les extraits d’Emmet pour VS Code peuvent accélérer considérablement votre développement. Imaginez que vous ayez seize boutons à concevoir pour une barre de navigation. Écrire manuellement les balises de chaque bouton serait une tâche fastidieuse. Les extraits vous permettent Accomplissez facilement ces tâches répétitives afin de disposer de plus de temps pour le cœur de votre projet.
Grâce à ces puissantes abréviations abrégées, la maîtrise des structures HTML (et CSS) complexes est simple. Vous pouvez ajouter le code que vous comptez utiliser souvent et simplement l’ajouter à votre fichier. Que vous soyez un débutant ou un codeur expérimenté, vous ne voudrez pas manquer le gain de temps que représente l’utilisation d’extraits de code.
Des extensions à gogo
Le VS Code Marketplace regorge de fonctionnalités. avec une gamme d’extensions. La plupart d’entre eux sont réalisés par des membres passionnés de la communauté et des développeurs comme vous, qui partagent leurs connaissances pour faciliter le travail des autres. Les outils de peluchage maintiennent votre code parfaitement propre, les serveurs en direct mettent à jour votre navigateur en arrière-plan au fur et à mesure du rendu, et bien plus encore. C’est une centrale électrique pour créer des applications Web sophistiquées. Si vous avez un besoin de codage, il existe probablement une extension sur Marketplace prête à y répondre.
Sélecteur de couleurs
Dans le développement Web, les visuels sont essentiels. Avec le sélecteur de couleurs VS Code, vous n’avez pas besoin de mémoriser des codes hexadécimaux complexes. Choisissez les couleurs, observez leur apparence en temps réel et explorez et comprenez même comment elles se connectent aux teintes et nuances voisines.
Personnalisation de VS Code pour le développement HTML
VS Code n’est pas un éditeur fabriqué en usine qui doit avoir une certaine apparence. Supposons que vous souhaitiez des thèmes sombres pour des séances de codage toute la nuit ou une visualisation plus accessible avec moins de fatigue oculaire, un espacement des onglets spécifié pour améliorer la composition et l’organisation du code, ou des formats de données personnalisés conçus pour des projets exclusifs. Dans ce cas, VS Code propose de nombreux choix de personnalisation.
HTML, en particulier, est un langage de balisage simple que, si vous le souhaitez, vous pourriez tout aussi bien écrire dans le bon vieux Bloc-notes, mais vous le feriez alors Vous manquerez de nombreuses commodités apportées par des éditeurs comme VS Code. Accédez aux paramètres, explorez et remodelez l’éditeur – faites-en une expression de votre personnalité de codage.
Développement Web en temps réel
Dans un premier temps, exécuter un fichier HTML dans VS Code peut sembler un peu obscur, surtout si vous avez été dirigé vers cet éditeur spécifiquement pour ses commodités de développement Web. Mais avec les bonnes extensions (ou le terminal pratique) et une compréhension des capacités de l’éditeur, c’est un jeu d’enfant.
VS Code combine des interfaces simples et des fonctionnalités puissantes permettant aux développeurs Web débutants et expérimentés de faire le travail rapidement. Toutes ces fonctionnalités intéressantes en feront probablement votre endroit préféré pour manipuler du code – et pas seulement du HTML.
Visual Studio Code est-il votre éditeur de prédilection pour écrire en HTML ? Êtes-vous un développeur Web expérimenté ou débutez-vous ? Déposez un commentaire ci-dessous et partagez vos histoires, trucs et astuces.
Avertissement : Certaines pages de ce site peuvent inclure un lien d’affiliation. Cela n’affecte en rien notre éditorial.