Como abrir no navegador a partir do código VS

Se você estiver usando arquivos HTML, PHP ou JS, convém abri-los em seu navegador a partir do Visual Studio Code. No entanto, não há opção integrada para fazer isso. Isso pode ser frustrante, especialmente se você quiser dar uma olhada rápida no resultado de sua codificação.

Como abrir no navegador a partir do código VS

Felizmente, você pode ativar a função “Abrir no navegador” por meio de outros métodos. Este artigo irá mostrar-lhe como fazer exatamente isso.

Como abrir no navegador no VS Code em um PC com Windows

A maneira mais fácil de obter a opção Abrir no navegador para o Visual Studio Code no Windows é usar uma extensão. Instalar extensões no Visual Studio Code é relativamente simples, assim como usá-las para abrir arquivos no navegador.

  1. Abra seu arquivo HTML no Visual Studio Code Editor .
    Como abrir no navegador a partir do código VS
  2. Na barra de ferramentas vertical à esquerda, clique em “Extensões”. Como alternativa, você pode usar o atalho de teclado “Ctrl + Shift + X” para iniciar as Extensões.
    Como abrir no navegador a partir do código VS
  3. Clique na barra de pesquisa para ativar a escrita.
    Como abrir no navegador a partir do código VS
  4. Insira "abrir no navegador". Escolha uma extensão que corresponda ao seu termo de pesquisa.
    Como abrir no navegador a partir do código VS
  5. Clique no botão "Instalar".
    Como abrir no navegador a partir do código VS
  6. Recarregue o programa.
  7. Selecione o Explorer na barra de ferramentas à esquerda.
    Como abrir no navegador a partir do código VS
  8. Encontre seu arquivo HTML no Explorer e clique com o botão direito nele. Escolha “Abrir no navegador padrão” ou “Abrir em outros navegadores”.
    Como abrir no navegador a partir do código VS
  9. Se você selecionar a opção “Abrir no navegador padrão”, o arquivo HTML será iniciado em qualquer navegador definido como padrão. Se você escolher "Abrir em outros navegadores", precisará especificar qual navegador será usado.

Você pode encontrar várias extensões úteis no Visual Studio Marketplace . Ou você pode obter as extensões Open in Browser com as análises de usuários mais positivas aqui: Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Como abrir no navegador no VS Code em um Mac

O Visual Studio Code pode ser atualizado usando várias extensões que aumentam a funcionalidade do programa. Um tipo de extensão pode permitir a abertura de arquivos HTML, PHP ou JS em um navegador padrão ou outro. Veja como habilitar essa opção em um Mac.

  1. Usando o Visual Studio Code Editor , abra o arquivo desejado.
    Como abrir no navegador a partir do código VS
  2. Vá para a barra de ferramentas à esquerda e selecione “Extensões”.
    Como abrir no navegador a partir do código VS
  3. Clique na barra de pesquisa no painel Extensões e escreva “abrir no navegador”.
    Como abrir no navegador a partir do código VS
  4. Escolha uma extensão e clique em “Instalar”.
    Como abrir no navegador a partir do código VS
  5. Recarregue o software.
  6. Vá para a barra de ferramentas à esquerda e selecione Explorer.
    Como abrir no navegador a partir do código VS
  7. Localize o arquivo que deseja abrir no painel do Explorer e clique com o botão direito nele. Selecione “Abrir no navegador padrão” ou “Abrir em outros navegadores”.
    Como abrir no navegador a partir do código VS
  8. A opção “Abrir no navegador padrão” iniciará o arquivo usando o navegador pré-selecionado. “Abrir em outros navegadores” abrirá um prompt onde você poderá escolher um dos navegadores instalados em sua máquina.
    Como abrir no navegador a partir do código VS

O Visual Studio Marketplace tem uma vasta seleção de extensões que podem adicionar novas funções ao Visual Studio Code. Vale a pena explorar o site se você quiser ajustar ainda mais o programa. E se você estiver interessado exclusivamente nas extensões Open in Browser, aqui estão algumas sugestões: Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Abrir no atalho do navegador

Quase todas as extensões Open in Browser para Visual Studio Code vêm com atalhos de teclado ativados. No entanto, os atalhos não são uniformes. Em vez disso, cada extensão possui uma combinação específica de teclas que ativam a abertura do arquivo em seu navegador.

Aqui estão os atalhos de teclado para as extensões sugeridas neste artigo.

  1. Extensão 1: “Ctrl + 1” no Windows, “Command + 1” no Mac.
    Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS
  2. Extensão 2: “Ctrl + Alt + O” no Windows, “Command + Option (Alt) + O” no Mac.Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS
  3. Extensão 3: “Ctrl + Shift + F9” no Windows, “Command + Shift + F9” no Mac.
    Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS
  4. Extensão 4: “Ctrl + Shift + P” no Windows, “Command + Shift + P” no Mac.
    Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS

Observe que esses atalhos funcionarão apenas em suas respectivas extensões vinculadas neste artigo. Se você optar por instalar uma extensão diferente, os atalhos relevantes provavelmente serão listados em sua página do Marketplace.

Executando HTML no Visual Studio Code

Se você estiver interessado em trabalhar com HTML no Visual Studio Code, aqui estão alguns métodos de execução de código HTML no programa.

O primeiro método consiste em carregar manualmente o arquivo que você deseja executar.

  1. Abra o Visual Studio Code e crie um novo arquivo HTML.
    Como abrir no navegador a partir do código VS
  2. Vá para "Arquivo" e clique em "Salvar".
    Como abrir no navegador a partir do código VS
  3. Usando HTML:5, ative o modelo para HTML. Em seguida, abra o arquivo que você salvou na etapa 2.
    Como abrir no navegador a partir do código VS
  4. Use a extensão Abrir no navegador que você instalou anteriormente para iniciar o arquivo em seu navegador.
  5. Com o navegador aberto, volte ao Visual Studio Code e edite o arquivo HTML, salvando as alterações.
    Como abrir no navegador a partir do código VS
  6. Retorne ao navegador e clique em atualizar. Você deve ver a mudança de página com base em sua edição.
    Como abrir no navegador a partir do código VS
  7. Repita as etapas 5 e 6 para verificar seu progresso enquanto continua editando o arquivo HTML.

O método manual pode ajudar a acompanhar o seu trabalho. No entanto, existe uma solução ainda melhor: carregamento automático. Esta opção exigirá que você instale outra extensão, mas deve valer a pena.

  1. No Visual Studio Code, vá para Extensions, localizado na parte inferior da barra de ferramentas esquerda.
    Como abrir no navegador a partir do código VS
  2. Na barra de pesquisa de Extensões, digite "servidor ao vivo".
    Como abrir no navegador a partir do código VS
  3. Clique no botão “Instalar” ao lado da extensão Live Server.
    Como abrir no navegador a partir do código VS
  4. Crie e salve um novo arquivo HTML.
    Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS
  5. No Visual Studio Code Explorer, clique com o botão direito do mouse em seu novo arquivo. Selecione "Abrir servidor ao vivo".
    Como abrir no navegador a partir do código VS
  6. O arquivo HTML será aberto no navegador. Depois disso, tente editar o código HTML. Salve seu progresso.
    Como abrir no navegador a partir do código VS
    Como abrir no navegador a partir do código VS
  7. Assim que você criar uma alteração no código e salvá-la, seu navegador deverá ser atualizado, mostrando o novo conteúdo. Você não precisará atualizar a página manualmente e, em vez disso, poderá ter uma confirmação visual das alterações em tempo real.
    Como abrir no navegador a partir do código VS

Outras extensões HTML úteis do Visual Studio Code

Como mencionado, o Visual Studio Marketplace está repleto de excelentes ferramentas, muitas das quais voltadas para HTML. Aqui estão as dez extensões mais úteis e melhor avaliadas para HTML.

  • lit-plugin : Uma ferramenta que destaca a sintaxe, verifica a digitação e ajuda a completar o código sem erros. Esta extensão tem regras personalizáveis.
  • SCSS Everywhere : Uma extensão de preenchimento automático para definições de classe para HTML, SCSS, Elixir, SASS, PHP, CSS e muitos outros tipos de arquivo.
  • Snippets Angular : Adiciona snippets Angular para facilitar o uso em HTML e TypeScript. A extensão funciona desdobrando um trecho depois de parcialmente digitado.
  • ES6 String HTML : Ativa o suporte de código de string es6 para realce de sintaxe. Funciona com HTML, CSS, XML, GLSL e outros formatos.
  • Dividir atributos HTML : esta extensão dividirá atributos HTML, bem como props e diretivas Angular, Vue e React. Você pode usá-lo em tags de abertura e fechamento automático, bem como em seleções múltiplas.
  • Djaneiro – Django Snippets : Uma extensa coleção de snippets para templates Django HTML. O uso dessa extensão reduzirá significativamente o tempo gasto na digitação.
  • Live Preview : A extensão Live Preview da Microsoft permite hospedagem de servidor local. Se você tiver um projeto que não use Angular, React ou outras ferramentas de servidor, esta extensão permitirá a visualização regular e incorporada de HTML com atualizações de página em tempo real.
  • Oracle JET Core : esta extensão criada pela Oracle Corporation fornece suporte completo para dados HTML personalizados do Oracle JET. Os snippets incluídos preencherão automaticamente todos os atributos e tags JET.
  • Navegação CSS : Ativa Ir para Definição para HTML para CSS, HTML para Less e HTML para Sass. O comando Peek Definition também está habilitado.
  • Conversor de caracteres acentuados HTML : Substitui perfeitamente caracteres especiais por entidades HTML apropriadas. Essa extensão é útil em situações, mas essencial ao lidar com strings localizáveis.

Você pode executar o código do Visual Studio a partir do seu navegador

Além de executar arquivos HTML em um navegador, também é possível usar todo o Visual Studio Code online. Isso requer que você inicie uma versão específica do programa desenvolvido para uso do navegador.

Vale a pena notar que esta versão é muito mais leve em comparação com o Visual Studio Code para desktop. No entanto, pode ser uma solução direta para fácil navegação no repositório e no arquivo, bem como pequenas alterações no código.

Se quiser experimentar a variante do navegador Visual Studio Code, você pode começar imediatamente clicando aqui .

Coloque seus arquivos HTML em funcionamento

A abertura de arquivos HTML em seu navegador é facilitada com a extensão dedicada para o Visual Studio Code. Se você decidir explorar as vastas ofertas de extensões para esta ferramenta de codificação, a função Abrir no navegador será apenas o começo de sua jornada.

Você conseguiu abrir seu arquivo HTML no navegador de sua escolha? Qual extensão você usou? Deixe-nos saber na seção de comentários abaixo.

Sign up and earn $1000 a day ⋙

Leave a Comment

O que é VPN? Vantagens e desvantagens da VPN (rede privada virtual)

O que é VPN? Vantagens e desvantagens da VPN (rede privada virtual)

O que é VPN? Quais são as vantagens e desvantagens? Vamos discutir com a WebTech360 a definição de VPN e como aplicar esse modelo e sistema no trabalho.

A maioria das pessoas não usa esses recursos ocultos na Segurança do Windows.

A maioria das pessoas não usa esses recursos ocultos na Segurança do Windows.

O Windows Security faz mais do que apenas proteger contra vírus básicos. Ele protege contra phishing, bloqueia ransomware e impede a execução de aplicativos maliciosos. No entanto, esses recursos não são fáceis de identificar — eles ficam escondidos atrás de várias camadas de menus.

A codificação não é tão difícil quanto você pensa

A codificação não é tão difícil quanto você pensa

Depois que você aprender e realmente experimentar por si mesmo, descobrirá que a criptografia é incrivelmente fácil de usar e incrivelmente prática para a vida cotidiana.

Recuperar dados excluídos com o Recuva Portable no Windows 7

Recuperar dados excluídos com o Recuva Portable no Windows 7

No artigo a seguir, apresentaremos as operações básicas para recuperar dados excluídos no Windows 7 com a ferramenta de suporte Recuva Portable. Com o Recuva Portable, você pode armazená-lo em qualquer USB conveniente e usá-lo sempre que precisar. A ferramenta é compacta, simples e fácil de usar, com alguns dos seguintes recursos:

Como excluir arquivos duplicados para economizar memória do computador usando o CCleaner

Como excluir arquivos duplicados para economizar memória do computador usando o CCleaner

O CCleaner verifica se há arquivos duplicados em apenas alguns minutos e depois permite que você decida quais são seguros para excluir.

Por que alterar o local de download padrão no Windows 11?

Por que alterar o local de download padrão no Windows 11?

Mover a pasta Download da unidade C para outra unidade no Windows 11 ajudará a reduzir a capacidade da unidade C e ajudará seu computador a funcionar de maneira mais suave.

Como interromper atualizações do Windows no PC

Como interromper atualizações do Windows no PC

Esta é uma maneira de fortalecer e ajustar seu sistema para que as atualizações aconteçam de acordo com sua programação, não a da Microsoft.

Como mostrar extensões de arquivo, visualizar extensões de arquivo no Windows

Como mostrar extensões de arquivo, visualizar extensões de arquivo no Windows

O Explorador de Arquivos do Windows oferece diversas opções para alterar a forma como você visualiza seus arquivos. O que você talvez não saiba é que uma opção importante está desabilitada por padrão, embora seja crucial para a segurança do seu sistema.

5 ferramentas gratuitas para encontrar spyware e adware no seu PC

5 ferramentas gratuitas para encontrar spyware e adware no seu PC

Com as ferramentas certas, você pode escanear seu sistema e remover spyware, adware e outros programas maliciosos que possam estar à espreita nele.

14 aplicativos e softwares do Windows que você precisa no seu novo computador

14 aplicativos e softwares do Windows que você precisa no seu novo computador

Abaixo está uma lista de softwares recomendados ao instalar um novo computador, para que você possa escolher os aplicativos mais necessários e melhores para o seu computador!

Como clonar as configurações do Windows para levar seu fluxo de trabalho para qualquer lugar

Como clonar as configurações do Windows para levar seu fluxo de trabalho para qualquer lugar

Carregar um sistema operacional inteiro em um pendrive pode ser muito útil, especialmente se você não tiver um laptop. Mas não pense que esse recurso se limita às distribuições Linux — é hora de tentar clonar sua instalação do Windows.

Desative estes 7 serviços do Windows para prolongar a duração da bateria!

Desative estes 7 serviços do Windows para prolongar a duração da bateria!

Desativar alguns desses serviços pode economizar uma quantidade significativa de bateria sem afetar seu uso diário.

Para que serve o atalho Ctrl + Z no Windows? Provavelmente mais do que você imagina.

Para que serve o atalho Ctrl + Z no Windows? Provavelmente mais do que você imagina.

Ctrl + Z é uma combinação de teclas extremamente comum no Windows. Ctrl + Z basicamente permite desfazer ações em todas as áreas do Windows.

Não clique em nenhum link encurtado até ter certeza de que é seguro!

Não clique em nenhum link encurtado até ter certeza de que é seguro!

URLs encurtadas são convenientes para limpar links longos, mas também ocultam o destino real. Se você quiser evitar malware ou phishing, clicar cegamente nesse link não é uma escolha inteligente.

Windows 11 22H2: atualização Moment 1 com muitos recursos notáveis

Windows 11 22H2: atualização Moment 1 com muitos recursos notáveis

Após uma longa espera, a primeira grande atualização do Windows 11 foi lançada oficialmente.