14 Dicas para turbinar o seu VS Code!


O VsCode se tornou a IDE mais querida por todas as pessoas desenvolvedoras e uma das mais usadas  — independentemente da linguagem de programação que você está codificando!

Mas o que poucos conhecem é a grande quantidade de recursos e plugins que estão disponíveis no VsCode por meio do Market Place!

Durante as lives que faço, muitos desenvolvedores (as) acabam me perguntando sobre alguns plugins e algumas extensões que uso no meu VsCode, e este post é justamente sobre isso: como turbinar o seu VsCode para agilizar na hora de desenvolver aplicações ou até mesmo para realizar um deploy da sua aplicação direto do seu VsCode.

Vamos nessa!

Vamos turbinar o VsCode?!

Uma das principais perguntas que recebo é a respeito de determinados plugins que uso no meu VsCode. Vou citar os principais que mais utilizo e que recomendo a qualquer desenvolvedor(a).

É necessário ter o VsCode instalado em sua máquina. Caso não tenha, basta acessar aqui.

Lembrando que todo mês saem novas features de melhorias e novidades para o VsCode que estão disponíveis para uso no Windows, Linux e Mac! Então, aproveite e use!

Vamos à primeira dica?!

Dica #1 — Beautify

Beautify é uma das extensões mais conhecidas por todos os desenvolvedores aqui. Pois ela de fato faz o seu papel, que é identar o 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 nós.

Eu recomendo este e, caso queiram usar, basta clicar aqui e instalá-lo no seu VsCode.

Esta dica é nova para alguns. Pois muitos desconhecem essa incrível extensão disponível para o VsCode.

Dica #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 você quando precisar marcar alguma ou várias linhas de código que você precise lembrar para alterar ou fazer algo.

 

uma captura de tela de um computador

O seu uso é muito simples e dinâmico. Vale a pena baixar e testar essa extensão.

Dica #3 — Color HighLight

O Color HighLight é excelente para quem trabalha com CSS e Sass. Por quê? Pois ele auxilia você a mostrar as cores que você está criando em um determinado arquivo.css.

Ajuda bastante no desenvolvimento do Front-end e pode ser baixado aqui!

 

Dica #4 — Dracula official

 

um screenshot de uma tela do telefone de pilha com texto

Tema é algo que todo mundo gosta de alterar na IDE e colocar de acordo com a sua cara. E um dos temas mais baixados para quem usa o VsCode é 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 o da imagem a seguir). Mas na próxima dica mencionarei outro tema que tenho usado e curtido bastante!

Caso desejem experimentar o tema Dracula, basta clicar aqui.

Dica #5 — Winter is Coming

 

um screenshot de uma tela de computador

Depois do tema Dracula Dark, particularmente me apaixonei pelo tema Winter is Coming. Não por causa do seriado Game of Thrones, mas pelas cores e pela disponibilidade de paletas bem interessantes para esse tema, as quais, a meu ver, são simplesmente lindas!

Um ponto importante a mencionar sobre este tema é que ele foi criado pelo grande John Papa — um dos maiores evangelistas do JavaScript e Angular!

Caso queiram experimentar este tema incrível, basta baixar e instalar a extensão.

Dica #6 — Git History

Para aqueles que gostam de uma integração de 3rd party em suas IDEs, de fato, ter o Git History instalado no seu VsCode será uma das melhores escolhas que você fará.

Ele lhe 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ê uma olhada neste gif a seguir para que você possa observar o quão legal é essa extensão:

 

um screenshot de uma tela de computador

É uma daquelas extensões que são praticamente “obrigatórias” de se ter no seu VsCode. Assim sendo, indico o download Git History.

Dica #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 desenvolvedor(a) a verificar quem alterou o determinado arquivo ou até mesmo uma determinada linha no Git.

O exemplo a seguir mostra justamente como funciona o Git Lens:

 

uma captura de tela de um telefone celular

Uma vez instalado o Git History no seu VsCode, recomendo baixar também o Git Lens. Aqui está o plugin.

Dica #8 — Guides

Guides é uma extensão que vai lhe auxiliar para saber se de fato o seu código está devidamente identado. Mas como?

Ele cria uma espécie de linhas imaginárias. Por exemplo, ele verificará se você está fechando um ‘if’/‘else’.

A imagem a seguir mostra como funciona e também como é uma extensão que todo desenvolvedor(a) deve instalar no seu VsCode.

 

Você pode encontrar a extensão do Guides aqui.

Dica #9 — Live Server

Depois que você baixar essa extensão, não vai querer saber de outra coisa! Mas por quê?

Imagine o seguinte cenário: você está desenvolvendo uma página estática, que tem index.html, CSS e JavaScript Geralmente o que você faz para ver em tempo real se o que você está codificando está de acordo? Você vai até a pasta do projeto, clica com o botão direito em cima do index.htmal e envia 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 mostre a você do que ele é capaz:

 

uma captura de tela de um telefone celular

Note que basta você clicar no botão “Go Live”, que ele disponibilizará 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 que é uma beleza! Assim, super e ultra recomendo baixa-lo

Dica #10 — Path Intellisense

Quem nunca teve a dificuldade, principalmente para quem é desenvolvedor(a) JavaScript ou Front-End, quando você trabalha em um projeto com inúmeras pastas e precisa 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. Conheça: Path Intellisense. Ele lhe auxilia justamente nesta parte: encontrar de uma maneira rápida e dinâmica a path de um determinado arquivo que você precise referenciar.

Observe no gif a seguir como ele funciona:

 

uma captura de tela de um telefone celular

Essa é uma daquelas extensões que são praticamente “obrigatórias” instalar no seu VsCode, e eu recomendo.

Dica #11 — Rainbow Brackets

Super-recomendo esta extensão para quem desenvolve com linguagens que fazem uso demasiado de colchetes, como Node.js, JavaScript, entre outras.

Quem aqui nunca se perdeu e ficou se perguntando se o colchete foi ou não de fato fechado? Eu sempre me perco, especialmente quando estou desenvolvendo em JavaScript e Node.js.

Então, para ajudar e auxiliar a vida do desenvolvedor(a), essa extensão tem como objetivo mostrar — em forma de cores — se você fechou um determinado colchete.

Também é uma excelente extensão— especialmente para quem é desenvolvedor(a) JavaScript e precisa ter instalado no seu VsCode. Recomendo!

Dica #12 — Live Share

Essa é uma das extensões mais legais que já conheci! E não é à toa!

Pois o Live Share permite que você edite e depure 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 possibilita 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 têm 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 lhe auxiliar nessas horas.

Caso queira saber mais sobre Live Share, recomendo que dê uma olhada na documentação da extensão.

E, caso deseje, pode experimentar o Live Share no seu VsCode.

 

Dica #13 — VsCode-icons

Amo essa extensão. Sabe por quê? Pois ela tem inúmeros ícones de extensões de qualquer linguagem, pastas ou arquivos que você pode imaginar. E auxilia bastante para quem precisa, de maneira visual, saber em qual arquivo está mexendo ou que arquivo está desenvolvendo.

A seguir você pode ver em ação essa superextensão que recomendo instalar no seu VsCode:

 

uma captura de tela de um telefone celular

 

Dica #14 — Azure Tools

Recomendo essa extensão para aqueles que usam a plataforma de Nuvem Azure!

Pois, sem a necessidade de entrar no Portal Azure, você já terá disponível, dentro do VsCode, 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 para aqueles que fazem uso do Azure baixarem essa extensão, que auxilia, e muito, a todos!

Palavras finais

O VsCode tem inúmeras extensões que vão lhe ajudar a aumentar a produtividade do seu trabalho. Só tome cuidado para não baixar extensões que não são usuais para você, pois o seu VsCode pode ficar lento. Se não usa muito, desinstale! #ficaadica

Há um curso muito interessante, e totalmente gratuito, para aqueles que desejam conhecer um pouco mais sobre o VsCode.

E também recomendo, para aqueles que desejam aprender a desenvolver uma página estática com HTML, CSS, JavaScript, este curso — que também é totalmente gratuito. E, de quebra, vai aprender Git!

No próximo post, explicarei como você podem hospedar uma página estática em menos de 10 minutos de uma maneira simples, rápida e totalmente gratuita. Aguarde e me acompanhe pelo Twitter!

Até a próxima, pessoal!

 

 


Autor:

Software Engineer & Developer com especialização em .NET com experiência nacional e internacional em desenvolvimento de sistemas desde pequenas à grandes empresas. Trabalhando com diferentes tecnologias e frameworks e linguagens de programação, como: C#, Asp.NET, Node.Js, Angular, React, HTML, CSS, JQuery, KnockoutJs, TypeScript, RESTFul, API, MongoDb, Ruby on Rails, Python Django, SQL Server, Metodologias Ágil e Scrum, TDD e entre outros. Atualmente atua como Microsoft MVP em Visual Studio and Development Technologies. Sendo assim, atuando como evangelista de novas linguagens de programação, Community Leader & Speaker do Meetup: Coders in Rio.