VS Code para iniciantes: interface, atalhos e extensões
Entenda o VS Code, sua interface, terminal integrado, atalhos e extensões úteis para aprender frontend.
- #VS Code
- #Extensões
- #Atalhos
- #Frontend
VS Code é o editor que vamos usar para escrever código. Ele é leve, popular e possui muitas extensões úteis para desenvolvimento frontend.
Explorador, editor e terminal integrado
O Explorador mostra pastas e arquivos, a área central é onde você escreve código e o terminal integrado normalmente abre dentro da pasta do projeto.
No VS Code, o Explorer é a coluna onde aparecem pastas e arquivos. O editor é a área central onde você escreve código. O terminal integrado abre pelo menu Terminal > New Terminal e executa comandos dentro da pasta aberta.
Extensões úteis
Extensões recomendadas para iniciantes: Live Server, Prettier, ESLint, Auto Rename Tag, Material Icon Theme, Path Intellisense e Tailwind CSS IntelliSense.
Para instalar uma extensão, clique no ícone de Extensions na barra lateral, pesquise pelo nome, abra o resultado e clique em Install. Instale apenas as extensões que forem usadas no curso ou que ajudem diretamente no seu fluxo.
Atalhos úteis
Alguns atalhos importantes: Ctrl + S para salvar, Ctrl + P para procurar arquivos, Ctrl + Shift + P para abrir a paleta de comandos, Alt + Shift + F para formatar e Ctrl + ` para abrir ou fechar o terminal integrado.
Use atalhos aos poucos. O mais importante no início é saber salvar o arquivo, abrir o terminal integrado, localizar arquivos pelo Explorer e usar a busca quando não encontrar algo.
Organização do projeto
Um projeto simples pode começar com index.html, style.css e script.js. Depois, quando crescer, pode ter pastas como assets, css e js.
Antes de criar arquivos, confirme que a pasta correta está aberta no VS Code. Se você abrir a pasta errada, os arquivos podem ser criados fora do projeto e os comandos do terminal podem falhar.
