Se você programa diariamente, sabe que ter um editor bem configurado faz toda a diferença entre um dia produtivo e um festival de frustrações. O Visual Studio Code tornou-se o editor de referência. Graças ao seu desempenho, ao seu sistema de extensões e a uma enorme comunidade que continua a criar novas ferramentas.
A verdadeira magia do VS Code reside não apenas no editor base, mas em seu ecossistema. Centenas de extensões adicionam recursos avançados de autocompletar, analisadores de código, temas, servidores locais, depuração, ícones, integração com Git, inteligência artificial e muito mais.Neste guia, você encontrará uma coleção bastante completa de extensões recomendadas: desde as essenciais para qualquer linguagem, até aquelas específicas para JavaScript, Python, PHP, HTML/CSS, TypeScript e para o trabalho diário com Git, Docker ou Markdown.
O que é o VS Code e por que suas extensões são tão importantes?
O Visual Studio Code é um editor de código gratuito e multiplataforma Criado pela Microsoft, disponível para Windows, macOS e Linux, e está entre os melhores ambientes de desenvolvimento.
Ele já inclui recursos muito poderosos prontos para uso: Realce de sintaxe, IntelliSense, depuração integrada, terminal, integração com Git e suporte básico para várias linguagens.Mas o potencial realmente cresce quando você começa a instalar extensões para adaptar o ambiente à sua forma de trabalhar.
A arquitetura do VS Code foi projetada para ser altamente extensível: Praticamente todos os aspectos do editor podem ser melhorados ou substituídos., desde o sistema de depuração até temas, ícones ou preenchimento automático para um idioma específico.
Além disso, não existe apenas um VS Code: Você pode usar a versão oficial ou alternativas de código aberto como o VSCodium.que removem a telemetria e certas partes proprietárias, mas mantêm a compatibilidade com a maioria das extensões.
Como instalar e gerenciar extensões no VS Code
Instalar extensões no VS Code é muito fácil. Tudo é feito dentro da própria interface do editor.sem precisar baixar arquivos manualmente.
Para adicionar novas funcionalidades, abra o editor e acesse o painel de extensões (ícone quadrado na barra lateral ou atalho). Ctrl+Shift+X / Cmd+Shift+X no macOS). A partir daí, pesquise por nome ou palavra-chave. a extensão que lhe interessa.
Ao encontrar uma extensão interessante, consulte a ficha informativa: Número de downloads, avaliações, compatibilidade e capturas de tela.Isso lhe dará uma boa indicação se vale a pena instalar ou não.
Para concluir o processo, basta clicar no botão Instalar. A maioria das extensões ativa instantaneamente.Algumas exigem a recarga da janela do editor, e algumas precisam de configuração adicional (por exemplo, aquelas que dependem de ferramentas externas como ESLint, PHP Debug com Xdebug, etc.).
Extensões gerais essenciais para qualquer projeto
Existe um conjunto de extensões que praticamente todos deveriam ter instaladas, independentemente da linguagem ou da pilha de tecnologias que utilizam. Eles se concentram em produtividade, formatação, colaboração, controle de versão e experiência do usuário..
Mais bonito
Mais bonito é o formatador de código padrão de fato No mundo do JavaScript e de muitas outras linguagens, ele reescreve automaticamente seu código seguindo regras de estilo bem definidas.
É capaz de formatar JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular e muito mais. A ideia é que as discussões sobre o uso de aspas simples ou duplas, ponto e vírgula ou não, onde usar chaves, etc., desapareçam porque Todo o projeto segue a mesma convenção..
Você pode usar as configurações padrão ou criar suas próprias regras usando tipos de arquivo. .prettierrcO procedimento padrão é ativar o formatação ao salvarpara que, sempre que você pressionar Ctrl+S, o código fique limpo e consistente.
ESLint
Embora o Prettier se concentre no aspecto do código, O ESLint prioriza a qualidade e as boas práticas.É o linter mais utilizado em projetos modernos de JavaScript e TypeScript.
A extensão ESLint para VS Code faz com que a análise seja executada em segundo plano enquanto você digita. Exibe erros e avisos diretamente no código.Destacando as linhas problemáticas e oferecendo sugestões rápidas para corrigi-las.
Você pode usar configurações amplamente utilizadas, como: Recomendações do Airbnb, Standard ou oficiais do ESLintOu defina suas próprias regras para adaptá-las ao projeto. Também é compatível com plugins para frameworks como React, Vue ou Node.js.
Melhores comentários
Em projetos de grande porte, os comentários acabam se tornando uma bagunça confusa e difícil de acompanhar. O Better Comments permite categorizar visualmente os comentários. Utilizando cores de acordo com o prefixo que você usar.
Por exemplo, você pode ter comentários do tipo TODOS, AVISO, IMPORTANTE, PERGUNTAetc., cada um com seu próprio estilo. Isso facilita muito a localização de tarefas pendentes, notas importantes ou explicações essenciais ao revisar o código.
Corretor ortográfico de código
Embora possa parecer um detalhe menor, Erros ortográficos em nomes de variáveis, comentários ou textos da interface ficam muito feios.O Code Spell Checker funciona como um corretor ortográfico para código.
Analisa identificadores, strings e comentários e Marque as palavras suspeitas.Oferece sugestões para corrigi-los. Pode ser usado com várias linguagens e é muito útil se você estiver escrevendo documentação ou texto visível ao usuário dentro do código.
Lente de erro
O VS Code já exibe erros e avisos, mas às vezes eles passam despercebidos. A Lente de Erro torna-os impossíveis de ignorar. Exibindo as informações de diagnóstico diretamente ao lado da linha afetada e na margem do editor.
Num relance, você verá onde os erros estão concentrados em um arquivoSem precisar abrir o painel de problemas. Em projetos grandes com muitos linters e ferramentas de análise, isso é uma grande ajuda para garantir que nada passe despercebido.
Executor de código
Se você gosta de tentar pequenos fragmentos de código sem precisar montar um projeto inteiroO Code Runner é muito prático. Ele permite executar código de várias linguagens (JavaScript, Python, C, C++, Java, PHP e mais) diretamente do editor.
Você pode executar o arquivo atual ou apenas o bloco selecionado. Visualize a saída em um painel integrado. ou no próprio terminal do VS Code, e personalize os comandos usados para cada linguagem.
Intellisense de caminho
Ao trabalhar com muitos recursos, importações e caminhos relativos, escrevê-los à mão é garantia de erro. O recurso IntelliSense completa automaticamente os caminhos de arquivos e pastas. ao escrever strings com caminhos.
ele funciona em Importações de JavaScript/TypeScript, referências CSS, caminhos de imagens HTML E, de modo geral, em qualquer contexto em que o VS Code detecte que você está digitando uma rota, isso economiza tempo e evita erros de digitação irritantes.
vscode-icons, Material Icon Theme e outros pacotes de ícones
Os ícones não são apenas uma questão de estética. Um bom tema de ícones permite identificar instantaneamente o tipo de arquivo. apenas olhando para o navegador.
vscode-icons, Material Icon Theme, VSCode Great Icons ou temas específicos como Ícones mais simples no VSCode com Angular Eles fornecem ícones personalizados para linguagens, frameworks e arquivos de configuração (Angular, Docker, env, etc.).
Escolher um ou outro é uma questão de gosto, mas Qualquer uma delas melhora significativamente a legibilidade da árvore de arquivos.especialmente em projetos de unidade única ou de grande porte.
GitLensGenericName
GitLens provavelmente é A extensão mais poderosa para trabalhar com Git no VS Code.Eleva o controle de versões a outro nível, integrando totalmente o histórico ao editor.
Permite que você veja Quem alterou cada linha e quando (culpa), o histórico de um arquivo, comparar revisões, explorar ramificações e tags.e muito mais. Também exibe anotações contextuais no código com informações sobre o último commit.
Se você trabalha em equipe, é maravilhoso entender... Analisar as razões para determinadas alterações, revisar regressões e realizar revisão de código. sem sair do editor.
Live Share
Para programação em pares ou mentoria remota, O Live Share é uma das melhores coisas que existem.Permite compartilhar sua sessão do VS Code com outra pessoa em tempo real.
Vocês dois podem editar o mesmo arquivo, depurar em conjunto, compartilhar terminais e servidores locais e até mesmo abrir um chat integrado. É perfeito para solucionar problemas complexos ou ensinar alguém a trabalhar em um projeto específico.
Extensões específicas para JavaScript e TypeScript
O ecossistema JavaScript e TypeScript é um dos mais favorecidos pelo VS Code. Se você trabalha com desenvolvimento frontend, backend com Node ou desenvolvimento full stack, essas extensões economizarão muitas horas do seu dia a dia..
Trechos de código JavaScript (ES6)
Escrever as mesmas estruturas repetidamente é um saco. O JavaScript (ES6) code snippets adiciona inúmeros trechos de código para sintaxe moderna. De JS e TS.
Com abreviações curtas, você pode gerar funções de seta, classes, importações, console.log, estruturas de repetição e muito mais. É ideal para memorizar menos e digitar mais rápido.
Intellisense do npm e extensão do npm
Quando se trabalha com muitos pacotes, lembrar os nomes exatos não é a coisa mais divertida do mundo. O IntelliSense do npm completa automaticamente os nomes dos módulos instalados. em suas importações e requisitos.
Entretanto, a extensão oficial do npm para o VS Code se integra ao seu sistema. package.json para listar e executar scripts Com um único clique, visualize as dependências e gerencie tarefas rotineiras sem precisar abrir o terminal.
Custo de Importação
O tamanho do pacote no frontend importa, e muito. O Custo de Importação calcula o tamanho aproximado de cada importação. e a exibe ao lado da linha correspondente.
Dessa forma, você sabe instantaneamente se está importando uma biblioteca enorme para algo trivial e pode avaliar alterações como... Use importações parciais, carregamento lento ou alternativas mais leves..
Quokka.js
Quokka.js funciona como um Bloco de notas interativo para JavaScript e TypeScript Dentro do VS Code. Ele executa o código à medida que você o escreve e exibe os resultados e os valores das variáveis em anotações embutidas.
É perfeito para Teste ideias rápidas, entenda novas APIs ou depure funções pequenas. Sem precisar construir um projeto inteiro do zero. Possui uma versão gratuita com recursos muito úteis e uma edição paga com extras.
Snippets de React/Redux/GraphQL/React-Native em ES7 e Snippets Simples de React
Se você trabalha com o ecossistema React, essas duas extensões são ouro puro. O pacote ES7 React/Redux/GraphQL/React-Native snippets oferece trechos de código para componentes, hooks, Redux, GraphQL e React Native.Abrangendo quase todos os padrões comuns.
O Simple React Snippets, por outro lado, concentra-se em um conjunto menor de trechos de código para React moderno (componentes funcionais, importações básicas, etc.), ideal se você deseja algo menos complexo, mas igualmente produtivo.
JavaScript e TypeScript Nightly
Se você gosta de se manter atualizado em relação à linguagem, JavaScript and TypeScript Nightly dá acesso à versão noturna do servidor de linguagem TypeScript. que usa o VS Code.
Isso significa novos recursos, melhorias de desempenho e correções de bugs antes de chegarem à versão estável — ideal para Testar novos recursos de linguagem e detectar mudanças futuras. Isso pode afetar seu código.
Extensões do Python
O VS Code, com as extensões certas, torna-se um IDE Python de primeira linhaSe você trabalha com desenvolvimento backend, ciência de dados ou automação usando essa linguagem, esses conhecimentos são praticamente obrigatórios.
Python (extensão oficial)
A extensão oficial da Microsoft para Python é a base para trabalhar com essa linguagem no VS CodeSem isso, o suporte é muito limitado.
Contribuir IntelliSense, depuração, testes, integração com ambientes virtuais, formatação de código (Black, autopep8), linting com Pylint ou Flake8 e muitas outras funções essenciais.
Pilão
Pylance é o Servidor de linguagem avançado para Python que aprimora ainda mais a extensão oficial. Ela oferece análise estática rápida, preenchimento automático melhorado e verificação de tipos muito detalhada.
Se você usa anotações de tipo ou deseja detectar erros antes de executar o código, Pylance melhora significativamente a experiência de desenvolvimento. Em projetos de médio e grande porte.
jupyter
A extensão Jupyter integra notebooks .ipynb diretamente no VS CodeVocê pode criar, abrir e executar células da mesma forma que no Jupyter clássico, mas a partir do editor.
É especialmente útil para Análise de dados, aprendizado de máquina, visualização e prototipagem rápida., combinando o melhor dos cadernos com as vantagens de um editor completo.
Gerador de Docstrings em Python
A documentação interna em Python geralmente é feita por meio de docstrings. O Gerador de Docstrings em Python cria automaticamente a estrutura básica da docstring. Para funções, classes e métodos.
Ao digitar as aspas de abertura, a extensão gera Campos para descrição, parâmetros e valor de retorno. Baseado na assinatura da função, o que incentiva um código bem documentado sem ser uma tarefa árdua.
PHP e extensões de backend
O PHP continua sendo um pilar no backend da web, e o VS Code tem um ecossistema de extensões muito maduro para este idioma.
PHP IntelliSense e Intelephense
O PHP IntelliSense foi uma das primeiras extensões de autocompletar para PHP. Ele oferece Sugestões para funções, classes, métodos, namespaces e variáveis., além da navegação básica para definições.
O PHP Intelephense vai um passo além: Análise muito rápida e profunda, refatoração, pesquisa de referências, suporte atualizado para PHP 7 e 8. e muito mais. Mesmo a versão gratuita já supera a maioria das alternativas.
Bloqueador de Documentos PHP
Para manter uma documentação adequada em projetos de grande porte, O PHP DocBlocker gera comentários DocBlock Completo para funções, métodos, classes e propriedades.
Por escrito / ** Em uma função, ele preenche automaticamente os parâmetros e o tipo de retorno, o que incentiva Documente adequadamente as APIs internas e públicas..
Compor
O Composer é o padrão para gerenciamento de dependências em PHP. A extensão correspondente se integra ao VS Code para Executar comandos comuns (instalar, atualizar, exigir) da paleta, além de oferecer preenchimento automático e realce em composer.json.
Isso torna tudo muito mais confortável. Gerenciar bibliotecas, frameworks e scripts Sem precisar ficar alternando constantemente entre o editor e o terminal.
Depuração de PHP
Depurar PHP com var_dump tem seu charme até certo ponto. O PHP Debug adiciona um depurador completo baseado no Xdebug. dentro do VS Code.
Com ele você pode Defina pontos de interrupção, inspecione variáveis, execute o código passo a passo. e analisar a pilha de chamadas. A configuração inicial requer algum cuidado, mas, uma vez configurada, é uma ferramenta essencial.
Extensões para HTML, CSS e desenvolvimento front-end
Se você trabalha com o lado visual da web, existem diversas extensões que... Eles transformam o VS Code em um ambiente extremamente confortável para layout e estilização..
Servidor ao vivo
O Live Server monta um Servidor de desenvolvimento local com recarga automáticaClicar em "Publicar" abrirá seu site no navegador e atualizará a página sempre que você salvar um arquivo.
É ideal para HTML puro, prototipagem rápida, layout estático e projetos front-end simples.Onde ver as mudanças instantaneamente faz toda a diferença.
Suporte a HTML e CSS
Esta extensão melhora a integração entre HTML e CSS. Oferece preenchimento automático inteligente de classes e IDs definidos em suas folhas de estilo. Ao escrever HTML, e vice-versa.
Também sugere propriedades CSS (incluindo prefixos de fornecedores) e funciona maravilhosamente bem em conjunto com o Emmet, o que acelera bastante o fluxo de trabalho de layout.
IntelliSense para nomes de classes CSS e Tailwind CSS IntelliSense
O IntelliSense para nomes de classes CSS analisa seus arquivos CSS, SCSS ou Less para Oferecer preenchimento automático de nomes de classes em HTMLIsso é especialmente útil quando existem utilitários ou classes com nomes longos.
Se você usa o Tailwind, o Tailwind CSS IntelliSense vai um passo além, fornecendo Autocompletar, linting e documentação embutida específicos para utilitários do Tailwind.Algo quase obrigatório para trabalhar confortavelmente com essa estrutura.
CSS Peek e CSS Lint
O CSS Peek permite que você Visualize e acesse rapidamente a definição CSS de uma classe ou ID. a partir do HTML, seja em uma janela pop-up ou abrindo o arquivo correspondente.
O CSS Lint funciona como um verificador de sintaxe para folhas de estilo. erros de marcação ou padrões problemáticos (propriedades duplicadas, regras ineficientes, etc.), ajudando a manter um CSS mais limpo e fácil de manter.
Renomear tag automaticamente e destacar tag correspondente.
A função "Renomear Tag Automaticamente" cuida de algo tão simples quanto útil: Ao alterar a tag de abertura de um elemento HTML ou XML, a tag de fechamento também é atualizada. automaticamente para que não fiquem dessincronizados.
Destaques da tag correspondente o par de abertura/fechamento da tag onde o cursor está localizadoIsso é muito prático em documentos extensos ou com estruturas altamente aninhadas.
Pré-visualização de imagem, otimizador de imagem e realce de cores
A pré-visualização da imagem mostra uma miniatura da imagem referenciada em uma rota Ao posicionar o cursor sobre o arquivo ou na margem, é possível verificar se os caminhos estão corretos sem precisar abri-lo separadamente.
Otimizador de Imagem permite Comprimir imagens (com ou sem perda de qualidade) diretamente do editor., deixando seus ativos prontos para produção sem a necessidade de ferramentas externas.
O destaque de cor realça o Códigos de cores (hexadecimal, RGB, HSL, etc.) com suas respectivas cores como fundo ou sublinhado., tornando muito mais fácil trabalhar com paletas complexas.
Extensões adicionais de produtividade, design e personalização.
Além das ferramentas de desenvolvimento propriamente ditas, existem diversas extensões projetadas para Para tornar seu dia a dia mais confortável e seu editor mais agradável aos olhos..
Temas para VS Code
Os temas afetam diretamente o seu conforto visual. Alguns dos mais populares e recomendados são: Tons de Roxo, Tema Material, Coruja Noturna, Horizonte, Noctis ou Monokai Flatland.
Cada uma tem sua própria personalidade: esquemas de cores claros e escuros, paletas projetadas para reduzir o cansaço visual, variações de claro e escuro, ou até mesmo temas completamente monocromáticos Para quem não quer nenhuma distração.
Peacock
Ao abrir vários projetos ao mesmo tempo, é fácil ficar confuso. O Peacock permite que você altere a cor de destaque da janela do VS Code para cada projeto.para que, à primeira vista, você possa saber se está editando o backend, o frontend ou um microsserviço específico.
É uma extensão simples, mas incrivelmente útil, se Normalmente, você tem vários espaços de trabalho abertos simultaneamente..
Recuo-arco-íris e colchetes arco-íris
cores do arco-íris com recuo colunas de recuo Com diferentes tonalidades, facilitando a visualização da estrutura do código.
O Rainbow Brackets faz algo semelhante com parênteses, colchetes e chavesAtribuir uma cor diferente a cada nível de aninhamento facilita bastante a localização de um parêntese ausente ou de um bloco mal recuado.
Árvore Todo
Se você usar comentários como TODO, FIXME ou BUG, O Todo Tree analisa seu espaço de trabalho e cria um painel com todas essas anotações. organizado em forma de árvore.
De lá você pode Navegue diretamente para cada ponto no código. Onde houver tarefas pendentes ou problemas marcados, transformando os TODOs em uma espécie de mini gerenciador de tarefas vinculado ao repositório.
GitHub Copilot, Tabnine e ChatGPT/AI
As ferramentas de autocompletar baseadas em IA entraram com força no mercado. O GitHub Copilot e o Tabnine sugerem linhas ou blocos inteiros de código. Com base no contexto, em testes anteriores ou em comentários.
Extensões que integram o ChatGPT ou modelos similares no VS Code permitem Solicite explicações de código, refatore funções ou gere testes. sem sair do editor. Elas exigem chaves de API, mas, como copiloto de desenvolvimento, são muito poderosas se usadas com critério.
Markdown Tudo em Um e Pré-visualização de Markdown Aprimorada
Se você documenta projetos ou escreve posts técnicos, O Markdown All in One adiciona atalhos, pré-visualização aprimorada, geração de índice e outras conveniências. Para trabalhar com Markdown.
Combinado com extensões de pré-visualização no estilo GitHub, você obtém uma experiência de escrita muito semelhante à forma como seus arquivos README ou artigos serão posteriormente apresentados. na web.
Docker, SSH remoto e WSL remoto
Em ambientes profissionais, é muito comum trabalhar com contêineres ou máquinas remotas. A extensão oficial do Docker permite gerenciar imagens, contêineres, redes e volumes. A partir da barra lateral, além de facilitar a depuração dentro dos contêineres.
O SSH remoto e o WSL remoto permitem que você Abra pastas remotas ou ambientes Linux (WSL) como se fossem projetos locais.Executando comandos e depurando diretamente ali, mas com a praticidade da interface do VS Code.
Com todas essas extensões bem escolhidas e configuradas, o Visual Studio Code deixa de ser um editor simples e leve para se tornar... Um ambiente de desenvolvimento personalizado, adaptado à sua pilha de tecnologias, à sua forma de trabalhar e aos seus projetos.Encontrar o equilíbrio entre não sobrecarregar e ter apenas as ferramentas necessárias é a chave para ganhar velocidade, conforto e qualidade na sua programação diária.
