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.