O VS Code se tornou a IDE mais querida dos(as) desenvolvedores(as) e um dos mais usados por todos – independentemente da linguagem de programação que você esteja codificando!
Poucos sabem que há uma grande quantidade de recursos e plugins disponíveis no VS Code por meio do Market Place!
Muitos desenvolvedores(as), quando estou realizando uma live, acabam me perguntando sobre alguns plugins e extensões que uso no meu VS Code, e esse artigo é justamente sobre isso: como turbinar o seu VS Code para agilizar na hora de desenvolver aplicações ou até mesmo para realizar um deploy da sua aplicação direto do seu VS Code.
Vamos turbinar o VS Code?
Uma das maiores perguntas que todos me fazem é com respeito a determinados plugins que eu uso no meu VS Code.
Vou citar alguns principais deles que eu mais curto e que recomendo a qualquer desenvolvedor(a) para instalar.
Mas antes, claro, se faz necessário já ter instalado em suas máquinas o VS Code. Caso não tenha, basta acessar o link abaixo:
Lembrando que, todo mês sai novas features de melhorias e novidades para o Vs Code. E está disponível para uso tanto: Windows, Linux e Mac! Então, aproveitem e usem!
Vamos à primeira dica?
1 – Beautify
Beautify é uma das extensões mais conhecidas por todos os desenvolvedores, uma vez que ele, de fato, faz seu papel: indenta seu código HTML, CSS, Sass, JavaScript e JSON, visando deixar os códigos dentro do padrão de formatação e de maneira legível para todos.
Recomendo o plugin abaixo e, caso queiram usar, acessem e instalem no VS Code:
Essa dica é nova para muitos, pois muitos desconhecem essa incrível extensão disponível para o VS Code.
2 – BookMarks
Sabe quando você precisa marcar uma determinada linha de código ou até mesmo várias delas e não sabe como vai fazer?
A intenção do BookMarks é justamente essa! Auxiliar quando você precisar marcar alguma ou várias linhas de código que você precise lembrar para alterar ou fazer algo.
Seu uso é muito simples e dinâmico – vale a pena baixar e testar essa extensão:
3 – Color HightLight
O Color Highlight é excelente pra quem trabalha com CSS & Sass. Por que? Porque ele auxilia você a mostrar as cores que você criará num determinado arquivo .css.
Ajuda bastante e é de grande valia para quem é front-end!
4 – Dracula Official
Tema é algo que todo mundo gosta de alterar na IDE e colocar de acordo o gosto pessoal, e um dos temas mais baixados para quem usa o VS Code é o Dracula.
Ele vem com várias cores e temas que você pode alterar de acordo com o seu gosto. Eu já usei muito o tema Dracula Dark (como da imagem abaixo).
Mas, na próxima dica mencionarei um outro tema que tenho usado e curtido bastante!
Caso queiram experimentar o tema Dracula, acessem o link abaixo:
5 – Winter is Coming
Depois do tema Dracula Dark, eu particularmente me apaixonei pelo tema Winter is Coming. Não por causa da série Game of Thrones, mas pelas cores e a disponibilidade de paletas bem interessantes do tema que, ao meu ver, são simplesmente lindas!
Um ponto importante a ser mencionado sobre esse tema, é que ele foi criado pelo grande John Papa – um dos maiores evangelistas de JavaScript e Angular.
Caso queiram experimentar esse tema incrível, acessem e instalem a extensão no link a seguir:
6 – Git History
Para aqueles que gostam de uma integração de third party em suas IDEs, possuir o Git History instalado no VS Code será uma das melhores escolhas que você poderá fazer.
Ele te permite ter uma visão em tempo real, se um determinado código que você está trabalhado já foi comitado ou ‘pusheado’ por outra pessoa.
E o mais interessante é que você consegue acompanhar o histórico de quem foi a última pessoa que realizou a alteração do código! Sem contar que você pode de uma maneira muito mais prática e tranquila realizar o merge!
Dêem uma olhada no gif abaixo pra ver o quão legal é essa extensão:
É uma daquelas extensões que são praticamente “obrigatórias” ter no seu VS Code. Assim sendo, indico o Git History. Para experimentar, basta acessar o link abaixo:
7 – Git Lens
A dica 7 acaba sendo um complemento da dica 6, uma vez que o papel do Git Lens tem como objetivo auxiliar o(a) desenvolvedor(a) a verificar quem alterou determinado arquivo ou até mesmo uma determinada linha no git.
O exemplo abaixo mostra justamente como funciona o Git Lens:
Ao instalar o Git History no seu Vs Code, recomendo que baixem também o Git Lens. Plugin disponível no link abaixo:
8 – Guides
Guides é uma extensão que te ajudar a saber se de fato o seu código está devidamente indentado.
Como?
Ele cria uma espécie de linhas imaginárias. Por exemplo, ele verificará se você está fechando um ‘if’/’else’.
A imagem abaixo mostra como funciona e também é uma extensão que todo(a) desenvolvedor(a) deve instalar no VS Code.
Abaixo segue o link da extensão Guides:
9 – Live Server
Depois que baixar essa extensão, você não vai querer saber de outra coisa!
Por que?
Imagine o seguinte cenário: você está desenvolvendo uma página estática, onde tem: index.html, CSS e JavaScript.
Geralmente o que a gente faz para poder ver em tempo real se o que a gente está codificando está de acordo?
Vamos até a pasta do projeto, clicamos com o botão direito em cima do index.html e enviamos para o browser.
Bom, com o Live Server você não precisará mais fazer isso! E é sensacional o poder que ele tem.
Vou deixar que o gif a seguir mostre a vocês do que ele é capaz:
Reparem que basta clicarmos no botão “Go Live” que ele disponibiliza um server no browser, e no momento que você faz a alteração no seu código ele já vai atualizando. Coisa linda, não é mesmo?
Testei ele no meu projeto de AngularJs e funcionou perfeitamente! Recomendo fortemente que baixem ele. Se desejarem, já estou disponibilizando o link abaixo:
10 – Path Intellisense
Quem nunca teve dificuldade – principalmente para quem é desenvolvedor JavaScript ou front-end – ao trabalhar num projeto com inúmeras pastas e precisar fazer um ‘require’ daquele arquivo que está abaixo ou acima de várias pastas? E para piorar, você não consegue chegar no path correto daquele arquivo.
Quero dizer que os seus problemas em relação a isso acabaram. Lhes apresento o Path Intellisense.
Ele te auxilia justamente nessa parte: encontrar, de uma maneira rápida e dinâmica, a path de um determinado arquivo que você precisa referenciar.
Observem no gif abaixo como ele funciona:
Essa também é uma daquelas extensões que são praticamente “obrigatórias” instalar no VS Code – recomendo.
Abaixo o link do Path Intellisense:
11 – Rainbow Brackets
Essa extensão é ideal pra quem desenvolve com linguagens que fazem muito uso de colchetes, como, por exemplo: Node.js, JavaScript, entre outras.
Quem aqui nunca se perdeu sem saber se o colchete foi fechado de fato? Eu sempre me perco, especialmente quando estou desenvolvendo em JavaScript e Node.js.
Então, para ajudar e auxiliar a vida do(a) desenvolvedor(a), o objetivo dessa extensão é mostrar, em forma de cores, se você fechou um determinado colchete.
Também é uma daquelas extensões – especialmente pra quem é desenvolvedor JavaScript – que é recomendável ter instalado no VS Code. Recomendo!
Abaixo o link do Rainbow Brackets:
12 – Live Share
Essa é uma das extensões mais legais que eu já conheci! E não é à toa, pois com o Live Share, você consegue editar e depurar colaborativamente com outras pessoas. em tempo real, independentemente das linguagens de programação que você está usando ou dos tipos de aplicativos que você está desenvolvendo.
Ele permite que você compartilhe instantaneamente (e com segurança) seu projeto atual.
E o mais legal dessa extensão é que ele permite que você compartilhe sessões de debbuging, crie instâncias de terminal, aplicativos da web localhost, chamadas de voz e muitas outras coisas legais!
Para aqueles que possuem equipes de desenvolvimento que trabalham de maneira remota ou até mesmo desejam ou têm a cultura de realizar Code Review, é uma baita extensão que vai te auxiliar nessas horas.
Caso queiram saber mais sobre Live Share, recomendo que deem uma olhada na documentação da extensão:
E caso queiram experimentar o Live Share no seu VS Code, abaixo segue o link para instalação:
13 – VsCode-icons
Amo essa extensão. Sabe por que? Porque ela possui inúmeros ícones de extensões de qualquer linguagem, pastas ou arquivos que você possa imaginar e auxilia bastante quem precisa, de maneira visual, ter uma noção em qual arquivo está mexendo ou desenvolvendo.
Abaixo vocês podem ver em ação essa extensão que recomendo instalar no seu VS Code:
Caso queiram instalar o vscode-icons, segue o link abaixo:
14 – Azure Tools
Essa extensão recomendo para aqueles que usam a plataforma de Nuvem Azure!
Sem a necessidade de entrar no Portal Azure, você já terá disponível, dentro do Vs Code, os principais recursos do Azure. Entre eles:
- Azure Cli
- App Service
- CosmosDB
- Azure SQL Databases
- Azure Functions
- Azure Storage
- Docker
- Azure Pipelines
- Azure Resource Manager
- Azure IoT Toolkit
Recomendo àqueles que fazem uso do Azure, baixarem essa extensão que auxilia e muito a todos!
Conclusão
O VS Code possui inúmeras extensões que vão te ajudar a aumentar a produtividade do seu trabalho. Porém, só tome cuidado para não baixar extensões que não usa mais, pois o seu VS Code pode ficar lento. Se não usa tanto, desinstale!
Há um curso bastante interessante e totalmente gratuito para aqueles que desejam saber um pouco mais sobre o VS Code.
E recomendo também, para aqueles que desejam aprender a desenvolver uma página estática com HTML, CSS e JavaScript, o curso abaixo – que também é totalmente gratuito. E melhor, de quebra vai aprender Git!
No próximo artigo, mostrarei como hospedar uma página estática em menos de 10 minutos de uma maneira simples, rápida e totalmente gratuita.
Aguardem e me acompanhem no Twitter.
Até a próxima, pessoal!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?