web-dev-qa-db-fra.com

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

Comment 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?

visual-studio-code
189
user4863890

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

Répondez à la fois en ouvrant un fichier spécifique (le nom est codé en dur) OR en ouvrant TOUT autre fichier.

Étapes:

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

  2. Tapez Tasks: Configure Task ou sur des versions antérieures Configure Task Runner. Le sélectionner ouvrira le fichier tasks.json. Supprimez le script affiché et remplacez-le par le suivant:

    {
    "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 appuierez sur F5.

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

  3. Enregistrez le fichier.

  4. Revenez dans votre fichier HTML (dans cet exemple, il s'agit de "text.html"), puis appuyez sur ctrl + shift + b pour afficher votre page dans votre navigateur Web.

enter image description here

186
yushulx

@InvisibleDev - pour que cela fonctionne sur un mac essayant de l'utiliser:

{
    "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.

67
Sammydo_55

VS Code a un Live Server Extention qui prend en charge le lancement en un clic depuis la barre d'état.

Certaines des caractéristiques:

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

enter image description here

48
Jose Cherian

Si vous souhaitez effectuer un rechargement en direct, vous pouvez utiliser gulp-webserver, qui surveillera les modifications de votre fichier et la page de rechargement. Ainsi, vous ne devrez pas appuyer sur la touche F5 à chaque fois sur votre page:

Voici comment faire:

  • Ouvrez la commande Invite (cmd) et tapez

    npm installer --save-dev gulp-webserver

  • Entrez Ctrl + Maj + P dans le code VS et tapez Configure Task Runner. Sélectionnez-le et appuyez sur Entrée. Il ouvrira le fichier tasks.json pour vous. Enlevez tout ce qu'il contient et entrez simplement 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 la saisissez. Votre tâche "serveur Web" sera sélectionnée et appuyez sur Entrée.

Votre serveur Web va maintenant ouvrir votre page dans votre navigateur par défaut. Désormais, 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 la page à charger, ...

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

32
Vlad Bezden

Vous pouvez maintenant installer une extension Voir dans le navigateur . Je l'ai testé sur des fenêtres chromées et cela fonctionne.

version vscode: 1.10.2

 enter image description here

21
Roel

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

Voici une version 2.0.0 du document actuel dans Chrome avec le 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 dans le navigateur par défaut: npm install http-server -g

{
    "label": "Run on webserver",
    "type": "Shell",
    "command": "http-server",
    "args": [
        "${file}",
        "-p",
        "8080",
        "-c-1",
        "-o"
    ],
    "problemMatcher": []
}

Appuyez sur CTRL + C dans le terminal pour arrêter le serveur.

12
noontz

Si vous êtes juste 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 actuel dans Safari, en supposant que son extension est ".html".

Créez tasks.json comme décrit ci-dessus et appelez-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 en ouvrant un nouvel onglet si l'application est déjà ouverte.

5
Sez

mon script de coureur ressemble à: 

{
    "version": "0.1.0",

    "command": "Explorer",

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

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

et il suffit d'ouvrir mon explorateur lorsque j'appuie sur ctrl shift b dans mon fichier index.html

2
Sahar Ben-Shushan

Ouverture de fichiers dans le navigateur Opera (sous Windows 64 bits). Ajoutez juste ces lignes:

{
"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 format "C:\path_to_exe\runme.exe".

Pour exécuter cette tâche, ouvrez le fichier HTML que vous voulez voir, appuyez sur F1, tapez task opera et appuyez sur entrée

2
Jose Carlos

CTRL+SHIFT+P fera apparaître la palette de commandes.
Selon ce que vous utilisez bien sûr. Exemple dans une application ASP.net, vous pouvez taper:
>kestrel, puis ouvrez votre navigateur Web et tapez localhost:(your port here). 

Si vous tapez >, il vous montrera le show et exécutera les commandes

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

Source: lien

2
Andreas DM

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

  1. Utilisation Command + shift + p pour ouvrir la palette de commandes.

enter image description here

  1. Tapez Configure 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 avez déjà fait cela 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 le suivant:

{
    "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 + b pour afficher votre page dans Chrome.
2
Joe Mellin

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

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

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

2
Abdel-Rahman Muhammed

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

Solution en un clic, installez simplement open-in-browser - Extensions à partir du marché Visual Studio.

1
Manish Sharma

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 (le code non enregistré dans l'éditeur - sans extension, ne fonctionne pas)

0
PersyJack

Récemment, cette fonctionnalité est apparue dans l’un des didacticiels relatifs au code Visual Studio dans www.lynda.com

Appuyez sur Ctrl + K suivi de M pour ouvrir le "Mode de sélection de la langue" (ou cliquez dans le coin inférieur droit indiquant HTML avant le smiley), tapez markdown et appuyez sur entrée.

Maintenant, appuyez sur Ctrl + K suivi de V, il ouvrira votre code HTML dans un onglet à proximité.

Tadaaa !!!

Maintenant, les commandes emmet ne fonctionnaient pas dans ce mode dans mon fichier html, je suis donc retourné à son état initial (note - la balise html tellisense fonctionnait parfaitement)

Pour revenir à l'état d'origine - Appuyez sur Ctrl + K suivi de M, sélectionnez la détection automatique. Les commandes emmet ont commencé à fonctionner. Si vous êtes satisfait du visualiseur uniquement HTML, il n’est pas nécessaire que vous reveniez à l’état initial.

Je me demande pourquoi vscode n’a pas d’option de visualiseur HTML par défaut, alors qu’il est capable d’afficher le fichier html en mode de démarquage.

De toute façon c'est cool. Joyeux vscoding :)

0
Mrk

la plupart d'entre eux seront probablement en mesure de trouver une solution à partir des réponses ci-dessus, mais vu que rien ne fonctionnait pour moi (vscode v1.34), j'ai pensé partager mon expérience. si au moins une personne le trouve utile, alors ne refroidissez pas un poste perdu, amiirte?

de toute façon, ma solution (windows) est construite au sommet de @ noontz. sa configuration a peut-être été suffisante pour les anciennes versions de vscode mais pas avec 1.34 (du moins, je ne pouvais pas le faire fonctionner ..).

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

alors. un tasks.json fonctionnel pour windows utilisateurs 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 propriété problemMatcher n'est pas requise pour que cela fonctionne, mais sans elle, une étape manuelle supplémentaire vous est imposée. essayé de lire la documentation sur cette propriété, mais je suis trop épais pour comprendre. J'espère que quelqu'un viendra me chercher, mais oui, merci d'avance pour cela. Tout ce que je sais, c’est - inclure cette propriété et ctrl+shift+b ouvre le fichier html actuel dans un nouvel onglet chrome, sans tracas.

facile.

0
mad.meesh