[Ambiente de Desenvolvimento HTML/CSS/JS] Configurando o VSCode para Desenvolvimento Web

PASSO 1: Prepare o VSCode! [Instalação e Configurações de Idioma]

Primeiro, vamos instalar o VSCode, seu parceiro no desenvolvimento web, em seu computador. É como pegar uma "faca" para cozinhar. É muito fácil, então vamos fazer isso rapidamente.

1. Baixe e Instale o VSCode

Primeiro, baixe o instalador do site oficial do VSCode.

Site Oficial do Visual Studio Code

Ao visitar o site, você verá um grande botão de download para o seu SO (Windows, Mac, etc.). Clique nele para baixar e siga as instruções na tela para instalar. Não há configurações particularmente difíceis, então você pode geralmente apenas clicar em "Avançar" ou "Concordo" para prosseguir.

2. Alterando o Idioma [Extensão de Pacote de Idioma]

Logo após a instalação, os menus do VSCode e outros elementos estarão em inglês. Se você se sente confortável com o inglês, pode deixar como está, mas muitas vezes é mais reconfortante usar seu idioma nativo. Eu tentei manter o inglês no início, mas desisti bem rápido (risos).

Para este artigo, usaremos o Pacote de Idioma Japonês como exemplo. Vamos usar uma "extensão", um item que potencializa o VSCode, para alterar a exibição para japonês.

1. Clique no ícone quadrado no lado esquerdo do VSCode (a Barra de Atividades).
2. Na caixa de pesquisa que aparece, digite "Japanese Language Pack".
3. Clique no botão "Instalar" para "Japanese Language Pack for Visual Studio Code" que aparece no topo.
4. Após a instalação, se uma mensagem solicitar que você reinicie no canto inferior direito, clique em "Reiniciar".

Quando o VSCode reiniciar, os menus devem estar em japonês. Com isso, a configuração inicial está concluída!

PASSO 2: Lance um Feitiço Mágico! [Extensões Essenciais e Selecionadas]

Agora que o VSCode está pronto, vou apresentar três "feitiços mágicos" escolhidos a dedo, ou seja, extensões que irão otimizar drasticamente o seu desenvolvimento web. Existem muitas extensões por aí, mas como iniciante, instalar muitas pode ser confuso. Por enquanto, estas três, que eu genuinamente sinto que não consigo mais desenvolver sem, são mais do que suficientes.

🥇 1º Lugar: Live Server - A Mágica que Reflete Instantaneamente o seu Código

Você absolutamente tem que instalar isso. "Live Server" é a primeira coisa que vai te ensinar a alegria do desenvolvimento web.

Normalmente, após modificar um arquivo HTML ou CSS, você precisa voltar ao navegador e pressionar o botão de recarregar (como F5) para ver as alterações. No entanto, com o Live Server, no momento em que você salva seu código, a exibição do navegador é atualizada automaticamente.

Essa experiência de "escrever e ver a mudança imediatamente" é verdadeiramente incrível. Apenas eliminar o incômodo de recarregar a cada vez aumentará sua eficiência de trabalho em dez vezes.

O método de instalação é o mesmo do pacote de idiomas. Procure por "Live Server" no ícone de extensões à esquerda e instale-o.

🥈 2º Lugar: Prettier - O Mordomo que Arruma Automaticamente o seu Código

Quando você começa a escrever código, sua indentação pode ficar bagunçada e o uso de espaços pode se tornar inconsistente. "Prettier" é o que formata instantaneamente esse código bagunçado em um código bonito toda vez que você salva.

"Quem se importa com a aparência?", você pode pensar, mas a aparência do seu código é extremamente importante. Um código arrumado é mais fácil de ler e torna mais fácil encontrar erros. Com o Prettier, você não perderá tempo se preocupando com a aparência do seu código.

Procure por "Prettier - Code formatter" e instale-o.

[Importante] Configuração para Habilitar o Prettier

O Prettier não funcionará apenas instalando-o. Vamos adicionar uma configuração simples para que ele formate automaticamente ao salvar.

1. Clique no ícone de engrenagem no canto inferior esquerdo и selecione "Configurações". (ou pressione Ctrl + ,)
2. Clique no ícone do arquivo no canto superior direito (Abrir Configurações (JSON)).
3. No arquivo settings.json que se abre, adicione as duas linhas a seguir. (Se já houver algo escrito, adicione-as dentro de {}, separadas por uma vírgula).

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
            

PASSO 3: Vamos Fazer sua Primeira Página Web! [Copiar e Colar OK]

Obrigado pela sua paciência! Finalmente chegou a hora de criar uma página web. Usaremos três linguagens aqui: HTML, CSS e JavaScript, mas você não precisa entender completamente o que cada uma significa agora. O objetivo é ter uma noção de "se eu escrever isso, isso acontece". Por favor, siga os passos abaixo.

1. Crie uma Pasta de Trabalho e Três Arquivos

Primeiro, crie uma nova pasta para este projeto em algum lugar que você goste no seu computador (como a área de trabalho). Um nome como "meu-primeiro-site" é fácil de entender.

Em seguida, abra o VSCode, selecione "Abrir Pasta..." no menu "Arquivo" e abra a pasta que você acabou de criar.

Com a pasta aberta, crie três novos arquivos no explorador do VSCode à esquerda:

1. index.html (O arquivo para a estrutura da página web)
2. style.css (O arquivo para estilizar a aparência da página web)
3. script.js (O arquivo para adicionar interatividade à página web)

2. Escreva o HTML (index.html)

Abra o arquivo index.html e copie e cole o código a seguir como está.

Dica para economizar tempo: Na verdade, se você digitar apenas ! (um ponto de exclamação de um byte) em index.html e pressionar a tecla Tab, um modelo básico será gerado em um instante. Este é um recurso padrão do VSCode chamado "Emmet", e é muito útil lembrar.

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Olá, Bem-vindo ao Mundo do VSCode!</h1>
    <p id="message">Uma mensagem será exibida aqui.</p>
    <button id="changeTextBtn">Clique em mim!</button>

    <script src="script.js"></script>
</body>
</html>

Resumidamente, <h1> é um cabeçalho principal, <p> é um parágrafo e <button> é um botão. Então, <link rel="stylesheet" href="style.css"> carrega o arquivo CSS, e <script src="script.js"></script> carrega o arquivo JavaScript.

Ponto de dificuldade: Se você errar os nomes dos arquivos aqui, como em href="style.css" ou src="script.js", o CSS ou JS não carregarão corretamente, o que pode fazer com que o layout quebre ou a interatividade falhe. Eu já fiz isso muitas vezes... Certifique-se de verificar se os nomes dos arquivos estão corretos.

3. Escreva o CSS (style.css)

Em seguida, abra o arquivo style.css e copie e cole o código abaixo. Este código serve para estilizar a aparência do HTML que acabamos de criar.

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Aqui, estamos centralizando o texto em toda a página, ajustando os tamanhos da fonte e alterando levemente o design do botão.

4. Escreva o JavaScript (script.js)

Finalmente, abra o arquivo script.js e copie e cole o código a seguir. Este é o código mágico que dá "interatividade" à nossa página web.

// Obter os elementos HTML
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// Processar quando o botão for clicado
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = 'Uau! O JavaScript está funcionando!';
});

Aqui, estamos escrevendo um comando que diz: "Quando o botão com o ID changeTextBtn for clicado, altere o texto dentro da tag p com o ID message."

PASSO 4: O Momento da Verdade! Experimente uma Página "Funcional" com o Live Server

Tudo bem, tudo está pronto! Finalmente é hora de visualizar a página da web que acabamos de criar em um navegador.

Com o arquivo index.html aberto no VSCode, clique no botão "Go Live" no canto inferior direito.

Um navegador deve iniciar automaticamente e exibir a página que você criou!

Agora, tente clicar no botão "Clique em mim!" na página. Se a mensagem mudar para "Uau! O JavaScript está funcionando!", você conseguiu!

Além disso, volte ao VSCode e altere o texto do <h1> em index.html para algo como "Bem-vindo ao mundo do desenvolvimento web!" e salve (Ctrl + S). Ao voltar para o navegador, você verá que a exibição mudou instantaneamente sem que você precise recarregar. Este é o poder do Live Server. Não é incrível?

Ponto de dificuldade: A página não é exibida quando você pressiona "Go Live", o CSS não está funcionando, nada acontece quando você pressiona o botão... como iniciante, você definitivamente encontrará algum tipo de erro. Quando isso acontecer, verifique primeiro os seguintes pontos:

• O caminho no link para os arquivos CSS/JS no arquivo HTML (href ou src) está correto?
• O nome do arquivo está correto? (por exemplo, styles.css em vez de style.css)
• Você copiou e colou o código corretamente?

Se você ainda não conseguir resolver, recomendo perguntar a uma IA sobre o erro. Se você fizer uma pergunta colando a situação e seu código, como "Meu CSS não está sendo aplicado no Live Server do VSCode. Aqui está meu código", ele lhe dará respostas surpreendentemente precisas. A razão pela qual consegui construir meu site é porque eu tinha este "professor de IA".

Conclusão: Sua Carreira de Desenvolvimento Web Começa Aqui

Ótimo trabalho! Você conseguiu seguir os passos deste artigo e fazer sua própria página da web funcionar?

O que fizemos desta vez foi:

1. Preparamos a ferramenta de desenvolvimento web multifuncional "VSCode"
2. Potencializamos nosso ambiente de desenvolvimento com extensões como o Live Server
3. Escrevemos HTML, CSS e JavaScript para criar uma página web real e funcional

Este é o primeiro passo absoluto, básico e mais importante para qualquer desenvolvedor web. Por favor, não se esqueça deste sentimento de "meu próprio código funcionando de forma visível". Esse sentimento será uma grande motivação para o seu aprendizado futuro.

A pequena página que você fez hoje pode se transformar em um site como os que eu fiz, aprendendo mais HTML e CSS e adicionando vários recursos com JavaScript. Sua carreira de desenvolvimento web realmente começou aqui e agora.

Vamos continuar aprendendo juntos!