Como exibir um arquivo HTML no navegador com o Código do Visual Studio


266

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?


7
O Código VS tem uma extensão de servidor ativo agora. Por favor, veja minha resposta: stackoverflow.com/a/48721885/466066
Jose Cherian

3
A extensão do servidor ao vivo funcionou para mim. Não quero configurar nenhum arquivo para fazer isso.
AGDM 22/08/18

Respostas:


209

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:

  1. Use ctrl+ shift+ p(ou F1) para abrir a Paleta de comandos.

  2. Digite em Tasks: Configure Taskou 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.

  3. Salve o arquivo.

  4. Volte para o seu arquivo html (neste exemplo, é "text.html") e pressione ctrl+ shift+ bpara visualizar sua página no navegador da web.

insira a descrição da imagem aqui


16
Você pode até usar variáveis ​​se tiver mais de um arquivo HTML. Você pode fazer: "args": ["{$ file}"] para passar o arquivo aberto atual. Veja também code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer

7
Como faço isso no Mac? Não há arquivos exe. Gostaria de abrir a página da Web no chrome no Mac
InvisibleDev

3
apenas recebendo "Falha ao iniciar o programa externo chrome {$ file}. spawn chrome ENOENT"
johny why

7
Para configurar tarefas em uma nova pasta: Selecione o comando Tarefas: Configurar corredor de tarefas e você verá uma lista de modelos do corredor de tarefas. Selecione Outros para criar uma tarefa que execute um comando externo. . . . Agora você deve ver um arquivo task.json na pasta .vscode da área de trabalho com o seguinte conteúdo:. . . Por code.visualstudio.com/Docs/editor/tasks
yu yang Jian

5
O Configure Task Runner não está mais presente no VSC 1.24.0 - Control-Shift-P não retorna resultados para essa sequência.
lonstar

110

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:

  • Iniciar um clique na barra de status
  • Recarga ao vivo
  • Suporte para anexo de depuração do Chrome

insira a descrição da imagem aqui


8
Essa extensão também possui um complemento da Web para fornecer a funcionalidade de recarregamento automático para páginas dinâmicas.
2829 Sundstrom M.

@ M.Sundstrom, você pode me dar o nome / link desse complemento, por favor?
Adil Saju 10/10

2
Ainda é muito útil e, especialmente, completamente livre de configurações!
Jonas

2
Isto não é recomendado para páginas complexas talvez boas para novos codificadores
Yasser Jarouf

1
mas parece que você não pode visualizar o arquivo ativo não salvo, certo? (Executá-lo, não visualizar o html, mas shows no navegador a hierarquia da pasta)
JinSnow

73

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


32

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"
        }
    ]
}
  • No diretório raiz do seu projeto, adicione gulpfile.js e digite o seguinte código:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});
  • Agora, no Código VS, digite Ctrl + Shift + P e digite "Executar Tarefa" quando a inserir. Você verá a tarefa "servidor da web" selecionada e pressione Enter.

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


2
Eu tive que correr npm install -g gulp, npm install -g gulp-webservere 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?
Kirill Osenkov

2
Não importa, basta alterar o 'app' no seu exemplo para '.' (portanto, ele serve no diretório atual).
Kirill Osenkov

1
Um comentário para a resposta: se você deseja executar um arquivo html no seu navegador, o qual recarrega automaticamente as alterações, seu gulpfile.js deve ficar assim, com um '.' em vez do 'app'. Código = var gulp = require ('gulp'), servidor web = require ('gulp-webserver'); gulp.task ('servidor da web', function () {gulp.src ('.') .pipe (servidor da web ({fallback: 'index.html', livereload: true, open: true}));
Friis1978

1
Isso é incrível. Obrigado por explicar isso como uma opção valiosa. Também apliquei um pouco das respostas de Krill e Friis para fazer isso funcionar. Mas sim!
klewis

Eu estava recebendo "Cannot GET /" porque copypasted gulpfile.js sem configurar a linha gulp.src('app')para que ela realmente apontasse para minha fonte (que não era /appsenão '.'). Funciona perfeito. Obrigado!

22

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

insira a descrição da imagem aqui


5
Essa extensão recebe críticas horríveis.
precisa

Esta não atualiza automaticamente o browser e não é isso que OP está procurando
Jude Niroshan

18

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


17

No linux, você pode usar o xdg-opencomando para abrir o arquivo com o navegador padrão:

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

6
Obrigado! Eu sou um usuário de Linux e estava me sentindo perdido. Gostaria de acrescentar que é preciso pressionar Ctrl + Shift + bpara iniciá-lo no navegador. Para mim, o mnemônico era "b = browser". :-)
ankush981

Ele funciona, mas parece obsoleto, se você tiver uma versão atualizada, obrigado
de Bruno L.

14

Passo 1:

  1. Abra o Código do Visual Studio e vá para extensões.
  2. Procure por "abrir no navegador". insira a descrição da imagem aqui

    3.Instale-o.

    4.Clique com o botão direito do mouse no seu arquivo html, você encontrará a opção "Abrir no navegador". insira a descrição da imagem aqui

    Isso é tudo................................................ ......


9

Estou apenas republicando as etapas que usei no msdnblog. 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 htmlarquivos localhoste debugseu Javascriptcó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:

  • Não feche o prompt da linha de comando até concluir a codificação no seu aplicativo para o dia
  • Ele abre em http: // localhost: 10001, mas você pode alterar a porta editando o arquivo package.json.

É isso aí. Agora, antes de qualquer sessão de codificação, digite npm start e você estará pronto!

Originalmente publicado aqui no msdnblog. Créditos vão para o Autor:@Laurent Duveau


6

Se você está apenas no Mac, este tasks.jsonarquivo:

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



4

Resposta atualizada em 18 de abril de 2020

insira a descrição da imagem aqui

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 htmlarquivo e você verá Abrir no navegador padrão ou Atalho Ctrl+1para ver o htmlarquivo no navegador.


3

Para Mac - Abre no Chrome - Testado no VS Code v 1.9.0

  1. Use Command+ shift+ ppara abrir a paleta de comandos.

insira a descrição da imagem aqui

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

  2. 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}"]
}
  1. Volte para o seu arquivo html e pressione Command+ Shift+ bpara visualizar sua página no Chrome.

2

CTRL+SHIFT+Pexibirá a paleta de comandos.
Dependendo do que você está executando, é claro. Exemplo em um aplicativo ASP.net, você pode digitar:
>kestrele, 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 F5depois de abrir a paleta de comandos, deve abrir o depurador.

Fonte: link



2

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


2

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


2

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


Eu estava copiando apenas a tasksparte. o "args":["/C"]é o que faz este trabalho. Por curiosidade, o que isso faz?
Ryan B

1

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


1
A questão é sobre como visualizar em um navegador.
User5389726598465 de

1

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

0

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)


1
Qual versão do Visual Studio Code você está usando? Esses comandos não estão funcionando no meu recém-atualizado 1.8.1. Ctrl + F1 não faz nada e não tenho a opção Visualizar no navegador na paleta de comandos. Talvez você tenha algo além das tarefas padrão instaladas ou extras em seu tasks.json?
JLA

Eu tenho a mesma versão, mas percebi que instalei uma extensão para ela. É: marketplace.visualstudio.com/…
PersyJack 3/17

0

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, vscodemas 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 grouppropriedade não sei por que, mas sem isso, minha tarefa nem apareceria na paleta de comandos.

tão. um trabalho tasks.jsonpara windowsusuá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 problemMatcherpropriedade 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+babre o htmlarquivo atual em uma nova chromeguia, sem complicações.


fácil.


0

Abra o Chrome personalizado com URL a partir do prompt

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

Abra o Chrome personalizado com arquivo ativo

{
  "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": []
},

Notas

  • se necessário, substitua a windowspropriedade por outro SO
  • substitua ${config:chrome.executable}pela sua localização personalizada do chrome, por exemplo"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  • substitua ${config:chrome.profileDir}pelo seu diretório de perfil do Chrome, por exemplo, "C:/My/Data/chrome/profile"ou deixe de fora
  • Você pode manter as variáveis ​​como acima, se quiser. Para fazer isso, adicione as seguintes entradas em settings.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"
  • Você pode reutilizar essas variáveis, por exemplo, launch.jsonpara fins de depuração:"runtimeExecutable": "${config:chrome.executable}"
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.