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


266

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?


7
VS Code a maintenant une extension de serveur en direct. Veuillez voir ma réponse: stackoverflow.com/a/48721885/466066
Jose Cherian

3
L'extension de serveur en direct a fonctionné pour moi. Je ne veux configurer aucun fichier pour ce faire.
AGDM du

Réponses:


209

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.

entrez la description de l'image ici


16
Vous pouvez même utiliser des variables si vous avez plusieurs fichiers HTML. Vous pouvez faire: "args": ["{$ file}"] pour passer le fichier ouvert en cours. Voir aussi code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer

7
Comment puis-je le faire sur Mac? Il n'y a pas de fichiers exe. Je voudrais ouvrir la page Web en chrome sur Mac
InvisibleDev

3
juste obtenir "Impossible de lancer le programme externe chrome {$ file}. spawn chrome ENOENT"
johny why

7
Pour configurer la tâche dans un nouveau dossier: Sélectionnez la commande Tâches: Configurer le gestionnaire de tâches et vous verrez une liste de modèles de gestionnaire de tâches. Sélectionnez Autres pour créer une tâche qui exécute une commande externe. . . . Vous devriez maintenant voir un fichier tasks.json dans votre dossier .vscode de l'espace de travail avec le contenu suivant :. . . par code.visualstudio.com/Docs/editor/tasks
yu yang Jian

5
Configure Task Runner n'est plus présent dans VSC 1.24.0 - Control-Shift-P ne renvoie aucun résultat pour cette chaîne.
lonstar

110

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

entrez la description de l'image ici


8
Cette extension dispose également d'un module complémentaire Web pour fournir une fonctionnalité de rechargement automatique aux pages dynamiques.
M. Sundstrom

@ M.Sundstrom pouvez-vous me donner le nom / lien de ce module complémentaire s'il vous plaît?
Adil Saju

2
Encore très utile, et surtout totalement sans configuration!
Jonas

2
Ce n'est pas recommandé pour les pages complexes, peut-être bon pour les nouveaux codeurs
Yasser Jarouf

1
mais il semble que vous ne pouvez pas prévisualiser le fichier actif non enregistré, non? (L'exécuter, ne prévisualise pas le HTML, mais montre sur le navigateur la hiérarchie des dossiers)
JinSnow

73

@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.


32

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


2
Je devais courir npm install -g gulp, npm install -g gulp-webserveret ajouter une variable d'environnement NODE_PATH que les points à mon AppData \ npm \ node_modules. Ensuite, j'ai pu exécuter la tâche du serveur Web, mais j'obtiens un 404 lorsque le navigateur démarre. Une idée de ce qui me manque?
Kirill Osenkov

2
Qu'à cela ne tienne, il suffit de changer «l'application» dans votre exemple en «.» (il sert donc à partir du répertoire courant).
Kirill Osenkov

1
Un commentaire à la réponse: Si vous souhaitez exécuter un fichier html dans votre navigateur, qui se rechargera automatiquement sur les modifications, votre gulpfile.js devrait ressembler à ceci, avec un '.' au lieu de «l'application». Code = var gulp = require ('gulp'), webserver = require ('gulp-webserver'); gulp.task ('webserver', function () {gulp.src ('.') .pipe (webserver ({fallback: 'index.html', livereload: true, open: true}));});
Friis1978

1
C'est génial. Merci d'avoir expliqué cela comme une option valable. J'ai également dû appliquer un peu des réponses de Krill et Friis pour que cela fonctionne. Mais c'est le cas!
klewis

J'obtenais "Cannot GET /" parce que j'ai copypasté gulpfile.js sans configurer la ligne gulp.src('app')pour qu'elle pointe réellement vers ma source (qui n'était pas /appmais '.'). Fonctionne parfaitement. Merci!

22

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

entrez la description de l'image ici


5
Cette extension obtient des critiques horribles.
Jon Crowell

Cela ne rafraîchit pas automatiquement le navigateur et ce n'est pas ce que recherche OP
Jude Niroshan

18

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


17

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}"]
}

6
Merci! Je suis un utilisateur Linux et je me sentais perdu. Je voudrais ajouter qu'il faut appuyer Ctrl + Shift + bpour le lancer dans le navigateur. Pour moi, le mnémonique était "b = navigateur". :-)
ankush981

Cela fonctionne mais semble obsolète, si vous avez une version mise à jour, merci
Bruno L.

14

Étape 1:

  1. Ouvrez Visual Studio Code, puis accédez aux extensions.
  2. Recherchez "ouvrir dans le navigateur". entrez la description de l'image ici

    3.Installez-le.

    4.Cliquez avec le bouton droit sur votre fichier html, vous trouverez l'option "Ouvrir dans le navigateur". entrez la description de l'image ici

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


9

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


6

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.



4

Réponse mise à jour le 18 avril 2020

entrez la description de l'image ici

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.


3

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

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

entrez la description de l'image ici

  1. 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.

  2. 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}"]
}
  1. Revenez à votre fichier html et appuyez sur Command+Shift + bpour afficher votre page dans Chrome.

2

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



2

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


2

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


2

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


Je copiais seulement la taskspartie. l' "args":["/C"]est ce qui rend ce travail. Par curiosité, qu'est-ce que cela fait?
Ryan B

1

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 :)


1
La question est de savoir comment afficher dans un navigateur.
user5389726598465

1

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}"
      ]
    }
  ]
}

0

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)


1
Quelle version de Visual Studio Code utilisez-vous? Ces commandes ne fonctionnent pas dans ma version 1.8.1 qui vient d'être mise à jour. Ctrl + F1 ne fait rien et je n'ai pas d'option Afficher dans le navigateur dans la palette de commandes. Peut-être avez-vous quelque chose au-delà des tâches installées par défaut ou supplémentaires dans votre tâches.json?
jla

J'ai la même version mais j'ai réalisé que j'y ai installé une extension. C'est: marketplace.visualstudio.com/…
PersyJack

0

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.


0

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}"
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.