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

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.