7 extensões do VSCode para aumentar a produtividade!

7 extensões interessantes do VSCode para aumentar a produtividade!

7 extensões do VSCode para aumentar a produtividade!

Descubra 7 extensões interessantes para o VSCode que podem impulsionar sua produtividade e personalização. Conheça agora!

Tempo de Leitura: 7 minutos

Na nossa última conversa, falamos bastante sobre os atalhos do nosso querido VSCode (Visual Studio Code, desenvolvido pela Microsoft, lançado no ano de 2015, e que hoje é uma das maiores ferramentas de edição de código), e sobre as vantagens de utilizá-las. Porém, hoje falaremos sobre uma de suas principais funcionalidades, suas extensões que assim como já citado no último artigo (clica aqui para conferir se não viu ainda 😉), possibilitam uma gama enorme de customização para a ferramenta, desde pacotes de suporte para outras linguagens de programação, quanto alterações de interface, podendo incluir até mesmo efeitos visuais.

Antes de começar, é importante ressaltar que não se trata de um Top 7 melhores extensões para o VSCode, elas apenas estão ordenadas da forma que considerei mais dinâmica para a leitura. Além disso, as extensões que serão listadas a seguir, podem ser utilizadas tranquilamente na maioria dos workspaces, pois a maioria delas foram feitas para uso em diversas linguagens de programação, algumas inclusive não tendo restrição alguma, nesse sentido, podendo ser utilizadas para qualquer linguagem ou projeto.

Conheça nosso manifesto

Minhas extensões

Agora vamos então conhecer algumas ótimas extensões que uso no meu dia a dia e recomendo fortemente, tanto para iniciantes, quanto para desenvolvedores já experientes, mas que ainda não haviam explorado o vasto universo das extensões.

Rainbow Brackets

Esta simples extensão do VSCode chamada Rainbow Brackets, como o próprio nome indica, colore todos as suas chaves, destacando-as, mantendo sempre cada abertura e cada fechamento com as mesmas cores, e faz isso de forma hierárquica, ou seja, começa sem cor e vai mudando dentre as cores do arco-íris conforme você vai aumentando as camadas de aninhamento do código, dessa forma, você não se perderá dentro daquele código legado de duas mil linhas, repleto de códigos Hadouken (Hadouken Code) que chegam a passar de 7 camadas.

Uma extensão tão simples quanto essa, a primeira impressão, pode até parecer apenas um enfeite, como algo puramente estético que não influencia em nada, mas não é o caso, pois de fato ajuda muito em casos como o citado acima, deixando visualmente muito mais fácil de identificar as aberturas e fechamentos de ifs, funções, etc, além de que ao clicar sobre uma chave, uma linha vertical é desenhada interligando a chave de abertura com a de fechamento, que facilita ainda mais na identificação, o que para certas linguagens de programação que trabalham com muitas chaves, como, por exemplo, o próprio Javascript, se torna algo extremamente útil.

Esta extensão se tornou tão fundamental, que em versões mais novas do VSCode, essa funcionalidade já está presente de forma nativa (built-in) dentro da ferramenta, podendo ser desativada, para o caso de alguém que por algum motivo não queira, ou de fato não precise usá-la. Você até deve estar se perguntando por que esta extensão está nesta lista, mesmo sendo algo nativo do VSCode atualmente, e a resposta é que, uma extensão tão útil que me acompanhou desde o meu início no desenvolvimento de software, merece no mínimo uma menção honrosa.

GitLens

Essa é uma das melhores extensões do VSCode em minha opinião por trazer tantas possibilidades para nós desenvolvedores que trabalhamos utilizando uma das mais utilizadas ferramentas de versionamento de código, o Git, que foi desenvolvido em 2005 pelo mesmo criador do Kernel do Linux, o grande Linus Torvalds.

Resumidamente, o objetivo da extensão é disponibilizar diversas funcionalidades de navegação, controle e visualização das versões do seu projeto, mas para as necessidades do meu dia a dia de desenvolvimento, utilizo provavelmente algo por volta de 10% das funcionalidades dela, e mesmo assim ele ainda é muito útil para o meu trabalho. Para falar de todas as funcionalidades da extensão, seria necessário um artigo somente para ela, portanto irei apenas dar alguns exemplos de como eu a utilizo, a seguir.

Você provavelmente já se deparou com a seguinte situação, onde você fez alterações em diferentes trechos de código, seja para adicionar uma nova funcionalidade, ou refatorar uma já existente, e então em algum momento o código começou a retornar erros e apenas o CTRL + Z não te ajudou, e você já não se lembra de quais alterações você fez, então normalmente você iria checar no seu GitHub (GitLab, ou outros) as versões anteriores na linha do tempo até encontrar o código que precisa, ou então faria isso utilizando comandos em seu terminal, mas com o GitLens você consegue navegar pela timeline do seu código com apenas alguns cliques, diretamente na interface do seu VSCode, sendo possível inclusive visualizar a versão atual selecionada e sua respectiva versão anterior, mostrando um comparativo entre elas, e com a possibilidade de selecionar uma alteração específica e revertê-la para dentro da versão que está em desenvolvimento, dando agilidade na correção do bug.

Outra situação é quando você precisa entender o contexto de alguma linha de código, onde novamente você teria que utilizar comandos no terminal ou abrir o GitHub para encontrar o commit que adicionou a linha em questão, para assim conseguir ler a mensagem de commit, porém com o GitLens basta simplesmente posicionar o ponteiro em cima dela, ou selecioná-la, e logo a frente irá aparecer as informações sobre o commit no qual aquela linha foi alterada ou inserida, simples assim.

Material Icon Theme

A extensão Material Icon Theme, assim como a Rainbow Brackets, é uma extensão visual que a primeira vista pode parecer puro enfeite para o seu VCScode, mas que, na verdade, se pararmos para observar, vemos que também auxilia muito no desenvolvimento, pois, ela insere ícones no navegador de arquivos, usando como base para isso as extensões dos arquivos (.js, .css, .html, etc), e os nos nomes das pastas e dos arquivos (config, src, etc), facilitando muito na distinção entre os diversos arquivos e pastas de um projeto, como veremos em exemplos práticos a seguir.

Imagine navegar em um projeto que trabalhe com diferentes linguagens, e para encontrar certos arquivos e identificar a linguagem deles, você tenha que sempre ficar olhando atentamente suas extensões, imagino que para desenvolvedores acostumados com terminais não seja um problema, mas a meu ver, isso não é User Friendly, e para isso usamos então essa extensão, tornando as linguagens facilmente visualizáveis pelos seus ícones que precedem os nomes dos arquivos e das pastas no navegador de arquivos.

Uma funcionalidade muito interessante, é a funcionalidade já citada acima, de inserir ícones em pastas a partir de seus nomes, como, por exemplo, uma pasta “config” teria um ícone de engrenagem, que será diferente de uma pasta chamada “app” que por sua vez possuiria um ícone que represente um aplicativo e diferente também de uma pasta chamada “images”, que então teria aquele clássico ícone de imagem, por exemplo.

Com essa funcionalidade, não seria necessário muito tempo até se adaptar a ponto de não precisar sequer ler o nome das pastas para identificá-las, e em alguns casos apenas pela cor, sem nem reparar no próprio ícone, já será possível fazer essa identificação. Porém, tome cuidado ao tratar de arquivos dessa forma, pois dois arquivos diferentes poderiam ter o mesmo ícone, simplesmente porque suas extensões são iguais, o que em um momento de distração pode resultar em problemas caso você apenas olhe o ícone ou a cor, portanto, a fim de evitar esse tipo de erro, mantenho como boa prática, sempre estar atento aos nomes dos arquivos.

Com todos esses exemplos e dicas, fica muito claro o potencial desta extensão para o desenvolvimento de seus projetos, tanto potencial que provavelmente irá fazer com que ela um dia seja incluída como uma funcionalidade nativa do VSCode (que convenhamos, já deveria ser), exatamente como ocorreu com a já citada extensão, a Rainbow Brackets.

Extensões Extra

Agora é a vez de algumas extensões muito interessantes já conhecidas por mim, que no meu dia a dia de trabalho não se fazem tão necessárias, mas que para você talvez possa ser útil, ou extensões que conheci durante a criação deste artigo, que inclusive pretendo utilizá-las a partir de agora por serem muito úteis.

Bookmarks

Esta extensão do VSCode permite que você faça marcações em trechos do seu código, com ou sem descrição, e centraliza todas suas marcações em uma aba, onde você pode navegar por elas de uma forma muito simples. Já imagino o quanto essa extensão ajudaria a acessar facilmente trechos de código onde é frequentemente necessário fazer alterações, ou então, deixar anotado alguns trechos de código onde futuras melhorias serão feitas.

Prettier

Em poucas palavras, podemos dizer que esta extensão do VSCode é um formatador de código para o seu projeto, onde você pode configurar as regras para essa formatação para que se encaixe no padrão utilizado por você, sua equipe ou sua empresa. Com essa extensão, é possível garantir que os padrões de organização e estilo de código sejam seguidos por todos, pois a extensão fará a formatação para você, inclusive agilizando o processo de desenvolvimento, por não ser necessário se preocupar com essas questões.

O acionamento pode ser manual, via comando ou atalhos de teclado, ou pode ser configurado para formatar automaticamente ao salvar o arquivo, deixando ainda mais fácil sua utilização.

Live Share

Live Share é uma das extensões do VSCode desenvolvidas pela própria Microsoft, que tem o objetivo de tornar possível que dois ou mais desenvolvedores trabalhem em um mesmo projeto, remotamente e, ao mesmo tempo. Já utilizei esta extensão diversas vezes no passado para fazer Pair Programming, auxiliar colegas a solucionar bugs, e também a refatorar e revisar o código.

CodeSnap

Esta extensão do VSCode te ajuda a tirar prints do seu código, de uma maneira muito fácil e que fica muito agradável visualmente, e para isso basta ativar a extensão e em seguida simplesmente selecionar o trecho de código que você deseja registrar, nisso, uma preview do print aparecerá em outra aba dentro do seu VSCode, onde você poderá ajustar a largura da imagem que será gerada. Vejo essa extensão sendo muito útil para ajudar na criação de ilustrações para artigos e documentações.

Considerações finais

Como nem tudo são flores, as extensões podem trazer também um problema bem comum, que é a poluição do seu workspace quando você instala uma grande quantidade de extensões desnecessárias, e para evitar isso, você precisa ter um certo critério ao fazer o download de certas extensões, baixando de fato o que irá te ajudar no seu dia a dia. Outra estratégia é configurar suas extensões para serem utilizadas em workspaces específicos, como, por exemplo, em um projeto Vue.JS, não há necessidade de ter habilitada algumas extensões relacionadas a linguagem PHP, por tanto elas podem ser desabilitadas para tal workspace. Com essas dicas, você já conseguirá manter um ambiente de desenvolvimento limpo, com apenas as extensões necessárias para você naquele momento.

Deixarei os links para as extensões listadas no rodapé do artigo, bem como o link para a documentação da Microsoft sobre a feature de extensões do VSCode.

É muito bom ter você até aqui, e conto contigo para também deixar as suas visões sobre essas extensões, ou para sugerir outras extensões que você gosta. Se você gostou da leitura, compartilhe com seus amigos desenvolvedores e/ou colegas de trabalho que gostariam de conhecer essas extensões. Muito obrigado e até a próxima!

E também aproveite para participar do nosso fórum, temos uma categoria exclusiva só para Desenvolvimento de Software, clique no botão abaixo.

Mateus Garcia
Mateus Garcia
Desenvolvedor de Software na Tecnospeed, formado em Análise e Desenvolvimento de Sistemas.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Pular para o conteúdo