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?
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?
Réponses:
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:
Utilisez ctrl+ shift+ p(ou F1) pour ouvrir la palette de commandes.
Tapez dans Tasks: Configure Task
ou 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.
Enregistrez le fichier.
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:
@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"
}
]
}
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
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
npm install -g gulp
, npm install -g gulp-webserver
et 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?
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-open
commande pour ouvrir le fichier avec le navigateur par défaut:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Ctrl + Shift + b
pour le lancer dans le navigateur. Pour moi, le mnémonique était "b = navigateur". :-)
Étape 1:
Je republie simplement les étapes que j'ai utilisées sur le msdn
blog. Cela peut aider la communauté.
Cela vous aidera à configurer un serveur Web local appelé lite-server avec VS Code
et vous guidera également pour héberger vos html
fichiers statiques dans localhost
et debug
votre Javascript
code.
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:
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 msdn
blog. Remerciements à l'auteur:@Laurent Duveau
Si vous êtes juste sur Mac ce tasks.json
fichier:
{
"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 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+1
pour voir le html
fichier dans le navigateur.
Pour Mac - Ouvre dans Chrome - Testé sur VS Code v 1.9.0
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.
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}"] }
CTRL+SHIFT+P
fera 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:
>kestrel
puis 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
tasks
partie. l' "args":["/C"]
est ce qui rend ce travail. Par curiosité, qu'est-ce que cela fait?
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 vscode
mais 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 group
proprié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.json
pour les 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 problemMatcher
proprié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+b
ouvrir le html
fichier actuel dans un nouvel chrome
onglet, sans tracas.
facile.
{
"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"
}
]
}
{
"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": []
},
windows
propriété par un autre système d'exploitation${config:chrome.executable}
par votre emplacement chromé personnalisé, par exemple"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
par votre répertoire de profil chrome custome, par exemple
"C:/My/Data/chrome/profile"
ou laissez-lesettings.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"
launch.json
à des fins de débogage:"runtimeExecutable": "${config:chrome.executable}"