20 Extensões do VS Code para Aumentar sua Produtividade em 2024 + Temas, Ícones e Atalhos

Se você é desenvolvedor, sabe que o editor de código é um dos principais ambientes onde passamos a maior parte do tempo. Por isso, ter o Visual Studio Code (VS Code) configurado de forma otimizada pode melhorar muito a produtividade no dia a dia.

Neste post, vou compartilhar 20 extensões do VS Code que considero indispensáveis para o meu fluxo de trabalho, além de temas, ícones e atalhos que ajudam a tornar o processo de desenvolvimento muito mais eficiente.

Passo 1: Baixe e Instale o VS Code

Se você ainda não tem o VS Code, vá até o site oficial code.visualstudio.com e faça o download da versão mais recente. Após a instalação, o visual padrão pode parecer simples demais. Vamos mudar isso para tornar o ambiente de trabalho mais agradável e funcional.

Conhecendo a Barra de Navegação

A barra de navegação no lado esquerdo é uma das áreas mais importantes do VS Code. Aqui estão os principais recursos:

Explorador de Arquivos: Para navegar pelos arquivos do projeto.
Pesquisa: Para encontrar rapidamente linhas ou trechos de código.
Controle de Versão: Ideal para controlar commits, push e acompanhar mudanças de código.
Depurador (Debugger): Permite definir breakpoints, inspecionar variáveis e encontrar erros de forma eficiente.
Extensões: É onde você instala as extensões que transformarão seu VS Code. Vamos falar sobre elas agora.

Minhas Extensões Favoritas

Auto Close Tag: Fecha automaticamente as tags HTML sem que você precise se preocupar com isso.
Auto Import: Automatiza a importação de módulos TypeScript e JavaScript.
Auto Rename Tag: Renomeia automaticamente a tag de fechamento ao modificar uma tag HTML.
Code Spell Checker: Verifica erros ortográficos em variáveis e nomes de funções.
DotEnv: Facilita a leitura de arquivos de variáveis de ambiente (.env).
Docker: Adiciona uma aba para trabalhar com containers Docker diretamente no VS Code.
ESLint: Identifica e corrige problemas no código enquanto você digita.
Figma: Permite visualizar arquivos do Figma diretamente no editor.
GitHub Copilot: Sugestões inteligentes baseadas em IA que facilitam a escrita de código.
GraphQL: Extensões para facilitar o trabalho com GraphQL.
Import Cost: Mostra o tamanho dos pacotes que você importa.
Indenticator: Ajudar a visualizar a profundidade de indentação no código.
Live Server: Executa um servidor local com atualização automática.
Live Share: Ferramenta para programação em pares em tempo real.
Markdown Preview Enhanced: Visualize arquivos Markdown enquanto os edita.
Notes: Tenha sempre à mão um bloco de notas para anotações rápidas.
Material Theme: Um tema elegante para melhorar a aparência do seu editor.
Material Theme Icons: Ícones que complementam o tema Material.
React Snippets: Adiciona trechos de código prontos para desenvolvimento React.
Prettier: Formata automaticamente seu código para manter a padronização.

Melhorando o Visual: Temas e Ícones

Para transformar o visual do VS Code, recomendo instalar os seguintes temas e ícones:

Material Theme High Contrast
Material Theme Darker High Contrast
Material Theme Palenight High Contrast

Após instalar, use o atalho Cmd + Shift + P (ou Ctrl + Shift + P no Windows) para abrir as configurações de temas e escolher suas preferências. Você também pode ajustar a cor de destaque ativa buscando por "Accent Color" nas configurações.

Atalhos Essenciais

Aprender alguns atalhos do VS Code pode economizar um tempo precioso. Aqui estão os que mais utilizo no meu dia a dia:

Cmd + B: Alterna o explorador de arquivos.
Cmd + P: Pesquisa arquivos pelo nome.
Cmd + Shift + P: Acessa qualquer configuração rapidamente.
Ctrl + `: Abre ou fecha o terminal integrado.
Cmd + D: Seleciona a próxima ocorrência da palavra atual.
Option + Shift + Up/Down: Duplica a linha selecionada.
Cmd + X: Recorta a linha atual.
Cmd + W: Fecha o arquivo ativo.
Cmd + Shift + T: Reabre um arquivo recentemente fechado.

Conclusão

Com essas extensões, temas e atalhos, o Visual Studio Code se torna uma ferramenta muito mais poderosa e adaptada às suas necessidades. Melhorar a aparência, usar recursos inteligentes e dominar atalhos rápidos são passos que podem aumentar consideravelmente sua produtividade como desenvolvedor. Se você tiver uma extensão ou tema favorito que eu não mencionei, compartilhe nos comentários!