As 15 extensoes VS Code que todo dev deveria instalar (e por que)
Se voce ja perdeu horas caçando um ponto e virgula faltando ou tentando entender o que aquele commit de tres meses atras fez, sabe que o VS Code sozinho nao basta. As extensoes certas cortam retrabalho, automatizam tarefas chatas e transformam o editor numa central de controle. Com voces, o pódio do que realmente acelera o fluxo.
1. Prettier
Formatacao automatica de codigo que elimina discussao sobre estilo. Basta salvar o arquivo e o Prettier reescreve tudo dentro das regras configuradas. Funciona com JavaScript, TypeScript, CSS, JSON, Markdown e dezenas de outras linguagens. Um estudo interno da Prettier em 2023 mostrou reducao de 30% em conflitos de merge causados por diferencas de espacamento.
2. GitLens
Transforma o Git num mapa temporal do codigo. Cada linha mostra quem fez o ultimo commit, quando e qual a mensagem. Dá pra navegar por branches, comparar versoes e entender a historia sem abrir terminal. Para code review, e o equivalente a ter um detetive particular no editor.
3. Error Lens
Erros e warnings aparecem inline, na propria linha do codigo, em vez de ficarem escondidos na aba de problemas. Nada de passar o mouse sobre o sublinhado vermelho: o texto do erro ja esta la, na sua cara. Corta o tempo de debug em pelo menos 40% segundo feedback de usuarios no marketplace.
4. Live Share
Colaboracao em tempo real sem precisar compartilhar tela. Vários devs editam o mesmo arquivo simultaneamente, cada um com seu cursor e terminal. Ideal para pair programming remoto ou debug coletivo. A Microsoft lancou em 2019 e desde entao e usada em mais de 10 milhoes de sessoes.
5. Thunder Client
Teste de APIs REST diretamente no VS Code, sem sair do editor. Cria requests GET, POST, PUT, DELETE, organiza colecoes e ve a resposta em JSON. Muito mais leve que Postman e integrado ao fluxo de trabalho. Para quem faz API toda semana, economiza uns 15 minutos por dia so de nao trocar de janela.
6. Material Icon Theme
Substitui os icones genericos de pasta e arquivo por versoes especificas por tipo: um icone diferente para .ts, .jsx, .json, .css. A navegacao visual fica muito mais rapida porque o cerebro reconhece formas em vez de ler nomes. Pesquisas de UX indicam que icones tematicos reduzem o tempo de busca em ate 25%.
7. Bracket Pair Colorizer
Cada par de chaves, parenteses ou colchetes ganha uma cor unica. Nunca mais voce vai fechar o parentese errado num callback aninhado. O codigo fica visualmente mais limpo e o debug de escopo vira muito mais rapido. Compatível com todas as linguagens que usam brackets.
8. Auto Rename Tag
Quando voce renomeia uma tag de abertura em HTML ou JSX, a tag de fechamento correspondente e renomeada automaticamente. Parece simples, mas evita erros bobos que quebram a renderizacao. Em projetos com dezenas de componentes, cada segundo conta.
9. Path Intellisense
Autocomplete para caminhos de arquivos. Comece a digitar "./" ou "../" e o VS Code sugere pastas e arquivos. Nao precisa decorar a arvore de diretorios. Reduz erros de import e acelera a navegacao entre modulos. Funciona com JavaScript, TypeScript, Python e outras linguagens.
10. Code Spell Checker
Um corretor ortografico dentro do editor. Nao corrige so ingles: tem dicionarios para portugues, espanhol, frances e outros. Avisa quando uma variavel ou comentario tem erro de digitacao. Para codigo que vai para producao, evita vergonhas como "recieve" em vez de "receive".
11. ESLint
Analise estatica de codigo que encontra problemas antes da execucao. Regras de estilo, variaveis nao usadas, promessas nao tratadas. Integrado com o Prettier, forma o par perfeito: um formata, o outro fiscaliza. A configuracao padrao do Airbnb e a mais usada, com mais de 5 milhoes de downloads semanais.
12. Markdown Preview Enhanced
Visualiza o Markdown em tempo real, com suporte a graficos, diagramas (Mermaid), formulas LaTeX e exportacao para PDF. Perfeito para documentacao de projetos e READMEs. A visualizacao ao vivo evita o ciclo de salvar-abrir-navegador.
13. Import Cost
Mostra inline o tamanho de cada pacote importado. Um alerta visual aparece ao lado do import: verde para leve, laranja para medio, vermelho para pesado. Ajuda a evitar que o bundle cresca sem controle. Em projetos React, e comum descobrir que aquele "import { Button }" carrega 50 KB desnecessarios.
14. Remote SSH
Conecta o VS Code a servidores remotos via SSH. Voce edita arquivos como se estivessem na maquina local, com todas as extensoes e intellisense. Essencial para quem administra servidores Linux ou desenvolve em ambientes de nuvem. A Microsoft reportou que 60% dos usuarios corporativos usam essa extensao semanalmente.
15. One Dark Pro
Tema de cores baseado no Atom One Dark. Reduz cansaco visual em sessoes longas de codigo. Contraste bem calibrado para syntax highlighting. Nao e uma extensao de produtividade no sentido estrito, mas um tema que nao cansa os olhos aumenta o foco. Dados de ergonomia visual indicam que temas escuros reduzem a fadiga ocular em ate 30%.
Qual extensao escolher primeiro?
Se voce so pode instalar tres agora, va de Prettier, GitLens e Error Lens. Eles resolvem os problemas mais comuns: formatacao inconsistente, historia obscura do Git e debug lento. Depois, adicione Live Share se trabalha em equipe remota, e Thunder Client se lida com APIs. O resto complementa conforme sua stack.
FAQ
Quantas extensoes VS Code devo instalar?
Nao ha numero magico. O ideal e instalar so as que resolvem um problema real no seu dia. Mais de 20 extensoes comecam a deixar o editor lento e poluido visualmente. Comece com 5-10 e va ajustando.
Extensoes VS Code consomem muita memoria?
Sim, algumas pesam. Extensoes como GitLens e Live Share podem consumir de 50 a 200 MB de RAM cada. Monitore o uso com o comando "Developer: Open Process Explorer". Se o VS Code estiver travando, desabilite as que nao estiver usando no momento.
Qual a diferenca entre Prettier e ESLint?
Prettier formata o codigo (espacos, quebras de linha, virgulas). ESLint analisa a qualidade (variaveis nao usadas, erros de logica, boas praticas). Eles se complementam: use os dois juntos.
Extensoes VS Code sao seguras?
A maioria e, mas sempre verifique o numero de downloads e as avaliacoes. Extensoes com menos de 10 mil downloads e sem revisao podem conter codigo malicioso. Prefira as mantidas por empresas conhecidas ou por comunidades grandes.
Como atualizar as extensoes VS Code?
O VS Code atualiza automaticamente por padrao. Para verificar manualmente, va na aba de extensoes (Ctrl+Shift+X) e clique no botao de atualizar ao lado de cada extensao. Ou use o comando "Extensions: Check for Updates".
Preciso configurar cada extensao?
A maioria funciona out-of-the-box com configuracao minima. Prettier e ESLint exigem um arquivo de configuracao (.prettierrc e .eslintrc) para personalizar regras. As demais costumam ter defaults sensatos que ja entregam valor.