- Published on
Aumente sua produtividade: 25 incríveis extensões para o Visual Studio Code
- Authors
- Name
- Vinícius Delmo
O que são as extensões no VS Code?
As extensões no Visual Studio Code (VS Code) são módulos adicionais que podem ser instalados para adicionar funcionalidades e recursos extras ao editor de código. Essas extensões são desenvolvidas pela comunidade de desenvolvedores e pela Microsoft, e permitem personalizar e aprimorar a experiência de desenvolvimento no VS Code.
Por que usar as extensões?
Há várias razões pelas quais usar extensões no Visual Studio Code (VS Code) pode ser benéfico para os desenvolvedores. Aqui estão alguns motivos para considerar o uso de extensões:
- Aumento da produtividade
- Suporte a linguagens e frameworks
- Personalização
- Integração com serviços e ferramentas externas
TOP 25 Extensões para VS Code
⇒ Inteligência Artificial no Código
Atualmente estamos vivenciando uma revolução na inteligência artificial com ferramentas como o Ghat GPT e a IA também pode ser utilizada em extensões no VS Code podendo oferecer várias formas de auxílio no desenvolvimento de código, proporcionando melhorias na produtividade, na qualidade do código e na detecção de erros. A seguir duas extensões baseadas em IA que podem melhorar e muito sua produtividade:
1 - IntelliCode
A extensão "Visual Studio IntelliCode" da Microsoft é uma poderosa ferramenta de assistência ao desenvolvimento que utiliza técnicas de inteligência artificial para oferecer sugestões inteligentes e contextuais durante a escrita de código no Visual Studio Code.
A extensão IntelliCode analisa milhares de projetos de código-fonte de código aberto para aprender padrões comuns de codificação, identificar melhores práticas e capturar insights sobre como determinadas linhas de código são normalmente escritas. Com base nesse conhecimento, a extensão IntelliCode gera sugestões personalizadas ao desenvolvedor enquanto ele digita.
2 - Github Copilot
A extensão "GitHub Copilot" é uma ferramenta de desenvolvimento desenvolvida pela GitHub em parceria com a OpenAI, baseada em inteligência artificial. Ela fornece sugestões de código em tempo real enquanto você está escrevendo no Visual Studio Code.
O GitHub Copilot utiliza o modelo de linguagem GPT (Generative Pre-trained Transformer) da OpenAI para analisar o contexto do código que você está escrevendo e gerar sugestões relevantes. Ele é treinado em uma ampla gama de código-fonte público disponível no GitHub, permitindo que a extensão ofereça sugestões precisas e úteis.
⇒ Formatação descomplicada
Algo que todos concordam é que ficar formatando código manualmente é muito chato e demorado, conferir indentação, ver se tem ";", remover linhas vazias... Seria ótimo ter ferramentas para auxiliar nesse processo e têm. Confere ai:
3 - Prettier
A extensão "Prettier" no Visual Studio Code é uma ferramenta de formatação de código que ajuda a manter um estilo de código consistente e bem formatado em seus projetos. Ela é amplamente usada e suporta várias linguagens de programação.
Quando você instala e ativa a extensão "Prettier" no VS Code, ela formata automaticamente o código conforme você escreve ou ao salvar o arquivo. Isso significa que você não precisa se preocupar em aplicar manualmente regras de formatação, como indentação, espaçamento, quebras de linha, alinhamento e outros aspectos estilísticos do código. O Prettier faz esse trabalho por você.
A extensão "Prettier" é altamente configurável e permite personalizar as opções de formatação de acordo com suas preferências. Você pode definir regras específicas, como o estilo de aspas, comprimento máximo de linha, uso de ponto e vírgula, entre outras configurações. Além disso, a extensão é compatível com arquivos de configuração do Prettier, como o arquivo .prettierrc, onde você pode definir as preferências de formatação para todo o projeto.
4 - ESlint
A extensão "ESLint" no Visual Studio Code é uma ferramenta de linting para JavaScript e TypeScript. O ESLint é uma poderosa ferramenta de análise de código estática que verifica seu código em busca de possíveis erros, problemas de estilo e práticas de programação inconsistentes.
Quando você instala a extensão "ESLint" e configura corretamente as regras de linting, o VS Code usará o ESLint para analisar seu código em tempo real enquanto você o digita. O ESLint destacará os problemas encontrados, como variáveis não utilizadas, erros de sintaxe, espaçamento incorreto, problemas comuns de estilo de código e muito mais, fornecendo dicas e sugestões para corrigir esses problemas.
Uma das vantagens do ESLint é a sua flexibilidade e configurabilidade. Você pode personalizar as regras de linting para atender às necessidades específicas do seu projeto, habilitando ou desabilitando regras individuais e definindo configurações personalizadas. Além disso, o ESLint suporta a integração com outros plugins e ferramentas, permitindo estender suas capacidades e se adaptar a diferentes ambientes de desenvolvimento.
Usar o ESLint no VS Code é uma prática comum em projetos JavaScript e TypeScript, pois ajuda a garantir a qualidade do código, a consistência do estilo e a detecção precoce de erros. Ele também é amplamente adotado pela comunidade de desenvolvedores e é suportado por várias ferramentas e frameworks populares.
5 - EditorConfig for VS Code
A extensão "EditorConfig for VS Code" no Visual Studio Code é uma ferramenta que permite a configuração consistente de estilos de formatação de código em projetos compartilhados por meio do arquivo ".editorconfig". O EditorConfig é um padrão amplamente utilizado que visa estabelecer e manter a consistência na formatação do código-fonte em diferentes editores e ambientes de desenvolvimento.
⇒ Versionamento/Versões
Um ponto de atenção que temos que ter no nosso código são com suas versões, edições feitas por colegas, versões de bibliotecas utilizadas e temos algumas soluções nas extensões do VS Code:
6 - GitLens
A extensão "GitLens" no Visual Studio Code é uma ferramenta poderosa para integração do controle de versionamento Git diretamente no editor. Ela fornece uma série de recursos avançados para visualizar e interagir com o histórico de commits, ramos, autores e outras informações relacionadas ao Git.
Com o GitLens, você pode obter insights detalhados sobre quem fez as alterações em determinadas linhas de código, quando as alterações foram feitas e em qual commit. Ele adiciona anotações e recursos visuais ao seu código, exibindo informações como a última vez que uma linha foi modificada, quem a modificou e mensagens de commit relacionadas.
Além disso, o GitLens permite navegar facilmente pelo histórico de commits e ramos do Git. Você pode visualizar diffs de código entre commits, alternar entre ramos e visualizar informações adicionais, como gráficos de linha do tempo e estatísticas de contribuição.
Outro recurso útil do GitLens é a capacidade de explorar e pesquisar repositórios remotos diretamente no VS Code. Você pode visualizar ramos remotos, explorar histórico de commits em repositórios remotos e até mesmo pesquisar commits em servidores Git hospedados, como GitHub e GitLab.
7 - Git Graph
A extensão "Git Graph" no Visual Studio Code é uma ferramenta que fornece uma visualização gráfica interativa do histórico de commits e ramos do Git. Com o Git Graph, você pode explorar e entender melhor a estrutura e o fluxo do seu repositório Git.
Ao usar a extensão Git Graph, você pode visualizar o histórico de commits em um gráfico de linhas do tempo, onde cada commit é representado por um nó no gráfico. Os nós são conectados por linhas que mostram o fluxo de desenvolvimento e a relação entre os commits.
⇒ Produtividade
As extensões no Visual Studio Code desempenham um papel fundamental ao aumentar nossa produtividade e eficiência durante o processo de desenvolvimento de software. Confira as extensões que podem aumentar sua produtividade e levar suas entregas a um outro nível:
8 - Live server
A extensão "Live Server" no Visual Studio Code é uma ferramenta que permite criar um servidor de desenvolvimento local para aplicativos web em tempo real. Com o Live Server, você pode visualizar suas páginas HTML, CSS e JavaScript no navegador enquanto faz alterações no código, e o navegador será atualizado automaticamente com as alterações em tempo real.
Ao iniciar o Live Server em um arquivo HTML, ele abrirá uma guia do navegador com a visualização da página. Qualquer alteração feita nos arquivos HTML, CSS ou JavaScript será detectada pelo Live Server e imediatamente refletida na guia do navegador, sem a necessidade de atualização manual da página.
9 - Code Runner
A extensão "Code Runner" no Visual Studio Code é uma ferramenta que permite executar trechos de código diretamente no editor, com suporte a várias linguagens de programação. Com o Code Runner, você pode escrever e testar pequenos trechos de código sem a necessidade de executar um arquivo inteiro ou alternar para um ambiente de desenvolvimento separado.
A extensão suporta uma ampla gama de linguagens de programação, incluindo JavaScript, Python, C++, Java, Ruby, PHP e muitas outras. Ela oferece um botão de reprodução no canto superior direito do editor, bem como atalhos de teclado para iniciar a execução do código.
10 - Thunder Client
A extensão "Thunder Client" no Visual Studio Code é uma ferramenta que fornece uma interface simplificada para enviar solicitações HTTP e testar APIs diretamente no editor. Com o Thunder Client, você pode realizar solicitações GET, POST, PUT, DELETE e outras para testar endpoints de API e visualizar as respostas recebidas.
A extensão Thunder Client possui uma interface amigável que permite configurar facilmente os cabeçalhos, parâmetros, corpo da solicitação e outras opções relevantes. Você pode salvar e gerenciar diferentes coleções de solicitações, tornando mais fácil reutilizar configurações e repetir testes.
11 - Jest Runner
A extensão Jest Runner adiciona suporte ao Jest diretamente no editor, permitindo que você execute testes individuais ou conjuntos de testes com facilidade. Com ela, você pode executar testes específicos com um simples clique no botão "Run" próximo ao nome do teste, ou executar todos os testes de um arquivo ou diretório com o clique em "Run All" ou o atalho de teclado correspondente.
12 - ES7+ React/Redux/React-Native snippets
A extensão "ES7+ React/Redux/React-Native Snippets" no Visual Studio Code é uma ferramenta que fornece um conjunto de snippets (trechos de código reutilizáveis) para facilitar o desenvolvimento de aplicativos usando as tecnologias React, Redux e React Native.
Os snippets são atalhos que podem ser inseridos diretamente no código para gerar blocos de código completos. A extensão ES7+ React/Redux/React-Native Snippets oferece snippets específicos para o desenvolvimento com React, Redux e React Native, agilizando o processo de escrita do código e reduzindo a quantidade de digitação manual.
Com essa extensão, você pode digitar um prefixo específico para um snippet e pressionar a tecla Tab para expandi-lo em um bloco de código completo. Os snippets abrangem uma variedade de tarefas comuns no desenvolvimento React, Redux e React Native, como criar componentes, definir rotas, configurar store Redux, definir propTypes, entre outros.
13 - Javascript (ES6) Code Snippets
A extensão "Javascript (ES6) Code Snippets" no Visual Studio Code é uma ferramenta que fornece uma coleção de snippets (trechos de código reutilizáveis) específicos para desenvolvimento JavaScript no padrão ES6 (ECMAScript 2015) e versões posteriores.
Com essa extensão instalada, você terá acesso a uma ampla variedade de snippets prontos para uso, abrangendo diferentes aspectos do desenvolvimento JavaScript, como declaração de variáveis, estruturas de controle, manipulação de arrays e objetos, funções, classes, importações/exportações, promessas, entre outros recursos do ES6 e suas versões posteriores.
Os snippets podem ser inseridos no código digitando um prefixo específico e pressionando a tecla Tab para expandi-lo em um bloco de código completo. Eles são projetados para agilizar a escrita do código, economizando tempo e esforço ao evitar a digitação repetitiva de construções comuns.
14 - Auto Rename tag
A extensão "Auto Rename Tag" no Visual Studio Code é uma ferramenta que simplifica a tarefa de renomear tags HTML ou XML correspondentes em um documento.
Ao trabalhar com código HTML ou XML, é comum ter tags de abertura e fechamento que precisam ser atualizadas juntas quando ocorre uma alteração em uma delas. A extensão Auto Rename Tag automatiza esse processo, permitindo que você renomeie uma tag e, automaticamente, todas as outras tags correspondentes sejam atualizadas no documento.
Por exemplo, se você estiver editando um arquivo HTML e alterar o nome da tag de abertura <div> para <section>, a extensão Auto Rename Tag alterará automaticamente a tag de fechamento </div>correspondente para </section>. Isso ajuda a evitar inconsistências no código e economiza tempo ao evitar a necessidade de atualizar manualmente todas as ocorrências da tag.
15 - HTML CSS Support
A extensão "HTML CSS Support" no Visual Studio Code é uma ferramenta que melhora a experiência de desenvolvimento para trabalhar com HTML e CSS. Ela oferece suporte e recursos adicionais para ajudar a escrever e estilizar código HTML e CSS de forma mais eficiente.
Com essa extensão instalada, você terá acesso a recursos como:
Completar código HTML e CSS: A extensão oferece sugestões automáticas de código enquanto você digita, ajudando a completar tags HTML, atributos, seletores CSS, propriedades e valores. Isso pode economizar tempo e evitar erros de digitação.
Navegação rápida: Você pode navegar rapidamente entre as tags HTML e as regras CSS usando atalhos de teclado ou comandos específicos da extensão. Isso facilita a movimentação pelo código e a localização rápida de elementos específicos.
Verificação de erros: A extensão pode fornecer informações em tempo real sobre erros de sintaxe e problemas relacionados ao HTML e CSS no editor. Isso ajuda a identificar e corrigir erros antes mesmo de executar o código.
Integração com outros recursos do VS Code: A extensão funciona em conjunto com outros recursos do Visual Studio Code, como o IntelliSense, fornecendo informações contextuais e sugestões baseadas no código existente, além de suporte a Emmet, permitindo a expansão rápida de código usando atalhos.
Essa extensão é especialmente útil para desenvolvedores que trabalham com HTML e CSS regularmente, oferecendo recursos adicionais que agilizam o processo de desenvolvimento e melhoram a precisão e qualidade do código produzido.
16 - Bookmarks
A extensão "Bookmarks" no Visual Studio Code é uma ferramenta que permite que você marque linhas de código específicas em seus arquivos para facilitar a navegação rápida e o acesso posterior.
Com a extensão instalada, você pode adicionar marcadores em linhas específicas do código-fonte pressionando um atalho de teclado ou usando o menu de contexto do editor. Esses marcadores são visuais e facilmente identificáveis por meio de um ícone ao lado da linha marcada.
17 - Quokka.js
A extensão "Quokka" no Visual Studio Code é uma ferramenta poderosa para desenvolvimento JavaScript. Ela fornece um ambiente de execução interativa e em tempo real para o código JavaScript, permitindo que você visualize instantaneamente os resultados e o comportamento do seu código enquanto o escreve.
18 - Javascript Booster
A extensão "Javascript Booster" oferece os seguintes recursos:
1 - Refactoring aprimorado: A extensão fornece recursos avançados de refatoração para ajudar a melhorar a estrutura e a qualidade do código JavaScript. Isso inclui renomeação inteligente de variáveis, extração de trechos de código em funções ou métodos separados e reorganização de código para melhor legibilidade e manutenção.
2 - Autocompletar aprimorado: A extensão oferece um recurso de autocompletar mais avançado para JavaScript, sugerindo não apenas palavras-chave e funções padrão, mas também variáveis, métodos e propriedades específicas do seu projeto e bibliotecas utilizadas. Isso facilita a escrita de código mais rápido e reduz erros de digitação.
3 - Gerador de código: A extensão inclui um gerador de código para JavaScript, permitindo que você crie rapidamente estruturas básicas de código, como funções, loops e estruturas condicionais. Isso ajuda a acelerar o processo de desenvolvimento, especialmente ao lidar com tarefas comuns e repetitivas.
4 - Análise estática: A extensão realiza uma análise estática do seu código JavaScript, fornecendo sugestões e avisos sobre possíveis problemas, como variáveis não utilizadas, acesso a propriedades inexistentes ou erros de sintaxe. Isso ajuda a melhorar a qualidade e a robustez do seu código.
19 - Paste JSON as Code
A extensão "Paste JSON as Code" no VS Code é uma ferramenta útil para desenvolvedores que trabalham com JSON. Ela permite converter um trecho de código JSON em código JavaScript ou TypeScript correspondente, facilitando a criação de objetos ou estruturas de dados a partir de dados JSON.
Com a extensão instalada, você pode copiar um bloco de código JSON para a área de transferência e, em seguida, usar um atalho de teclado ou o menu de contexto para colar o JSON como código JavaScript ou TypeScript diretamente no editor.
20 - NPM Intellisense
A extensão "NPM Intellisense" no Visual Studio Code é uma ferramenta que aprimora a experiência de desenvolvimento ao trabalhar com pacotes e dependências do Node.js. Ela fornece recursos de autocompletar e sugestões inteligentes para importações de pacotes NPM em seu código.
Com a extensão instalada, ao digitar um comando de importação de um pacote NPM no seu código JavaScript ou TypeScript, o "NPM Intellisense" ajudará a identificar automaticamente os pacotes disponíveis em seu projeto. Ele sugere os nomes dos pacotes NPM existentes, com base nas dependências presentes em seu arquivo "package.json", facilitando a importação correta e evitando erros de digitação.
⇒ Visual
Existem muitas extensões com foco em melhorias visuais para seu vscode, como temas, extensões que destacam códigos que se referem a cores, captura de tela entre outros. A seguir separei alguma dessas extensões que são populares entre os desenvolvedores:
21 - Dracula Official
A extensão "Dracula Official" para o Visual Studio Code é um tema de cores inspirado no famoso esquema de cores "Dracula". Esse tema oferece uma combinação de cores escura e vibrante, com tons de roxo e preto, que é popular entre os desenvolvedores.
Ao instalar a extensão, você pode aplicar o tema "Dracula" ao seu ambiente de desenvolvimento no VS Code. Isso significa que as cores da interface do usuário, da barra lateral, do editor de código e de outros componentes serão modificadas para se adequarem ao esquema de cores "Dracula". Além disso, o tema também define estilos de destaque para diferentes linguagens de programação, fornecendo uma aparência estilizada para o código-fonte.
A extensão "Dracula Official" é apreciada por sua estética atraente e moderna, além de ser considerada amigável aos olhos durante longas sessões de programação. Muitos desenvolvedores optam por temas personalizados para tornar seu ambiente de desenvolvimento mais agradável e adaptado às suas preferências visuais.
22 - Material Icon Theme
A extensão "Material Icon Theme" para o Visual Studio Code é um conjunto de ícones personalizados que substitui os ícones padrão dos arquivos e pastas no explorador de arquivos do VS Code. Esses ícones são inspirados no design do Material Design, um conjunto de diretrizes de design desenvolvido pelo Google.
Ao instalar a extensão, os ícones das pastas e arquivos no explorador do VS Code serão substituídos por ícones coloridos e distintos, correspondentes aos tipos de arquivos. Isso torna mais fácil e visualmente agradável identificar rapidamente os diferentes tipos de arquivos, como pastas, arquivos JavaScript, arquivos CSS, imagens, documentos, entre outros.
23 - Color Highlight
A extensão "Color Highlight" para o Visual Studio Code é uma ferramenta útil para desenvolvedores que trabalham com cores em seus projetos. Ela ajuda a identificar e visualizar as cores presentes no código, realçando-as com uma representação visual em tempo real.
24 - Code Snap
A extensão "Code Snap" para o Visual Studio Code é uma ferramenta que permite capturar trechos de código e transformá-los em imagens facilmente compartilháveis. Com essa extensão, você pode capturar uma seção do seu código-fonte no editor do VS Code e exportá-la como uma imagem em vários formatos, como PNG, JPEG e SVG.
Ao instalar a extensão "Code Snap", você terá acesso a um conjunto de comandos que permitem selecionar o código desejado, ajustar as configurações de aparência e exportar a seleção como uma imagem. Isso pode ser útil para compartilhar exemplos de código, documentação, tutoriais e muito mais.
⇒ Extra
25 - Live Share
A extensão "Live Share" para o Visual Studio Code é uma ferramenta colaborativa que permite compartilhar e editar código em tempo real com outras pessoas, independentemente de onde elas estejam. Com essa extensão, você pode convidar colegas de equipe, amigos ou parceiros de programação para colaborar em um projeto diretamente do seu ambiente de desenvolvimento.
Ao instalar a extensão "Live Share" e iniciar uma sessão compartilhada, você pode convidar outras pessoas para se juntarem a você. Durante a sessão, os participantes terão acesso ao seu ambiente de desenvolvimento, poderão visualizar seu código, realizar alterações, depurar, executar comandos e até mesmo participar de uma conversa por chat ou voz.
