Desenvolvimento

Guia do Dev Iniciante – VS Code

Sejam todos bem-vindos à mais um Guia do Dev Iniciante. Desta vez, iremos ver alguns truques e macetes do Visual Studio Code para aumentar sua produtividade e velocidade escrevendo código.

Para simplificar, o Visual Studio Code ou VS Code é um dos editores de código mais utilizados atualmente por sua praticidade e versatilidade. É possível usá-lo para desenvolver em praticamente qualquer linguagem de programação, com as mais diversas funcionalidades de IDEs, que são providas através dos plugins que podem ser instalados.

Atalhos

Assim como qualquer IDE ou editor de código, o VS Code vem equipado com dezenas de atalhos para realizar ações repetitivas ou então evitar cliques em botões desnecessários. Esses atalhos são totalmente customizados e podem ser visualizados na íntegra acessando Arquivo >  Preferências > Atalhos de teclado. Ou pelo próprio atalho, que é por padrão Ctrl + K Ctrl + S, mas não se assuste com a quantidade que aparecer, é muita coisa mesmo e com toda a certeza você não vai precisar decorar nem usar todos eles. Uma das funções deste guia é mostrar para você os atalhos mais comuns e que podem ser mais relevantes.

Ctrl + shift + F

Similar ao que o clássico Ctrl + F faz. Com esse comando, você pode procurar por textos recorrentes entre todos os arquivos do repositório aberto:

Ctrl + shift + H

Esse aqui também é parecido com o seu parente Ctrl + H, ele permite buscar e substituir textos recorrentes entre todos os arquivos da pasta:

Ctrl + P

Ao invés de ficar procurando por um arquivo específico entre vários outros, é possível usar o Ctrl + P para procurar por um arquivo pelo seu nome:

Ctrl + shift + seta cima/baixo

Adiciona novos cursores acima ou abaixo da linha atual, sendo possível escrever várias linhas de uma vez só:

Ctrl + D

Esse atalho serve para adicionar novos cursores em outras ocorrências do texto selecionado. Sendo assim, é possível editar de forma prática vários textos ao mesmo tempo:

Ctrl + seta esquerda/direita

Ao invés de apertar as setas para passar letra a letra em um texto longo, com essa combinação é possível navegar palavra a palavra no código. Essa combinação pode também ser utilizada junto com a tecla Shift para selecionar o texto enquanto navega:

Alt + seta cima/baixo

Utilizando esse atalho você pode mover linhas do seu texto para cima ou para baixo sem ter que copiar e colar ela em outro lugar:

 

Terminal

Uma função muito útil do VS Code é o terminal integrado. Você pode criar uma sub-janela rodando um terminal para rodar comandos direto no editor. Você também pode criar um terminal integrado acessando Terminal > Novo Terminal, mas pra facilitar, é possível adicionar um atalho para isso, basta acessar os atalhos de teclado, e pesquisar por “Criar novo terminal” ou “Create new terminal” e então atribuir um atalho para a ação, no meu caso eu utilizo Ctrl + ‘.

Extensões

Outro ponto que torna o VS Code uma ferramenta poderosa são as extensões que servem para adicionar novas funcionalidades ao editor. As extensões na sua grande maioria são desenvolvidas pela própria comunidade e por isso existe uma grande variedade delas.

Dependendo da linguagem que você vai utilizar, pode ser que não tenha suporte nativo para ela, mas com certeza existe alguma extensão que dá esse suporte ou até mesmo incrementa o suporte que já existe, basta abrir a aba de extensões e pesquisar pelo nome da linguagem ou framework que serão listadas várias extensões disponíveis.

Além de extensões de utilidade, também existem extensões que adicionam temas ao editor de código, podendo trocar as cores, fontes e aparência deixando o ambiente mais customizado e também extensões que ajudam a descontrair.

Extensões de Utilidade (ou não)

 

Live Share

 

Essa extensão permite que você e mais pessoas possam escrever código simultaneamente na mesma pasta e nos mesmos arquivos, basta que todos tenham a extensão instalada e convidar seu time.

 

Trailing Spaces

 

Essa extensão irá mostrar para você sempre que houver algum espaço em branco no fim da linha, ajudando a deixar seu código mais limpo.

 

vscode-pets

 

Essa extensão irá adicionar ao seu editor uma nova janela em que você pode adicionar pets muito fofos que ficam brincando no canto da sua tela enquanto você trabalha.

In Your Face

 

 

Incorporando o meme em que o Sr. Incrível “uncanny”, a extensão adiciona um painel que muda a cara do Sr. Incrível de acordo com a quantidade de erros no seu código.

Extensões de Tema

Agora aqui vai alguns temas do editor de código que a galera aqui da Jera usa:

GitHub Theme 

One Dark Pro

Aura Theme

Dainty

Dracula Official

SynthWave ’84

 

 

Se você quiser aprender mais sobre desenvolvimento, continue acompanhando os conteúdos da Jera.

Texto por Alberto Bazilio.