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.
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.
Prettier:
A Prettier é uma extensão muito útil para formatação dos nossos arquivos. Ela ajusta a indentação do código facilmente.
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.
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.
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.
Quer aprender mais? O Curso Impressionador de HTML e CSS Online 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
- Animate Timeline CSS – Animações com Scroll
Você já conhece a nova propriedade animate timeline do CSS? Essa propriedade vai te permitir fazer uma animação com scroll sem a necessidade de utilizar o JavaScript! Caso prefira esse… Leia mais: Animate Timeline CSS – Animações com Scroll - Tema Escuro e Claro com CSS e JavaScript – Light Mode e Dark Mode
Você sabe como criar um tema escuro e claro com CSS e JavaScript? Aprenda a implementar o Light Mode e o Dark Mode na sua página da web! - Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usá-las para tornar seus códigos mais simples, flexíveis e otimizados!
Posts mais recentes da Hashtag Treinamentos
- Fórmulas Power BI que você Precisa Aprender! – Guia Completo
Conheça as principais fórmulas Power BI e aprenda a utilizá-las para realizar suas primeiras análises e criar relatórios mais eficientes e intuitivos. - 46 Modelos de Planilhas Prontas para Download GRATUITO!
Temos diversos Modelos de Planilhas em Excel prontas para Download, então é só escolher o tema, baixar e começar a utilizar! - Hugging Face – Como usar IA nos seus Projetos!
Com a alta da inteligência artificial, você não pode ficar para trás, certo? Então eu vou te apresentar o Hugging Face, um pool de IAs para usar nos seus projetos!… Leia mais: Hugging Face – Como usar IA nos seus Projetos!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.