Veja como baixar, configurar e personalizar o VS Code para HTML, CSS e conheça outras tecnologias essenciais do desenvolvimento front-end e full-stack.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
O que você vai ver hoje?
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.
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.
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!
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.
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>.
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.
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.
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.
Após inserir uma tag de imagem, uma prévia dessa imagem aparecerá ao lado esquerdo, permitindo que você confirme se é a imagem desejada.
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.
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.
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.
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.
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.
Outras tecnologias full-stack!
Agora vamos conhecer outras tecnologias não necessariamente relacionadas com HTML e CSS, mas que são essenciais para todo programador front-end experiente!
Prettier
Mais uma extensão do VS Code, Prettier é essencial para manter o código limpo e organizado. Ele ajusta automaticamente a indentação e a formatação dos arquivos, garantindo um padrão consistente.
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.
Busque por format e altere o Default Formatter para Prettier – Code 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.
E sempre que isso ocorrer, o Prettier entrará em ação, formatando seu código automaticamente.
React Snippets
Se você trabalha com React, Angular ou Vue, sabe que a produtividade no front-end pode ser significativamente aprimorada com snippets de código.
O React Snippets é uma extensão do VS Code que facilita a criação de componentes no React.
Para instalá-lo, pesquise por React Snippets no Marketplace do VS Code e instale a opção mais baixada.
Agora, sempre que quiser criar um componente React, basta digitar os atalhos. Por exemplo, digitando rafce dentro de um arquivo .jsx, snippet gerará automaticamente um componente de função de seta com exportação padrão.
Isso agiliza o desenvolvimento, evitando a necessidade de escrever manualmente a estrutura básica de um componente.
NodeJS
No mundo full-stack, não podemos falar de desenvolvimento sem mencionar o Node.js, que permite executar JavaScript fora do navegador.
Para instalá-lo, acesse nodejs.org/pt/download e baixe a versão recomendada para seu sistema operacional.
Depois disso, execute o instalador e siga as instruções, clicando apenas em “Próximo” sem alterar nenhuma configuração.
Após a instalação, verifique se tudo está funcionando corretamente:
- Abra o Prompt de Comando e digite:
node -v - Se tudo estiver certo, aparecerá a versão do Node.js instalada.
NPM
O NPM (Node Package Manager) é um gerenciador de pacotes que permite instalar bibliotecas e frameworks para otimizar o desenvolvimento. Ele já vem integrado ao Node.js.
Por exemplo, para instalar o driver oficial do MongoDB, basta rodar:
npm i mongodb
Esse comando instala o pacote necessário para trabalhar com bancos de dados no Node.js.
Conclusão – VS Code para HTML e CSS, e outras Tecnologias Full Stack
Nesta aula, vimos como baixar e configurar o VS Code para HTML e CSS, preparando o ambiente ideal para o desenvolvimento web.
Além disso, exploramos ferramentas essenciais para um workflow mais eficiente, incluindo extensões como Prettier e React Snippets, e tecnologias fundamentais como Node.js e NPM.
Quer aprender mais? O Curso Impressionador de HTML e CSS da Hashtag é o próximo passo para você dominar essas tecnologias e se destacar no mercado de desenvolvimento web!
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack!Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do ZeroQuer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- Como surgiu a OpenAI: entenda a história completa da criadora do ChatGPT e seus impactos
Descubra como surgiu a OpenAI, conheça sua transformação na gigante da inteligência artificial e entenda como essa trajetória afeta a tecnologia e os negócios! - Connected Speech – Como Entender o Inglês Falado por NativosAprenda tudo sobre Connected Speech e entenda, de uma vez por todas, o inglês falado por nativos com mais fluência e clareza!
- 17 Novas Fórmulas Excel Úteis para o TrabalhoConheça 17 novas fórmulas Excel que serão muito úteis no seu dia a dia! Aprenda sobre as fórmulas mais recentes que aumentarão sua produtividade no trabalho!
Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.