Como posso visualizar meu código HTML em um navegador com o novo código do Microsoft Visual Studio?
Com o Notepad ++, você tem a opção de executar em um navegador. Como posso fazer a mesma coisa com o Visual Studio Code?
Como posso visualizar meu código HTML em um navegador com o novo código do Microsoft Visual Studio?
Com o Notepad ++, você tem a opção de executar em um navegador. Como posso fazer a mesma coisa com o Visual Studio Code?
Respostas:
Para Windows - Abra o navegador padrão - Testado no VS Code v 1.1.0
Responda a ambos, abrindo um arquivo específico (o nome é codificado) OU abrindo QUALQUER outro arquivo.
Passos:
Use ctrl+ shift+ p(ou F1) para abrir a Paleta de comandos.
Digite em Tasks: Configure Task
ou em versões mais antigas Configure Task Runner
. Selecioná-lo abrirá o arquivo tasks.json . Exclua o script exibido e substitua-o pelo seguinte:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["test.html"]
}
Lembre-se de alterar a seção "args" do arquivo tasks.json para o nome do seu arquivo. Isso sempre abrirá esse arquivo específico quando você pressionar F5.
Você também pode definir isso para abrir o arquivo que você abriu no momento, usando ["${file}"]
como valor para "args". Observe que o $
vai para fora do {...}
, então ["{$file}"]
está incorreto.
Salve o arquivo.
Volte para o seu arquivo html (neste exemplo, é "text.html") e pressione ctrl+ shift+ bpara visualizar sua página no navegador da web.
O VS Code possui uma extensão de servidor ao vivo que suporta a inicialização de um clique na barra de status.
Alguns dos recursos:
@InvisibleDev - para que isso funcione em um mac, tentando usar isso:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
Se você já tiver o chrome aberto, ele iniciará o arquivo html em uma nova guia.
Se você deseja recarregar ao vivo, pode usar o gulp-webserver, que observará as alterações no arquivo e recarregará a página. Dessa forma, você não precisará pressionar F5 toda vez na sua página:
Aqui está como fazê-lo:
Abra o prompt de comando (cmd) e digite
npm install --save-dev gulp-webserver
Digite Ctrl + Shift + P no VS Code e digite Configure Task Runner . Selecione-o e pressione Enter. Ele abrirá o arquivo tasks.json para você. Remova tudo e digite apenas o seguinte código
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
}));
});
Seu servidor agora abrirá sua página no seu navegador padrão. Agora, as alterações que você fará nas páginas HTML ou CSS serão recarregadas automaticamente.
Aqui está uma informação sobre como configurar o 'gulp-webserver' por exemplo porta, e qual página carregar, ...
Você também pode executar sua tarefa digitando Ctrl + P e digitando task webserver
npm install -g gulp
, npm install -g gulp-webserver
e adicionar uma variável de ambiente NODE_PATH que aponta para o meu AppData \ npm \ node_modules. Pude executar a tarefa do servidor da web, mas recebo um 404 quando o navegador é iniciado. Alguma idéia do que estou perdendo?
Agora você pode instalar uma extensão Visualizar no navegador . Eu testei no Windows com o Chrome e está funcionando.
Versão vscode: 1.10.2
Aqui está uma versão 2.0.0 para o documento atual no Chrome com atalho de teclado:
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"
}
Para execução em um servidor da web:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
No linux, você pode usar o xdg-open
comando para abrir o arquivo com o navegador padrão:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Ctrl + Shift + b
para iniciá-lo no navegador. Para mim, o mnemônico era "b = browser". :-)
Passo 1:
Estou apenas republicando as etapas que usei no msdn
blog. Isso pode ajudar a comunidade.
Isso irá ajudá-lo a configurar um servidor web local conhecido como lite-servidor com VS Code
, e também orienta para hospedar seus estáticos html
arquivos localhost
e debug
seu Javascript
código.
1. Instale o Node.js
Se ainda não estiver instalado, obtenha-o aqui
Ele vem com o npm (o gerenciador de pacotes para adquirir e gerenciar suas bibliotecas de desenvolvimento)
2. Crie uma nova pasta para o seu projeto
Em algum lugar da sua unidade, crie uma nova pasta para o seu aplicativo web.
3. Adicione um arquivo package.json à pasta do projeto
Em seguida, copie / cole o seguinte texto:
{
"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. Instale o servidor da web
Em uma janela do terminal (prompt de comando no Windows) aberta na pasta do projeto, execute este comando:
npm install
Isso instalará o lite-server (definido em package.json), um servidor estático que carrega index.html no navegador padrão e o atualiza automaticamente quando os arquivos do aplicativo são alterados.
5. Inicie o servidor da web local!
(Supondo que você tenha um arquivo index.html na pasta do projeto).
Na mesma janela do terminal (prompt de comando no Windows), execute este comando:
npm start
Aguarde um segundo e o index.html é carregado e exibido no seu navegador padrão, servido pelo servidor da web local!
lite-server está assistindo seus arquivos e atualiza a página assim que você faz alterações em qualquer arquivo html, js ou css.
E se você tiver o VS Code configurado para salvar automaticamente (menu Arquivo / Salvar automaticamente), verá alterações no navegador enquanto digita!
Notas:
É isso aí. Agora, antes de qualquer sessão de codificação, digite npm start e você estará pronto!
Originalmente publicado aqui no msdn
blog. Créditos vão para o Autor:@Laurent Duveau
Se você está apenas no Mac, este tasks.json
arquivo:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
... é tudo o que você precisa para abrir o arquivo atual no Safari, supondo que sua extensão seja ".html".
Crie tasks.json
como descrito acima e chame-o com ⌘+ shift+ b.
Se você deseja que ele seja aberto no Chrome, então:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
Isso fará o que você deseja, como abrir uma nova guia se o aplicativo já estiver aberto.
A solução de um clique simplesmente instala as extensões de navegador aberto no mercado do Visual Studio.
Resposta atualizada em 18 de abril de 2020
Clique neste ícone Gerenciar no canto inferior esquerdo . Extensões de clique ou atalhoCtrl+Shift+X
Em seguida, pesquise na extensão com esta frase-chave Abrir no navegador padrão . Você encontrará esta extensão. É melhor pra mim
Agora clique com o botão direito do mouse no html
arquivo e você verá Abrir no navegador padrão ou Atalho Ctrl+1
para ver o html
arquivo no navegador.
Para Mac - Abre no Chrome - Testado no VS Code v 1.9.0
Digite Configure Task Runner, na primeira vez que você fizer isso, o VS Code exibirá o menu rolagem para baixo, se selecionar "Other". Se você já fez isso antes, o VS Code enviará você diretamente para o tasks.json.
Uma vez no arquivo tasks.json. Exclua o script exibido e substitua-o pelo seguinte:
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
CTRL+SHIFT+P
exibirá a paleta de comandos.
Dependendo do que você está executando, é claro. Exemplo em um aplicativo ASP.net, você pode digitar:
>kestrel
e, em seguida, abrir o navegador e digitar localhost:(your port here)
.
Se você digitar, >
ele mostrará os comandos show e run
Ou no seu caso com HTML, acho que F5
depois de abrir a paleta de comandos, deve abrir o depurador.
Fonte: link
Abrir arquivos no navegador Opera (no Windows 64 bits). Basta adicionar estas linhas:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
Preste atenção ao formato do caminho em "command": line. Não use o formato "C: \ path_to_exe \ runme.exe".
Para executar esta tarefa, abra o arquivo html que deseja visualizar, pressione F1, digite task opera e pressione enter
meu script de corredor se parece com:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
e é só abrir o meu explorer quando pressiono ctrl shift b no meu arquivo index.html
aqui está como você pode executá-lo em vários navegadores para 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}"]
}
]
}
observe que eu não digitei nada em args para o edge porque o Edge é o meu navegador padrão, apenas o nome do arquivo.
EDIT: também você não precisa -incognito nem -private-window ... sou apenas eu Eu gosto de vê-lo em uma janela privada
tasks
parte. o "args":["/C"]
é o que faz este trabalho. Por curiosidade, o que isso faz?
Recentemente, deparei com esse recurso em um dos tutoriais de código do visual studio em www.lynda.com
Pressione Ctrl + K, seguido de M, ele abrirá o "Select Language Mode" (ou clique no canto inferior direito que diz HTML antes desse smiley), digite markdown e pressione enter
Agora pressione Ctrl + K seguido de V, ele abrirá seu html em uma guia próxima.
Tadaaa !!!
Agora, os comandos emmet não estavam funcionando nesse modo no meu arquivo html, então voltei ao estado original (nota - a tag html tellisense estava funcionando perfeitamente)
Para ir para o estado original - Pressione Ctrl + K e, em seguida, M, selecione detecção automática. comandos emmet começaram a funcionar. Se você está satisfeito com o visualizador somente em html, não há necessidade de voltar ao estado original.
Gostaria de saber por que o vscode não está tendo a opção de visualizador de html por padrão, quando é capaz de exibir o arquivo html no modo de marcação.
Enfim, é legal. Happy vscoding :)
Aqui está a versão 2.0.0 para 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 abrirá o navegador padrão. Como alternativa, você pode pressionar Ctrl + Shift + P para abrir a janela de comando e selecionar "Visualizar no navegador". O código html deve ser salvo em um arquivo (código não salvo no editor - sem extensão, não funciona)
provavelmente a maioria conseguirá encontrar uma solução a partir das respostas acima, mas, como nenhuma delas funcionou para mim ( vscode v1.34
), pensei em compartilhar minha experiência. se pelo menos uma pessoa achar útil, não deixe de postar desperdiçado, amiirte ?
de qualquer maneira, minha solução ( windows
) é construída sobre a @ noontz's. sua configuração pode ter sido suficiente para versões mais antigas, vscode
mas não com 1.34
(pelo menos, não consegui fazê-lo funcionar ..).
nossas configurações são quase idênticas, exceto uma única propriedade - sendo essa propriedade, a group
propriedade não sei por que, mas sem isso, minha tarefa nem apareceria na paleta de comandos.
tão. um trabalho tasks.json
para windows
usuários executando 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": []
}
]
}
observe que a problemMatcher
propriedade não é necessária para que isso funcione, mas sem ela uma etapa manual extra é imposta a você. tentei ler os documentos dessa propriedade, mas sou muito grosso para entender. espero que alguém venha me ensinar, mas sim, obrigado desde já por isso. tudo o que sei é - inclua essa propriedade e ctrl+shift+b
abre o html
arquivo atual em uma nova chrome
guia, sem complicações.
fácil.
{
"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
propriedade por outro SO${config:chrome.executable}
pela sua localização personalizada do chrome, por exemplo"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
pelo seu diretório de perfil do Chrome, por exemplo,
"C:/My/Data/chrome/profile"
ou deixe de forasettings.json
- usuário ou espaço de trabalho -, ajuste os caminhos de acordo com suas necessidades:"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
launch.json
para fins de depuração:"runtimeExecutable": "${config:chrome.executable}"