7 atalhos incríveis do VSCode para facilitar na hora de codar!

3º Atalho: Indent/outdent line

Ctrl + ] / [ 

Agora imagine que você já tem suas várias chamadas de função copiadas, com seus parâmetros diferentes, e organizadas em uma ordem lógica que auxiliará na leitura do código, porém você percebe que algumas delas que você copiou e colou ao invés de utilizar o atalho de mover linha, acabaram ficando indentadas de uma forma incorreta (mesmo sabendo que ao colar uma linha de código no VSCode, ele também já indenta da forma correta).

Nese caso, se você usar o “Ctrl + Z” apenas uma vez ao colar uma linha de código em uma indentação diferente de onde foi copiada, ele volta apenas a etapa de indentação e pode ocasionar que a linha fique incorretamente indentada, e para este exemplo, imagine que foi isso que você fez por engano, além de algumas outras linhas de código já estavam com a indentação “bagunçada”.

Para corrigir isso, temos este atalho que facilitará bastante esse processo, então segurando a tecla “Ctrl” e alternando entre a tecla de abre colchetes “[”, para indentar para a esquerda, e fecha colchetes “]”, para indentar para a direita, você poderá ajustar cada linha mal indentada, da forma que for necessário.

4º Atalho: Insert cursor

Alt + Click

Agora vamos mudar um pouco de exemplo, você abriu um código-fonte legado, ou até mesmo um de seus projetos antigos que estavam abandonados, e você decide fazer uma refatoração, pois só de olhar as primeiras linhas do primeiro arquivo que abriu, você já percebe que extistem várias linhas de código sem o ponto e vírgula no final, sendo que o padrão do resto do projeto é utilizá-las em todo final de linha, então algo precisará ser feito.

Nisso você normalmente iria em cada uma das linhas de código, colocando ponto e vírgula em todas, porém, com a funcionalidade multi-cursor do VSCode, você consegue inserir vários cursores segurando a tecla “Alt” e clicando com o botão esquerdo do mouse em cada final de linha, assim, uma vez que você já tem seus cursores posicionados nos locais desejados, basta clicar apenas uma vez na tecla ponto e vírgula “;” e pronto, o código agora está padronizado.

Este exemplo do ponto e vírgula, é um exemplo simples de utilização, mas com essa funcionalidade de multi-cursor, a gama de possibilidades é imensa, como, por exemplo, quando você tem um código de um objeto JSON, mas percebeu que não precisaria usar as aspas envolta de cada chave do objeto, pois está usando a linguagem javascript e poderia utilizar este código no formato de objeto literal, retirando as aspas de qualquer chave onde as palavras não estejam sendo separadas por hífens “-”, ou seja, estejam usando o padrão “camelCase”, por exemplo.

Nisto você pode então utilizar o atalho esse atalho, e posicionar os seus cursores na frente de cada aspas que deseja apagar, até que todas elas estejam selecionadas, então basta apertar apenas uma vez na tecla de apagar “Backspace” e pronto, você transformou seu objeto JSON em um objeto literal do Javascript.

Para consultar mais detalhes sobre a diferença entre a notação de objeto literal e o JSON, acesse a documentação clicando aqui.

5º Atalho: Add selection to next Find match

Ctrl + D

Outro cenário interessante onde a funcionalidade do multi-cursor citado no atalho acima pode ser usado, é para selecionar linhas de código iguais, e alterá-las ao mesmo tempo, o que pode ser útil para, por exemplo, renomear chaves de um array de objetos JSON, onde normalmente você iria copiar o novo nome e colar nos locais necessários, ou até mesmo usar o atalho citado acima, mas você pode atingir o mesmo objetivo de forma mais rápida e eficiente selecionando o texto que deseja substituir, no caso uma das chaves, e então apertando a tecla “D” enquanto segura a tecla “Ctrl”, até que todas as outras chaves estejam selecionadas, então resta simplesmente alterar para o novo nome digitando-o.

Lembrando que este atalho já irá selecionar automaticamente com o multi-cursor tudo o que ele encontrar dentro da seleção inicial, ou seja, se você fizer uma seleção e colar algum texto por cima, ele irá sobrescrever toda o conteúdo da seleção inicial, bem como todo o conteúdo de cada uma das seleções encontradas, valor ao invés de colar o conteúdo novo na frente do antigo.