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

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?

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.

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

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

• 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

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-opencomando para abrir o arquivo com o navegador padrão:

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

Passo 1:

1. Abra o Código do Visual Studio e vá para extensões.

2. Procure por "abrir no navegador".

   3.Instale-o.

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

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

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

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.

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

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

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

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

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

4. Volte para o seu arquivo html e pressione Command+ Shift+ bpara visualizar sua página no Chrome.

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

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

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

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