Comment afficher mon code HTML dans votre navigateur avec Visual Studio Code?

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

  npm install --save-dev gulfp-webserver

• Entrer Ctrl+Shift+P

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

  • maintenant dans le code VS entrez Ctrl+Shift+P et tapez" Run Task "lorsque vous l'entrez, vous verrez votre tâche" webserver " sélectionnée et appuyez sur Entrée.

  votre serveur web va maintenant ouvrir votre page dans votre navigateur par défaut. Maintenant, toute modification que vous apporterez à vos pages HTML ou CSS sera automatiquement rechargée.

  Voici une information sur la façon de configurer "gulp-webserver" par exemple, le port, et la page à charger, ...

  vous pouvez également exécuter votre tâche simplement en entrant Ctrl+P et tapez task webserver

VS Code a un Live Server Extention qui supporte un clic de lancer à partir de la barre d'état.

Certaines fonctionnalités:

• d'Un Clic de Lancement à partir de la Barre d'État
• Live Reload
• prise en charge de la pièce jointe de débogage Chrome

vous pouvez maintenant installer une extension voir dans le navigateur . Je l'ai testé sur windows avec chrome et ça fonctionne.

version vscode: 1.10.2

sous linux, vous pouvez utiliser la commande xdg-open pour ouvrir le fichier avec le navigateur par défaut:

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

Voici une version 2.0.0 Pour le document actuel dans Chrome w / raccourci clavier:

tasks.json

    {
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "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"
}

si vous êtes sur Mac ce fichier tasks.json :

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

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

créer tasks.json comme décrit ci-dessus et l'invoquer avec ⌘ + poste + b .

si vous voulez qu'il s'ouvre en Chrome alors:

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

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

je viens de re-poster les étapes que j'ai utilisées à partir du blog msdn . Il peut aider la communauté.

Cela vous aidera à configurer un serveur web local connu sous le nom de Lite-server avec VS Code , et vous guide également pour héberger vos fichiers statiques html dans localhost et debug votre code Javascript .

1. Nœud D'Installation.js

si pas déjà installé, obtenez-le ici

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

2. Créer un nouveau dossier pour votre projet

quelque part dans votre lecteur, créez un nouveau dossier pour votre application web.

3. Ajouter un paquet.fichier json du dossier de projet

Puis copier / coller 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. Installer le serveur web

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

npm install

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

5. Démarrer le serveur web local!

(en supposant que vous avez un indice.fichier html dans votre dossier de projet).

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

npm start

attendez une seconde et indexez.html est chargé et affiché dans votre navigateur par défaut sur votre serveur web local!

Lite-server regarde vos fichiers et rafraîchit la page dès que vous apportez des changements aux fichiers html, js ou css.

et si vous avez le code VS configuré pour enregistrer automatiquement (menu Fichier / Enregistrer automatiquement), vous voyez des changements dans le navigateur que vous tapez!

Notes:

• ne fermez pas l'invite de ligne de commande tant que vous n'avez pas terminé le codage dans votre app du jour
• il s'ouvre sur http://localhost:10001 mais vous pouvez changer le port en la modification du package.fichier json.

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

posté ici dans msdn blog. Crédits va à L'auteur: @Laurent Duveau

CTRL+SHIFT+P affichera la palette de commandes.

Selon ce que vous êtes en cours d'exécution, bien sûr. Exemple dans un ASP.net app vous pouvez entrer:

>kestrel puis ouvrez votre navigateur web et tapez localhost:(your port here) .

si vous tapez > il vous montrera le afficher et exécuter les commandes

ou dans votre cas avec HTML, je pense F5 après l'ouverture de la palette de commandes devrait ouvrir le débogueur.

Source: lien

ouvrir les fichiers dans Opera browser (sous Windows 64 bits). Il suffit d'ajouter cette ligne:

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

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

pour exécuter cette tâche, ouvrez le fichier html que vous voulez voir, appuyez sur F1, tapez task opera et appuyez sur enter

mon coureur script 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 index.fichier html

, voici comment vous pouvez 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 parce que Edge est mon navigateur par défaut juste lui a donné le nom du fichier.

EDIT: aussi, vous n'avez pas besoin d'-incognito ni -privée-fenêtre...c'est juste moi, je voudrais l'afficher dans une fenêtre privée

pour Mac-Opens in Chrome-Tested on VS Code v 1.9.0

1. Utiliser Commande + shift + p pour ouvrir la Palette de Commande.

2. tapez dans Configure Task Runner, la première fois que vous faites cela, le code VS vous donnera le menu défiler vers le bas, s'il ne sélectionne "autre."Si vous avez déjà fait cela, VS Code vous enverra directement aux tâches.json.

3. une fois dans les tâches.fichier json. Supprimer le script affiché et le remplacer par le suivant:

{
    "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 Commande + Shift + b pour voir votre page dans Chrome.

solution en un clic il suffit d'installer open-in-browser Extensions à partir du marché Visual Studio.

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 aussi cliquer sur Ctrl + shift + P pour ouvrir la fenêtre de commande et sélectionner "View in Browser". Le code html doit être sauvegardé dans un fichier (code non sauvegardé sur l'éditeur - sans extension, ne fonctionne pas)

a récemment découvert cette fonctionnalité dans l'un des tutoriels de visual studio code dans www.lynda.com

appuyez sur Ctrl + K suivi de M, il ouvrira le "Select Language Mode" ( ou cliquez sur le coin inférieur droit qui dit HTML avant que smiley ), tapez markdown et appuyez sur enter

Maintenant appuyez sur Ctrl + K suivi de V, il ouvrira votre html dans un près de tab.

Tadaaa !!!

maintenant les commandes emmet ne fonctionnaient pas dans ce mode dans mon fichier html, donc je suis retourné à l'état original (note - tag html tellisense fonctionnaient parfaitement )

pour aller à l'état original - appuyez sur Ctrl + K suivi de M, sélectionnez auto-detect. les commandes emmet ont commencé à fonctionner. Si vous êtes heureux avec html seulement spectateur, il n'est pas nécessaire pour vous de revenir à l'état initial.

me demande pourquoi vscode est de ne pas avoir la visionneuse html option par par défaut, quand il est capable de dispaly le fichier html dans le mode markdown.

de toute façon, c'est cool. Happy vscoding:)

vous ne pouvez pas. Visual Studio n'était pas destiné au web design ou au développement. Il faut coder quelques lignes pour que ça marche.