Como executar um arquivo HTML no VS Code
O Visual Studio Code (VS Code) é uma ótima alternativa para editores de código maiores e mais complexos para quem está começando a programar. Para desenvolvedores web, em particular, ele oferece muitas oportunidades para escrever e ajustar seções HTML, além de muitos recursos que tornam o desenvolvimento uma jornada emocionante.
Mas como exatamente você executa um arquivo HTML no VS Code se você Você é novo no mundo do desenvolvimento? Vamos responder a esta pergunta e explorar as funções que o VS Code reserva para codificadores HTML.
Executando um arquivo HTML no VS Code
Mesmo que o VS Code não tenha uma visualização HTML óbvia funcionalidade assim que você o inicia, ele compensa com uma enorme variedade de extensões. Esses complementos da comunidade podem preencher o vazio e fornecer um recurso de visualização em tempo real, como se sempre tivesse sido integrado. Veja como usá-los:
Abra o Visualização de extensões no VS Code pressionando Ctrl+Shift+X. A partir daqui, você pode procurar qualquer extensão que lhe agrade.
Para encontrar a extensão correta, digite palavras-chave como “visualização ao vivo”ou “visualização HTML”nesta visualização. Cada extensão tem recursos diferentes, como visualizações ao vivo fáceis de usar ou visualizações integradas do navegador no ambiente do VS Code.
Depois de encontrar a extensão que parece adequado para o seu projeto, clique em “Instalar” e ele fará parte do seu ambiente do Visual Studio Code para uso futuro.
Clique no botão de visualização em tela dividida para visualizar seu arquivo HTML na tela dividida.
Então, é hora de explorar o novos recursos da extensão que você acabou de instalar. Confira a documentação ou veja quais opções estão disponíveis clicando com o botão direito do mouse nos menus de contexto do seu arquivo HTML.
Execute HTML no Terminal
Se você Se preferir não mexer com extensões ainda, o Terminal no VS Code permite executar um arquivo HTML sem extensões, embora seja um pouco mais complexo:
Abra ou crie um novo arquivo para código HTML.
Clique em Terminal na parte superior e selecione Novo Terminal para abri-lo.
Mude para o local do seu arquivo HTML com o 
Digite “start “seguido do nome do arquivo HTML e pressione Enter. Isso iniciará o arquivo HTML em seu navegador padrão.
Abrir no navegador
Voltar às extensões, outra extensão útil para HTML e web o desenvolvimento, em geral, é “Abrir no navegador”, que abre um arquivo HTML no navegador diretamente do VS Code. Veja como:
Clique no botão Extensões ao lado.
Digite “abrir no navegador”na barra de pesquisa para encontrar a extensão.
Depois de ver a extensão de mesmo nome, instale-a.
Depois de instalá-lo, clique com o botão direito em qualquer lugar do seu código HTML.
Selecione “Abrir em navegador padrão”ou escolha outro navegador em “Abrir em outro navegador”opção.
Recursos avançados para desenvolvimento HTML no VS Code
Depois de configurar seu ambiente de desenvolvimento e obter todas as extensões corretas, seu projeto terá apenas começou. Vamos explorar brevemente os recursos do VS Code que você pode usar ao visualizar arquivos HTML para facilitar seu trabalho.
IntelliSense
IntelliSense é o companheiro de programação digital que acelera o desenvolvimento preenchendo automaticamente seus código enquanto você digita. Ele adivinha o código mais provável e o faz de maneira inteligente e não invasiva. O IntelliSense oferece ajuda instantânea ao escrever estruturas HTML, prevendo corretamente quando você precisa fechar tags e fornecendo uma lista baseada no contexto de possíveis elementos ou atributos.
Esse recurso evita que você perca tempo percorrendo sintaxes ou manualmente. inserindo e memorizando tudo. Dessa forma, você pode colocar um site no ar mais rápido do que nunca.
Validação
Cometer erros de codificação é inevitável, não importa quão experiente ou conhecedor você seja – erros acontecem com todos. No entanto, encontrar esses erros a tempo pode evitar uma depuração interminável. O VS Code tem uma validação integrada bacana que coloca seu HTML, JavaScript e CSS incorporados sob escrutínio para detectar bugs antes que eles cheguem ao seu site e causem interrupções para os usuários. Um site sem erros é aquele que atrai os usuários e os faz permanecer.
Formatação
Manter a formatação correta às vezes pode ser assustador, especialmente se você estiver no “ jogue coisas nele e veja o que funciona”equipe. Organizar nem sempre é fácil. Mas sem a estrutura adequada, as coisas podem rapidamente se tornar confusas e confusas para você e outros desenvolvedores possivelmente colaborando com você.
Com o VS Code’s Com o comando Formatar documento (Ctrl+Shift+I), você pode manter o código limpo e organizado, seguindo os padrões do setor. É uma alteração aparentemente pequena, com um clique, mas depois de vê-la, você aprecia instantaneamente sua funcionalidade.
Snippets de Emmet
Snippets de Emmet para VS Code podem acelerar enormemente seu desenvolvimento. Imagine que você tem dezesseis botões para projetar para uma barra de navegação. Escrever as tags de cada botão manualmente seria uma tarefa meticulosa. Os snippets permitem que você execute facilmente essas tarefas repetitivas, para que você tenha mais tempo para a essência do seu projeto.
Com essas poderosas abreviações abreviadas, dominar estruturas complexas de HTML (e CSS) é simples. Você pode adicionar qualquer código que pretenda usar com frequência e simplesmente adicioná-lo ao seu arquivo. Quer você seja um programador iniciante ou experiente, não vai querer perder o truque que economiza tempo ao usar snippets de código.
Extensões em abundância
O VS Code Marketplace está lotado com um espectro de extensões. A maioria deles é feita por membros da comunidade e desenvolvedores entusiasmados como você, que compartilham seu conhecimento para facilitar o trabalho de outras pessoas. As ferramentas Linting mantêm seu código totalmente limpo, servidores ativos atualizam seu navegador em segundo plano conforme você renderiza e muito mais. É uma potência para a criação de aplicativos da web sofisticados. Se você precisar de codificação, provavelmente existe uma extensão no Marketplace pronta para atendê-la.
Seletor de cores
No desenvolvimento web, os recursos visuais são tudo. Com o seletor de cores do VS Code, você não precisa memorizar códigos hexadecimais complexos. Escolha cores, observe sua aparência em tempo real e até mesmo explore e entenda como elas se conectam com matizes e sombras vizinhas.
Personalizando o VS Code para desenvolvimento HTML
O VS Code não é um editor feito de fábrica que deve ter uma determinada aparência. Suponha que você queira temas escuros para leitura noturna de codificação ou visualização mais acessível com menos cansaço visual, espaçamento de tabulação especificado para melhorar a composição e organização do código ou formatos de dados personalizados projetados para projetos exclusivos. Nesse caso, o VS Code tem muitas opções de personalização.
HTML, em particular, é uma linguagem de marcação simples que, se desejar, você também pode escrever no bom e velho Bloco de Notas, mas então você estar perdendo muitas conveniências que editores como o VS Code trazem. Acesse as configurações, explore e remodele o editor – torne-o uma expressão de sua auto-codificação.
Desenvolvimento Web em tempo real
Primeiro, executando um arquivo HTML no VS Code pode parecer um pouco obscuro, especialmente se você foi direcionado a este editor especificamente por suas conveniências de desenvolvimento web. Mas com as extensões certas (ou o prático Terminal) e uma compreensão dos recursos do editor, é muito fácil.
O VS Code combina interfaces simples e recursos poderosos para iniciantes e desenvolvedores web experientes fazerem o trabalho rapidamente. Todos esses recursos interessantes provavelmente o tornarão seu local preferido para manipular código – e não apenas HTML.
O Visual Studio Code é seu editor preferido para escrever em HTML? Você é um desenvolvedor web experiente ou está apenas começando? Deixe um comentário abaixo e compartilhe suas histórias, dicas e truques.
Isenção de responsabilidade: algumas páginas deste site podem incluir um link de afiliado. Isso não afeta nosso editorial de forma alguma.
