Blog

Postado em em 11 de dezembro de 2023

VS Code para HTML e CSS – Como Baixar e Configurar

Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

VS Code para HTML e CSS – Como Baixar e Configurar

Na aula de hoje, vou te guiar no processo de baixar e configurar o VS Code para HTML e CSS. Com isso, você estará completamente preparado para iniciar seu desenvolvimento web.

Vou explicar passo a passo como realizar a instalação do VS Code e, em seguida, apresentarei algumas extensões extremamente úteis para facilitar o desenvolvimento dos seus projetos.

Com essas dicas, você estará pronto para utilizar o VS Code para HTML e CSS de maneira eficiente no desenvolvimento front-end. Então, vamos começar!

Como Baixar e Instalar o VS Code para HTML e CSS

Para obter o Visual Studio Code (VS Code), basta pesquisar por “VS Code download” no Google e acessar o primeiro link.

Escolha o seu sistema operacional e faça o download correspondente.

Download VS Code

Assim que o download estiver concluído, execute o arquivo de instalação padrão do VS Code. Na janela que se abrirá, aceite os termos e clique em Próximo, mantendo as opções padrão durante a instalação.

Instalação VS Code

Com a instalação concluída, podemos acessar o VS Code e instalar as extensões necessárias.

Extensões do VS Code para HTML e CSS

Com o VS Code aberto, clique na aba de extensões para começarmos a instalar as extensões necessárias, tornando seu desenvolvimento mais eficiente e prático!

Extensões VS Code

Auto Rename Tag:

A primeira extensão a ser instalada é a Auto Rename Tag. Basta clicar em Install abaixo do nome da extensão para concluir a instalação.

Auto Rename Tag

Essa extensão renomeia automaticamente as tags dentro do seu arquivo HTML.

Por exemplo, se você tiver uma tag de parágrafo <p> </p> e precisar alterá-la para uma tag de ancoragem, ao substituir a tag de abertura <p> por <a>, essa extensão ajustará automaticamente a tag de fechamento de </p> para </a>.

Auto Rename Tag
Auto Rename Tag

Isso agiliza muito o processo de criação e edição de tags dentro do HTML.

Color Highlight

A segunda extensão que vamos instalar é a Color Highlight.

Color Highlight

Essa extensão é particularmente útil ao trabalharmos com o CSS. Ela nos permite visualizar a cor do código hexadecimal inserido dentro do arquivo.

Por exemplo, se inserirmos o código #FFFFFF (cor branca), a extensão destacará essa parte em branco, facilitando a visualização das cores enquanto digitamos o código.

Color Highlight funcionando

Isso é útil para visualizar e testar variações de cor sem precisar procurar na internet, podendo simplesmente digitar o código correspondente e visualizar imediatamente.

Image Preview:

A extensão Image Preview, como o nome sugere, permite visualizar uma prévia da imagem à qual você está fazendo referência.

Image Preview

Após inserir uma tag de imagem, uma prévia dessa imagem aparecerá ao lado esquerdo, permitindo que você confirme se é a imagem desejada.

Image Preview funcionando

Live Server:

Essa extensão é essencial para qualquer projeto em HTML e CSS que você estiver desenvolvendo. Ela permite criar um servidor local na sua máquina, proporcionando uma prévia instantânea de tudo o que você está criando dentro do VS Code diretamente no seu navegador.

Live Server

Ou seja, à medida que você cria e edita seus arquivos HTML e CSS no VS Code, consegue visualizar as modificações geradas na sua página instantaneamente no navegador.

Criando código teste pro Live Server

Para carregar seu arquivo HTML com o Live Server, basta clicar com o botão direito do mouse sobre o nome dele e selecionar a opção Open with Live Server ou clicar em Go Live no canto inferior direito da tela do VS Code.

Executando o Live Server
Visualizando a página

Prettier:

A Prettier é uma extensão muito útil para formatação dos nossos arquivos. Ela ajusta a indentação do código facilmente.

Prettier

Além de instalá-la, será necessário fazer mais algumas configurações para que essa extensão funcione corretamente.

No canto inferior esquerdo do VS Code, clique na engrenagem e depois em Settings.

Acessando settings do VS Code

Busque por format e altere o Default Formatter para Prettier – Code Formatter.

Alterando o Default Formatter

Em seguida, procure por Auto Save e altere a opção para onFocusChange. Isso fará com que o VS Code salve seus arquivos sempre que você mudar de aba, alterar de janela ou pressionar Ctrl + S.

Alterando o Auto Save

E sempre que isso ocorrer, o Prettier entrará em ação, formatando seu código automaticamente.

One Monokai Theme:

A última extensão que eu quero apresentar para vocês hoje é a One Monokai Theme. Essa é uma extensão para alterar o tema e as cores padrão do seu VS Code.

One Monokai Theme

Essa é uma extensão é puramente estética, mas facilita a visualização e leitura do código. Você pode optar por utilizá-la ou escolher outra que lhe agrade mais.

Conclusão – VS Code para HTML e CSS – Como Baixar e Configurar

Nessa aula, demonstrei como baixar e configurar o VS Code para HTML e CSS, permitindo que você o deixe pronto e ajustado para o seu desenvolvimento web.

Além de fornecer um guia passo a passo sobre a instalação do VS Code, apresentei as principais extensões que vão aprimorar significativamente o seu trabalho front-end. Essas extensões tornarão o desenvolvimento dos seus projetos mais simples, práticos e eficientes.

Hashtag Treinamentos

Para acessar publicações de HTML e CSS, clique aqui!


Quer aprender mais sobre HTML e CSS com um minicurso básico gratuito?