VSCode: extensões, Emmet e atalhos
Instale extensões essenciais, use abreviações do Emmet para escrever HTML e CSS instantaneamente e aprenda atalhos de teclado que aceleram a edição.
VSCode: extensões, Emmet e atalhos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar o VSCode?
O Visual Studio Code é o editor de código mais popular para desenvolvimento de front-end. Ele é gratuito, de código aberto, rápido e conta com um enorme ecossistema de extensões. A maioria das equipes de front-end o adota como padrão.
Extensões essenciais
Extensões indispensáveis para desenvolvimento de front-end: ESLint (verificação de código em linha), Prettier (formatação automática), GitLens (anotações do Git em linha), Path Intellisense (preenchimento automático de caminhos de arquivos) e Auto Rename Tag (renomeia tags HTML pareadas).
Extensões específicas por linguagem
Para TypeScript: TypeScript and JavaScript Language Features (integrado). Para React: ES7+ React/Redux snippets. Para Vue: Volar (oficial). Para Tailwind: Tailwind CSS IntelliSense.
O que é Emmet?
O Emmet vem integrado ao VSCode. Digite uma abreviação e pressione Tab para expandi-la em HTML ou CSS completo. Isso acelera drasticamente a escrita de marcação.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Abreviações comuns do Emmet
Aprenda estes atalhos do Emmet: ! → estrutura básica de HTML, div.container → div com classe, ul>li*5 → lista com 5 itens, input:email → campo de entrada de e-mail, form:post → formulário com method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Atalhos de teclado essenciais
Os atalhos que mais economizam tempo: Ctrl/Cmd+P (abertura rápida de arquivos), Ctrl/Cmd+Shift+P (paleta de comandos), Alt+Click (múltiplos cursores), Ctrl/Cmd+D (seleciona a próxima ocorrência), Ctrl/Cmd+/ (alterna o comentário).
Edição com múltiplos cursores
Alt+Click adiciona cursores. Ctrl+Alt+Up/Down adiciona cursores acima ou abaixo. Ctrl+D seleciona a próxima ocorrência da seleção. Com vários cursores, todas as edições acontecem simultaneamente — excelente para renomear variáveis em escopos pequenos.
Terminal integrado
Abra o terminal dentro do VSCode com Ctrl+` (crase). Você pode dividi-lo para executar o servidor de desenvolvimento em um painel e executar testes em outro sem sair do editor.
Configurações do espaço de trabalho
Crie um arquivo .vscode/settings.json no projeto para definir configurações específicas do projeto que substituem as configurações do usuário. Confirme esse arquivo no repositório para que todos os colegas tenham a mesma experiência: formatação ao salvar, tamanho da tabulação e colunas da régua.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense e importações automáticas
O IntelliSense do VSCode oferece preenchimento automático, dicas de parâmetros e documentação ao passar o cursor. Em projetos TypeScript, ele também importa símbolos automaticamente quando você aceita uma sugestão — não é necessário fazer a importação manualmente.
Ir para definição e referências
Clique com Ctrl (ou pressione F12) em qualquer símbolo para ir até sua definição. Shift+F12 mostra todas as referências. Ctrl+Shift+F pesquisa em todos os arquivos. Esses recursos são indispensáveis para navegar por bases de código grandes.
Painel de problemas
O painel de problemas (Ctrl+Shift+M) lista todos os erros e avisos do ESLint e do TypeScript nos arquivos abertos. É a maneira mais rápida de ver o que precisa ser corrigido antes de confirmar as alterações.
Verificação rápida
Em que a abreviação do Emmet ul>li*3 se transforma no VSCode?
Recapitulação: fluxo de trabalho no VSCode
Instale ESLint, Prettier e extensões específicas para cada linguagem. Use o Emmet para escrever HTML/CSS rapidamente. Aprenda os atalhos de teclado (Cmd+P, Cmd+Shift+P, Cmd+D). Defina formatOnSave em .vscode/settings.json. Use a edição com múltiplos cursores para alterações repetitivas. Use Ir para definição para navegar pelo código.
Perguntas Frequentes
A aula “VSCode: extensões, Emmet e atalhos” é grátis?
Sim — o texto completo de “VSCode: extensões, Emmet e atalhos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “VSCode: extensões, Emmet e atalhos”?
Instale extensões essenciais, use abreviações do Emmet para escrever HTML e CSS instantaneamente e aprenda atalhos de teclado que aceleram a edição. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “VSCode: extensões, Emmet e atalhos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Chrome DevTools: Elements, Console e Network
- VSCode: extensões, Emmet e atalhos
- Configuração do Prettier e do ESLint
- Compatibilidade de navegadores e caniuse.com