DEV Community

Caio Marcellus Cabral
Caio Marcellus Cabral

Posted on • Edited on

3 atalhos do VS Code que você precisa conhecer (+ 1 bônus)

Olá, pessoa. Espero que você esteja bem!

Programar é muito mais que digitar código rápido. Planejar, estruturar e produzir código legível e de fácil manutenção são de longe características mais desejáveis em um programador que a velocidade para escrever o código em si.

Ainda assim, convém ter algumas cartas na manga que acelerem alguns processos para a gente, ou que diminuam atividades repetitivas. Isso é quase um lema para nós programadores, né? Por isso vim aqui dividir com vocês as três funcionalidades do VS Code que eu uso sempre que estou programando

Comentar bloco de código

A arte de comentar (ou não) o código rende um artigo à parte, mas não entraremos nessa seara: o fato é que todo mundo comenta o código em algum momento, seja como um recado para o seu eu do futuro, ou como uma instrução para outros devs, ou apenas para neutralizar alguns fragmentos do código durante um processo de dedetização debugging. Para comentar um bloco de código, o VS Code tem dois atalhos:

alt + shift + a

ctrl + /
Enter fullscreen mode Exit fullscreen mode

Mover fragmento de código

Suponhamos que você tomou pouco café, e que acabou colocando o seu footer antes do header. Uma solução possível é dar ctrl + x para recortar o footer todo, e ctrl + v para colar ele no lugar certo. Resolvido, muito bom.

Você também poderia fazer isso usando os atalhos:

alt + ↑
alt + ↓
Enter fullscreen mode Exit fullscreen mode

Você pode usar eles em uma linha ou bloco de código. Se for uma linha, não precisa selecionar ela inteira. O atalho vai funcionar só de estar com o cursor nela. É ótimo para fazer pequenos ajustes, e movimentar blocos de código, reordenar listas, tirar ou colocar um elemento dentro de outro, etc.

Alterar múltiplas linhas

Esse daqui é o meu favorito. Imagine que você estruturou sua navbar toda bonitinha. De repente você percebe que não colocou o href dentro da tag a. Bateu um desânimo? Não precisa mais chorar! O VS Code tem os seguintes atalhos:

ctrl + d
alt + click
Enter fullscreen mode Exit fullscreen mode

Com esses atalho você pode multiplicar o seu cursor e alterar, acrescentando ou apagando, diversas linhas de código ao mesmo tempo. Nesse caso, teríamos duas alternativas:
1) Selecionar a tag <a> clicando e arrastando o mouse, e apertar o ctrl + d até que todas estejam selecionadas. Então você digita o href somente uma vez para todas.
2) Você poderia ainda segurar o alt e clicar em todas as linhas que quer alterar. Estando com todas selecionadas, é só inserir a informação que ficou faltando.

Depois de ter feito isso, é só apertar o esc que tudo volta ao normal.

Eu prometi um bônus, né?

Essa não vale pelo atalho em si, mas para acessar outros atalhos do VS Code. Utilizando ctrl + shit + p e digitando "Open Keyboard Shortcuts" você tem acesso a uma lista vertiginosa de atalhos. Divirta-se.

Top comments (1)

Collapse
 
mariaclaudiapio profile image
Maria Cláudia

Parabéns pelo post, Caio!

Já uso bastante o alt + seta e outro dia descobri que podemos mover uma linha selecionando-a e arrastando com o mouse... Esse procedimento é útil quando o código está "mais longe" do lugar para onde queremos levá-lo. Mas, de certa forma, chega a ser similar ao ctrl c + ctrl v.
Outro atalho que eu uso bastante é o ctrl + alt + n, para "rodar" o programa JavaScript. Mas, creio que ele só funciona em conjunto com a extensão "Code Runner"...

Falando nisso, esse é um outro tema que pode dar pano para manga: extensões do VS Code, hum?