Baixe em PDFBaixe em PDFX
Este artigo foi coescrito por Stan Kats. Stan Kats é COO e Tecnólogo da STG IT Consulting Group em West Hollywood, California. Stan oferece soluções práticas em tecnologia e cibersegurança a empresas (por meio de serviços de TI) e para pessoas físicas (por meio de sua empresa, Stan's Tech Garage). Stan tem mais de 7 anos de experiência no ramo, atuando como especialista sênior em cibersegurança para empresas como General Motors, AIG e Aramark. Stan é formado em Relações Internacionais pela The University of Southern California.
Este artigo foi visualizado 51 150 vezes.
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.
Passos
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.
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”.
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
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.
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.
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”.
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”).
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]
Publicidade
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.
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.
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.
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).
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á.
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.
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
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.
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.
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.
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.
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.
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.
Clique com o botão direito em qualquer lugar do código HTML. Um menu de contexto será exibido.
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]- 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
Referências
Sobre este guia How.com.vn
Especialista em Cibersegurança
Este artigo foi coescrito por Stan Kats. Stan Kats é COO e Tecnólogo da STG IT Consulting Group em West Hollywood, California. Stan oferece soluções práticas em tecnologia e cibersegurança a empresas (por meio de serviços de TI) e para pessoas físicas (por meio de sua empresa, Stan's Tech Garage). Stan tem mais de 7 anos de experiência no ramo, atuando como especialista sênior em cibersegurança para empresas como General Motors, AIG e Aramark. Stan é formado em Relações Internacionais pela The University of Southern California. Este artigo foi visualizado 51 150 vezes.
Categorias: Programação
Esta página foi acessada 51 150 vezes.
Este artigo foi útil?
⚠️ Disclaimer:
Content from Wiki How Português language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
Publicidade
