Comment afficher un fichier HTML dans le navigateur avec Visual Studio Code

Comment puis-je afficher mon code HTML dans un navigateur avec le nouveau code Microsoft Visual Studio?

Avec Notepad ++, vous avez la possibilité d'exécuter dans un navigateur. Comment puis-je faire la même chose avec Visual Studio Code?

Pour Windows - Ouvrez votre navigateur par défaut - Testé sur VS Code v 1.1.0

Répondez à la fois à l'ouverture d'un fichier spécifique (le nom est codé en dur) OU à l'ouverture de tout autre fichier.

Pas:

1. Utilisez ctrl+ shift+ p(ou F1) pour ouvrir la palette de commandes.

2. Tapez dans Tasks: Configure Taskou sur les anciennes versions Configure Task Runner. Le sélectionner ouvrira le fichier tasks.json . Supprimez le script affiché et remplacez-le par ce qui suit:

   {
       "version": "0.1.0",
       "command": "explorer",    
       "windows": {
           "command": "explorer.exe"
       },
       "args": ["test.html"]
   }

   N'oubliez pas de remplacer la section "args" du fichier tasks.json par le nom de votre fichier. Cela ouvrira toujours ce fichier spécifique lorsque vous appuyez sur F5.

   Vous pouvez également définir ceci pour ouvrir le fichier que vous avez ouvert à ce moment en utilisant ["${file}"]comme valeur pour "args". Notez que le $va en dehors de {...}, ["{$file}"]est donc incorrect.

3. Enregistrez le fichier.

4. Revenez à votre fichier html (dans cet exemple, c'est "text.html") et appuyez sur ctrl+ shift+ bpour afficher votre page dans votre navigateur Web.

VS Code a une extension de serveur en direct qui prend en charge le lancement en un clic à partir de la barre d'état.

Quelques fonctionnalités:

• Lancement en un clic depuis la barre d'état
• Recharger en direct
• Prise en charge de la pièce jointe de débogage Chrome

@InvisibleDev - pour que cela fonctionne sur un Mac essayant d'utiliser ceci:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

Si vous avez déjà ouvert Chrome, il lancera votre fichier html dans un nouvel onglet.

Si vous souhaitez avoir un rechargement en direct, vous pouvez utiliser gulp-webserver, qui surveillera vos modifications de fichier et recharger la page, de cette façon, vous n'avez pas à appuyer sur F5 à chaque fois sur votre page:

Voici comment faire:

• Ouvrez l'invite de commande (cmd) et tapez

  npm install --save-dev gulp-webserver

• Entrez Ctrl + Maj + P dans VS Code et tapez Configure Task Runner . Sélectionnez-le et appuyez sur Entrée. Il ouvrira le fichier tasks.json pour vous. Retirez tout de lui et entrez juste le code suivant

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• Dans le répertoire racine de votre projet, ajoutez gulpfile.js et entrez le code suivant:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• Maintenant, dans VS Code, entrez Ctrl + Maj + P et tapez "Exécuter la tâche" lorsque vous le saisissez, vous verrez votre tâche "serveur Web" sélectionnée et appuyez sur Entrée.

Votre serveur Web va maintenant ouvrir votre page dans votre navigateur par défaut. Maintenant, toutes les modifications que vous apporterez à vos pages HTML ou CSS seront automatiquement rechargées.

Voici une information sur la façon de configurer 'gulp-webserver' pour le port d'instance, et quelle page charger, ...

Vous pouvez également exécuter votre tâche en entrant simplement Ctrl + P et en saisissant le serveur Web de la tâche

Vous pouvez maintenant installer une extension View In Browser . Je l'ai testé sur des fenêtres avec du chrome et ça marche.

version de vscode: 1.10.2

Voici une version 2.0.0 pour le document actuel dans Chrome avec raccourci clavier:

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": []
        }
    ]
}

keybindings.json :

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

Pour exécuter sur un serveur Web:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Sous linux, vous pouvez utiliser la xdg-opencommande pour ouvrir le fichier avec le navigateur par défaut:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

Étape 1:

1. Ouvrez Visual Studio Code, puis accédez aux extensions.

2. Recherchez "ouvrir dans le navigateur".

   3.Installez-le.

   4.Cliquez avec le bouton droit sur votre fichier html, vous trouverez l'option "Ouvrir dans le navigateur".

   C'est tout................................................ ......

Je republie simplement les étapes que j'ai utilisées sur le msdnblog. Cela peut aider la communauté.

Cela vous aidera à configurer un serveur Web local appelé lite-server avec VS Codeet vous guidera également pour héberger vos htmlfichiers statiques dans localhostet debugvotre Javascriptcode.

1. Installez Node.js

S'il n'est pas déjà installé, téléchargez-le ici

Il est livré avec npm (le gestionnaire de packages pour l'acquisition et la gestion de vos bibliothèques de développement)

2. Créez un nouveau dossier pour votre projet

Quelque part dans votre lecteur, créez un nouveau dossier pour votre application Web.

3. Ajoutez un fichier package.json au dossier du projet

Copiez / collez ensuite le texte suivant:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^1.3.1"
   }
}

4. Installez le serveur Web

Dans une fenêtre de terminal (invite de commande sous Windows) ouverte sur votre dossier de projet, exécutez cette commande:

npm install

Cela installera lite-server (défini dans package.json), un serveur statique qui charge index.html dans votre navigateur par défaut et le rafraîchit automatiquement lorsque les fichiers d'application changent.

5. Démarrez le serveur Web local!

(En supposant que vous ayez un fichier index.html dans votre dossier de projet).

Dans la même fenêtre de terminal (invite de commande sous Windows), exécutez cette commande:

npm start

Attendez une seconde et index.html est chargé et affiché dans votre navigateur par défaut desservi par votre serveur Web local!

lite-server surveille vos fichiers et actualise la page dès que vous apportez des modifications à des fichiers html, js ou css.

Et si VS Code est configuré pour l'enregistrement automatique (menu Fichier / Enregistrement automatique), vous voyez des changements dans le navigateur au fur et à mesure que vous tapez!

Remarques:

• Ne fermez pas l'invite de ligne de commande avant d'avoir terminé le codage dans votre application pour la journée
• Il s'ouvre sur http: // localhost: 10001 mais vous pouvez modifier le port en modifiant le fichier package.json.

C'est tout. Maintenant, avant toute session de codage, tapez simplement npm start et vous êtes prêt à partir!

Publié à l'origine ici dans le msdnblog. Remerciements à l'auteur:@Laurent Duveau

Si vous êtes juste sur Mac ce tasks.jsonfichier:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

... est tout ce dont vous avez besoin pour ouvrir le fichier actuel dans Safari, en supposant que son extension est ".html".

Créez tasks.jsoncomme décrit ci-dessus et invoquez-le avec ⌘+ shift+ b.

Si vous souhaitez qu'il s'ouvre dans Chrome, alors:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

Cela fera ce que vous voulez, comme dans l'ouverture d'un nouvel onglet si l'application est déjà ouverte.

La solution en un clic installe simplement les extensions ouvertes dans le navigateur à partir de la place de marché Visual Studio.

Réponse mise à jour le 18 avril 2020

Cliquez sur cette icône de gestion en bas à gauche . Cliquez sur Extensions ou raccourciCtrl+Shift+X

Ensuite, recherchez dans l'extension avec cette phrase clé Ouvrir dans le navigateur par défaut . Vous trouverez cette extension. C'est mieux pour moi.

Maintenant html, faites un clic droit sur le fichier et vous verrez Ouvrir dans le navigateur par défaut ou Raccourci Ctrl+1pour voir le htmlfichier dans le navigateur.

Pour Mac - Ouvre dans Chrome - Testé sur VS Code v 1.9.0

1. Utilisez Command+ shift+ ppour ouvrir la palette de commandes.

2. Tapez Configurer Task Runner, la première fois que vous faites cela, VS Code vous donnera le menu déroulant, s'il sélectionne "Autre". Si vous l'avez déjà fait auparavant, VS Code vous enverra simplement directement à tasks.json.

3. Une fois dans le fichier tasks.json. Supprimez le script affiché et remplacez-le par ce qui suit:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}

4. Revenez à votre fichier html et appuyez sur Command+Shift + bpour afficher votre page dans Chrome.

CTRL+SHIFT+Pfera apparaître la palette de commandes.
En fonction de ce que vous exécutez bien sûr. Exemple dans une application ASP.net, vous pouvez taper:
>kestrelpuis ouvrir votre navigateur Web et taper localhost:(your port here).

Si vous tapez, >il vous montrera les commandes show and run

Ou dans votre cas avec HTML, je pense F5 qu'après avoir ouvert la palette de commandes devrait ouvrir le débogueur.

Source: lien

Ouverture des fichiers dans le navigateur Opera (sur Windows 64 bits). Ajoutez simplement ces lignes:

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

Faites attention au format du chemin sur la "commande": ligne. N'utilisez pas le format "C: \ path_to_exe \ runme.exe".

Pour exécuter cette tâche, ouvrez le fichier html que vous souhaitez afficher, appuyez sur F1, tapez opéra de tâche et appuyez sur entrée

mon script de coureur ressemble à:

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

et c'est juste ouvrir mon explorateur quand j'appuie sur ctrl shift b dans mon fichier index.html

voici comment l'exécuter dans plusieurs navigateurs pour windows

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

notez que je n'ai rien tapé dans args pour edge car Edge est mon navigateur par défaut qui vient de lui donner le nom du fichier.

EDIT: aussi vous n'avez pas besoin de -incognito ni -private-window ... c'est juste moi que j'aime voir dans une fenêtre privée

J'ai récemment découvert cette fonctionnalité dans l'un des didacticiels de code de Visual Studio sur www.lynda.com

Appuyez sur Ctrl + K suivi de M, cela ouvrira le "Select Language Mode" (ou cliquez sur le coin en bas à droite qui dit HTML avant ce smiley), tapez markdown et appuyez sur enter

Maintenant, appuyez sur Ctrl + K suivi de V, cela ouvrira votre html dans un onglet proche.

Tadaaa !!!

Maintenant, les commandes emmet ne fonctionnaient pas dans ce mode dans mon fichier html, donc je suis retourné à l'état d'origine (remarque - le tag html tellisense fonctionnait parfaitement)

Pour revenir à l'état d'origine - Appuyez sur Ctrl + K puis sur M, sélectionnez détection automatique. Les commandes emmet ont commencé à fonctionner. Si vous êtes satisfait de la visionneuse HTML uniquement, vous n'avez pas besoin de revenir à l'état d'origine.

Je me demande pourquoi vscode n'a pas d'option de visionneuse html par défaut, quand il est capable d'afficher le fichier html en mode démarque.

Quoi qu'il en soit, c'est cool. Vscoding heureux :)

Voici la version 2.0.0 pour Mac OSx:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

Ctrl + F1 ouvrira le navigateur par défaut. vous pouvez également appuyer sur Ctrl + Maj + P pour ouvrir la fenêtre de commande et sélectionner "Afficher dans le navigateur". Le code html doit être enregistré dans un fichier (code non enregistré sur l'éditeur - sans extension, ne fonctionne pas)

la plupart seront probablement en mesure de trouver une solution à partir des réponses ci-dessus, mais vu que rien ne fonctionne pour moi ( vscode v1.34), je pensais partager mon expérience. si au moins une personne le trouve utile, cool pas un message perdu, amiirte ?

de toute façon, ma solution ( windows) est construite en haut de @ noontz. sa configuration peut être suffisante pour les anciennes versions de vscodemais pas avec 1.34(au moins, je ne pouvais pas le faire fonctionner ..).

nos configurations sont presque identiques sauf une seule propriété - cette propriété étant, la grouppropriété. Je ne sais pas pourquoi mais sans cela, ma tâche n'apparaîtrait même pas dans la palette de commandes.

alors. un travail tasks.jsonpour les windowsutilisateurs exécutant vscode 1.34:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

Notez que la problemMatcherpropriété n'est pas requise pour que cela fonctionne, mais sans cela, une étape manuelle supplémentaire vous est imposée. essayé de lire les documents sur cette propriété mais je suis trop épais pour comprendre. j'espère que quelqu'un viendra et m'écolera mais oui, merci d'avance pour ça. tout ce que je sais c'est - inclure cette propriété et ctrl+shift+bouvrir le htmlfichier actuel dans un nouvel chromeonglet, sans tracas.

facile.

Ouvrez Chrome personnalisé avec l'URL à partir de l'invite

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

Ouvrez Chrome personnalisé avec le fichier actif

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Remarques

• si nécessaire, remplacez la windowspropriété par un autre système d'exploitation
• remplacer ${config:chrome.executable}par votre emplacement chromé personnalisé, par exemple"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• remplacer ${config:chrome.profileDir}par votre répertoire de profil chrome custome, par exemple "C:/My/Data/chrome/profile" ou laissez-le
• Vous pouvez conserver les variables comme ci-dessus si vous le souhaitez. Pour ce faire, ajoutez les entrées suivantes dans settings.json- utilisateur ou espace de travail -, ajustez les chemins d'accès à vos besoins:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• Vous pouvez réutiliser ces variables, par exemple dans launch.jsonà des fins de débogage:"runtimeExecutable": "${config:chrome.executable}"