Como Executar um Arquivo HTML no Visual Studio Code

Coescrito por Equipe wikiHow

O Visual Studio Code é um editor de código-fonte feito pela Microsoft e disponibilizado para o Windows, o Linux e o macOS. Com ele, o usuário pode escrever e editar código em várias linguagens de programação, inclusive HTML, mas o que fazer quando você precisa ver como está progredindo o código HTML no meio de seu trabalho? Uma extensão ou complemento que facilita a execução de HTML dentro do Visual Studio Code é a melhor opção. O Terminal também pode ser utilizado para rodar arquivos desse tipo. Leia o artigo para aprender a executar um HTML no Visual Studio Code.

Método 1

Método 1 de 4:
Criando, abrindo e salvando um arquivo HTML

1
Abra o Visual Studio Code. Representado pelo ícone de um laço azul, ele deverá estar no menu “Iniciar” (Windows), na pasta “Aplicativos” (macOS) ou no menu de Apps do Linux. Clique nele.
- Caso ainda não tenha baixado o VSCode, obtenha-o aqui. Basta clicar em “Download” e abrir o arquivo de instalação, seja na pasta “Downloads” ou através do próprio navegador. Siga as orientações para adicionar o aplicativo ao sistema.
2
Abra ou crie um arquivo HTML. Há algumas formas diferentes para conseguir isso:
- Crie um item selecionando “Arquivo”, na barra de menus na parte superior da tela. Escolha “Novo arquivo” e comece a escrever o código HTML.
- Para abrir um arquivo já existente, clique em “Arquivo”, na barra de menus no topo da tela. Opte por “Abrir Arquivo”, navegue até a pasta com o HTML que deseja acessar, selecione-o e depois clique em “Abrir”.
3
Salve o arquivo no formato HTML. Assim que estiver pronto para executar o HTML no VSC, será preciso, primeiro, salvá-lo como um arquivo HTML, para depois rodá-lo no navegador de sua escolha. Siga os passos abaixo para salvá-lo no Visual Studio Code:
- Selecione “Arquivo”, na barra de menus no topo da tela.
- Clique em “Salvar como”.
- Faça a denominação do item em “Nome do arquivo”.
- Acesse o menu suspenso ao lado de “Salvar como tipo” e escolha “HTML”.
- Clique em “Salvar”.
Publicidade

Método 2

Método 2 de 4:
Utilizando o Terminal

1
Abra o Visual Studio Code clicando em seu ícone, um laço azul. Ele deverá estar no menu “Iniciar” (Windows), na pasta “Aplicativos”, do Mac, ou no menu Apps, do Linux.
2
Crie ou abra um arquivo HTML. Comece abrindo um HTML ou criando um arquivo e salvando-o nesse formato. Caso já tenha um aberto, clique na guia com o HTML, no topo da tela, para visualizá-lo.
3
Acesse o Terminal clicando no nome dele, mais acima na tela. Esse é o único modo de executar um arquivo HTML no Visual Studio Code sem usar complementos ou extensões, e infelizmente, é a maneira mais complexa.
- Outra opção é clicar em “Visualizar”, na parte superior, e em “Terminal”.
4
Digite cd e depois o caminho do arquivo HTML, e aperte ↵ Enter. Com isso, você será levado à localização do arquivo HTML; se estiver na pasta “Documentos”, por exemplo, digite cd \Usuários\nomedeusuário\Documentos e aperte “Enter”.
- Se o HTML estiver salvo em uma unidade diferente da qual o sistema operacional está instalado, será necessário mudar a letra dela no Terminal antes de acessar o caminho do HTML. Basta digitar a letra (por exemplo, D:, se for a unidade “D:”) e pressionar “Enter”.
- Caso não saiba exatamente a localização do HTML, clique com o botão direito na guia dele, na parte superior da tela, e selecione “Copiar caminho”. Digite cd no Terminal e cole o caminho logo depois. Apague o nome do arquivo no fim do caminho e tecle “Enter”.
- Se alguma pasta do caminho até o diretório do HTML apresentar um espaço no nome, o Terminal não conseguirá chegar até o destino. Use o Finder ou o Explorador de Arquivos (Windows) para acessar pastas com espaço no nome e então renomeie-as, removendo os espaços (por exemplo: a “Arquivos HTML” pode ser renomeada como “Arquivos_HTML”).
5
Digite start, depois o nome do arquivo HTML e pressione ↵ Enter. Por exemplo: para executar o arquivo “index”, insira start index.html e tecle “Enter”. Com isso, o arquivo HTML será inicializado em uma janela separada, de modo que possa ver a prévia dele.
- Para fechar a pré-visualização, basta clicar no “x” no topo da janela.^{[1]
  X
  Fonte de pesquisa}
Publicidade

Método 3

Método 3 de 4:
Utilizando a extensão "HTML Preview"

1
Abra o Visual Studio Code clicando em seu ícone, um laço azul. Ele deverá estar no menu “Iniciar” (Windows), na pasta “Aplicativos”, do Mac, ou no menu “Apps”, do Linux.
2
Clique no botão “Extensões”, representado pelo ícone de quatro quadrados na barra de menus à esquerda. O campo de busca do “Extensões” será exibido.
3
Insira HTML Preview na barra de pesquisa. O campo estará no topo do menu “Extensões”, à esquerda, e exibirá resultados correspondentes à busca. O complemento "HTML Preview", para o VSCode, permite que você veja a pré-visualização de arquivos HTML dentro do próprio programa, dividindo a tela ou usando tela cheia.
4
Clique na extensão “HTML Preview”, que deve ser a primeira na lista exibida. Ela foi criada por Thomas Haakon Townsend e possui o ícone de um escudo laranja com um “5” no meio (o logotipo da linguagem HTML5).
5
Selecione Install (Instalar), na seção “HTML Preview”, na página de informações à direita do menu de extensões. O complemento começará a ser adicionado, e após alguns minutos, a instalação terminará.
6
Abra ou crie um arquivo HTML se ainda não tiver feito isso. Salve-o no formato HTML; se já houver um item do tipo aberto, clique na guia dele, na parte superior da tela, para visualizá-lo.
7
Clique no botão de prévia da tela dividida. O ícone é de uma tela dividida com uma lupa à esquerda e estará no canto direito superior da tela. A pré-visualização do HTML em tela dividida será exibida no Visual Studio Code.
- Segure “Alt” e clique no botão de prévia para ver o código HTML em tela cheia.
- Para fechar a pré-visualização, clique no “X”, na guia de pré-visualização, na parte superior da tela.
Publicidade

Método 4

Método 4 de 4:
Utilizando a extensão “open in browser”

1
Abra o Visual Studio Code clicando em seu ícone, um laço azul. Ele deverá estar no menu “Iniciar” (Windows), na pasta “Aplicativos”, do Mac, ou no menu “Apps”, do Linux.
2
Clique no botão “Extensões”, representado pelo ícone de quatro quadrados na barra de menus à esquerda. O campo de busca do “Extensões” será exibido.
3
Digite open in browser na barra de pesquisa, mais acima e à esquerda, no menu “Extensões”. Uma lista de complementos que correspondem à pesquisa será mostrada; o "open in browser" é para o Visual Studio Code e possibilitará que você abra um HTML através de um navegador de internet de sua preferência a partir do próprio VSC.
4
Clique na extensão "open in browser", que deve ser a primeira na lista de resultados. Ela é escrita toda em minúsculas e é criada pela TechER.
5
Selecione Install (Instalar), embaixo do título “open in browser” e na página de informações à direita do menu de extensões. O complemento será adicionado após alguns minutos.
6
Crie ou abra um arquivo HTML, caso ainda não o tenha feito. Salve-o no formato HTML; se já possuir um arquivo do tipo aberto, clique na guia dele, na parte de cima da tela, para visualizá-lo.
7
Clique com o botão direito em qualquer lugar do código HTML. Um menu de contexto será exibido.
8
Escolha Open in Default Browser (Abrir no navegador padrão) para que o HTML seja exibido no browser que está definido como padrão em seu computador. Você visualizará o arquivo.^{[2]
X
Fonte de pesquisa}
- Se preferir, selecione “Open in Other Browser” (Abrir em outro navegador) e clique duas vezes no navegador desejado.
- Caso tenha que definir um navegador padrão, basta clicar em um e depois em “Ok”.
Publicidade