Aprenda a usar os atalhos do VSCode de forma eficiente. Descubra as melhores técnicas e dicas de utilização com exemplos práticos.
Tempo de Leitura: 6 minutos
No nosso dia-a-dia no desenvolvimento de software, utilizamos com frequência os editores de código-fonte, e um dos mais famosos, que você encontrará sempre sendo citado entre os top melhores, é o nosso querido Visual Studio Code, VSCode para os mais chegados, desenvolvido pela Microsoft e com diversas funcionalidades muito interessantes, como suas extensões, que possibilitam uma gama muito grande de personalização.
Porém, hoje falaremos sobre seus atalhos, mais especificamente os atalhos que eu mais utilizo no meu dia-a-dia, com exemplos práticos de utilização. Lembrando que alguns desses atalhos que veremos não são exclusivos do VSCode, sendo também encontrados em outros editores de código-fonte.
Veremos atalhos diferentes dos atalhos de navegação e edição de textos já presentes nativamente no Windows, mas fique tranquilo, que mesmo não tendo conhecimento sobre eles, este artigo ainda será muito útil para você.
Sem mais delongas, vamos para os atalhos!
Conteúdo
MostrarOcultar
1º Atalho do VS Code: Copy line up/down
Shift + Alt + ↓/↑
Em várias situações você irá se deparar com a necessidade de duplicar algumas linhas de código, como, por exemplo, imagine que você precise utilizar uma mesma função repetidas vezes em um mesmo arquivo, porém, em cada chamada da função você precisaria de parâmetros diferentes, o qual é um cenário bem comum em algumas aplicações.
Normalmente você copiaria a chamada da função e a colaria nos locais desejados e mudaria os seus parâmetros conforme a necessidade. Porém, em casos como esse, o atalho de duplicar linhas poderá te ajudar muito, pois você pode até escolher se deseja que a linha de código selecionada seja duplicada para a linha de cima ou de baixo, usando a tecla “Up” ou “Down” do seu teclado, enquanto segura as teclas “Shift” e “Alt” juntas.
Uma das vantagens de utilizar essa funcionalidade, é sua capacidade de se adaptar ao contexto, indentando as linhas de código de uma forma inteligente, não sendo necessário que você reorganize a linha duplicada.
2º Atalho: Move line up/down
Alt + ↓/↑
Utilizando-se do mesmo exemplo do atalho anterior, imagine então que você já tem suas chamadas de função copiadas e cada uma com seus diferentes parâmetros já configurados, porém, a ordem como você organizou, não lhe agradou muito, então você precisaria recortar as linhas que deseja reorganizar, e colar nos locais desejados, o que seria um trabalho um pouco chato.
Mas e se ao invés disso você usar o atalho de mover linhas, segurando a tecla “Alt” e pressionando as teclas “Up” ou “Down”, dessa forma você conseguirá organizar as linhas rapidamente, movendo-as para cima ou para baixo sem a necessidade de ficar copiando e colando uma por uma.
Além de apenas mover para cima e para baixo, ao utilizar este atalho, o VSCode identifica a indentação utilizada na linha em questão, e já organiza automaticamente para você, por exemplo, ao mover a linha de código para num If, a linha movida já ficará com a identação adequada para o If.
Imagem: Unsplash
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.
Imagem: Unsplash
6º Atalho: Rename Symbol
F2
No atalho acima, usamos como exemplo a renomeação de chaves de um objeto JSON, mas para renomearmos variáveis e funções dentro de um mesmo arquivo, temos um atalho ainda melhor para isso, e para utilizá-lo basta selecionar a variável ou função desejada e apertar a tecla “F2”, nisso um campo de texto irá aparecer e você deve inserir o novo texto, e ao confirmar, todas as incidências daquela variável ou função presentes no arquivo serão substituídas pelo novo conteúdo.
7º Atalho: Format document
Shift + Alt + F
Agora, por último, mas não menos importante, o atalho que já me ajudou muito quando preciso formatar alguma string JSON entregue por alguma API ou aplicação, ou formatar algum código-fonte minificado em Javascript ou outras linguagens, de forma que o conteúdo fique legível, e para isso usaremos a funcionalidade de formatação do VSCode, acessível segurando as teclas “Shift” e “Alt” juntos, e em seguida apertar a tecla “F”, e então, como mágica, seu código estará formatado.
Algumas configurações dessa formatação podem ser encontradas nas “Preferências” do VSCode, além de ser possível baixar das extensões, novas formatações para linguagens que não são suportadas nativamente pelo VSCode, tornando a funcionalidade e o atalho ainda mais versáteis.
Outro cenário onde esse atalho se torna muito útil, é para a formatação de códigos em projetos no geral, onde você pode configurar os padrões de formatação do VSCode conforme os padrões do seu projeto, assim sempre que fizer alguma alteração você pode utilizar o atalho, e assim terá sempre um código indentado e bem formatado.
Pensando neste exemplo, existem formas de automatizar esse processo de formatação do código e até mesmo de marcar os erros de formatação para poderem ser corrigidos manualmente, mas por não estarem relacionadas a atalhos, isso pode ser assunto para um próximo artigo!
--
E com esse último ótimo atalho, finalizo o artigo, e caso tenha gostado desses atalhos e esteja curioso para ver mais atalhos, você pode acessar a documentação do VSCode, clicando aqui, ou então acessar diretamente um PDF oficial do VSCode contendo os atalhos da ferramenta, clicando aqui.
Mas você também pode deixar nos comentários se gostaria que eu trouxesse mais um artigo sobre esse assunto, trazendo alguns atalhos interessantes que descobri enquanto elaborava este artigo que você está lendo agora. 😉
Que trocar uma ideia sobre programação? Te encontro lá na nossa comunidade, só clicar no botão abaixo!
Muito obrigado por ler até aqui, e até a próxima!
