3 Atalhos Essenciais do Visual Studio Code Que Você Precisa Conhecer

Aprenda esses atalhos e economize tempo no seu dia a dia!

3 Atalhos Essenciais do Visual Studio Code Que Você Precisa Conhecer

Photo by Juan Gomez on Unsplash

Como alguém que gosta - muito - do Visual Studio Code e que usa esse editor de código diariamente há, pelo menos, 5 anos, eu posso afirmar que usá-lo de uma maneira produtiva, dominando essa ferramenta e suas possibilidades pode trazer benefícios que vão desde a otimização do seu tempo até seu crescimento profissional. Inclusive, eu gosto de afirmar que como desenvolvedores (especialmente web e Front-end), temos a obrigação de conhecer profundamente duas ferramentas: o editor de código e o browser.

É por isso que, com esse artigo, iniciamos uma série de publicações onde pretendo compartilhar minhas preferências, dicas, atalhos, extensões e novidades do Visual Studio Code, com o objetivo de ajudá-lo a usar esse recurso com maestria e tornar-se referência na sua equipe e/ou empresa. Particularmente, considero isso importantíssimo porque pode fazer parte do seu branding pessoal e, assim como aconteceu comigo, você passar a ser reconhecido como expert na ferramenta, ser aquela pessoa que todos chamam quando precisam de ajuda, ou até mesmo começar a compartilhar as novidades que descobriu com seu time.

Sem perder mais tempo - já que teremos muitos artigos pela frente -, gostaria de compartilhar os atalhos que eu mais utilizo ao longo do meu dia, com uma observação: para esses atalhos, estou utilizando um Macbook (macOS) e, por isso, a tecla principal será o Cmd (Cmd).

🗒
Caso você esteja utilizando Windows ou Linux, provavelmente você precisará utilizar o Ctrl (Ctrl).

Diagrama ilustrando que a tecla Command (⌘) no macOS é equivalente à tecla Control (Ctrl) no Windows/Linux.

Mac ícones criados por Freepik - Flaticon

Comandos Básicos

Assim como na programação, antes de aprender o framework mais recente ou querer entender detalhadamente como uma biblioteca funciona, o ideal é conhecer os fundamentos, melhorar a base, estar familiarizado e, só então, passar para o próximo nível. Confira a seguir alguns comandos simples, mas que precisam fazer parte das suas habilidades:

  • Cmd + A: permite que você selecione todo o conteúdo do arquivo.

  • Cmd + S: salva suas alterações recentes.

  • Cmd + : move o cursor para o final da linha.

  • Cmd + : move o cursor para o início da linha.

  • Cmd + ← Backspace: apaga a linha inteira.

  • Cmd + C: copia o conteúdo selecionado para a área de transferência.

  • Cmd + V: cola o conteúdo disponível na área de transferência.

Um trecho de código JavaScript. Ele inclui uma função  que registra a mensagem "## CL ## Exemplo" no console. O código é configurado para ignorar a regra ESLint "no-console". Além disso, a função  é chamada no final, seguida por outra instrução que registra a mesma mensagem no console. Comentários de docstring no topo atribuem o exemplo a "manualdofront" em 2024. No final, há uma imagem animada mostrando alguns atalhos no Visual Studio Code.

As estrelas do artigo

Finalmente! Depois de entendermos a importância de comandos simples como “Copiar e Colar”, está na hora de listar os 3 comandos que eu mais gosto de utilizar no VSCode.

Cmd + Shift + P

Vou começar com esse não tanto por ser o que eu, particularmente, mais utilizo; mas sim porque se você tiver que encerrar esse artigo decorando apenas um comando, que seja esse. O principal motivo é que essa combinação abre o que chamamos de Paleta de Comandos e, através dela, você poderá executar uma série de comandos. Veja na imagem a seguir, dois exemplos: o primeiro formatando um arquivo e o segundo recarregando todo o editor:

Um arquivo JSON mal formatado está aberto no Visual Studio Code. O conteúdo inclui um comentário observando que é um arquivo de exemplo, um aviso de copyright atribuído a @manualdofront para o ano de 2024, e três pares chave-valor: ,  e .

E a parte mais legal é que também será possível acessar, através desse comando, todos os comandos que as extensões que você instalou disponibilizam (no exemplo abaixo, eu abro a página inicial do GitLens):

Uma captura de tela da janela do editor Visual Studio Code com código escrito no formato JSON. O objeto JSON contém as chaves: "nome", "artigo" e "ano" com os valores "Manual do Front (com espaços demais)", "3 atalhos do VSCode" e "2024", respectivamente. Há também um comentário em português no topo do código. Várias barras de ferramentas e ícones do editor estão visíveis em uma interface com tema escuro.

Vale lembrar que muito provavelmente, todos os comandos que eu demonstrei aqui através da Paleta de Comandos também possuem um atalho próprio. Caso você - assim como eu - goste desse tipo de desafio, eu encorajo você a decorar aqueles dos quais gostar mais. Mas até lá, esse comando já será muito útil para você!

Cmd + D

Sabe quando você criou a variável principal do seu script e acabou notando que o nome não ficou tão descritivo (mas agora ela já é usada em 5 lugares)? Ou quando você quer saber se aquela propriedade está sendo utilizada em outros lugares do mesmo arquivo? Ou quando você precisa mudar uma palavra de camelCase para PascalCase? Nesses momentos, eu realmente sou fã desse comando. Veja:

Uma captura de tela de um editor de código exibindo código TypeScript que define duas constantes, uma função chamada "soma" para adicionar dois números, e uma função "main" para calcular e registrar o resultado, que é a soma das duas constantes. O texto de saída "o resultado da soma é: 2" está incluído na instrução de log do console.

Eu sei que também existe um arquivo para substituir todas as ocorrências, caso você prefira fazer tudo de uma vez só - mas esse eu não vou contar. Qual tal você colocar a resposta desse desafio nos comentários? 👀

Cmd + Shift + F

A terceira combinação de teclas vai para aqueles que já precisaram encontrar um exemplo parecido em um projeto muito grande ou, talvez, os arquivos que utilizam certa função em uma aplicação JavaScript e não sabiam direito como fazer isso (ou, talvez, tiveram que recorrer ao mouse). Com esse comando, você vai poder buscar um termo em todos os arquivos do seu Visual Studio Code (inclusive, caso você tenha criado um workspace, essa busca será aplicada a todos os diretórios adicionados - mas acho que isso pode ser assunto em outro artigo, né?). Confira abaixo uma busca aplicada em 7 pastas, com diversos arquivos dentro:

Captura de tela da interface do editor Visual Studio Code com a barra lateral exibindo um projeto chamado "MyAluraNotes." O projeto contém vários arquivos e pastas, incluindo introdução ao Elasticsearch, imagens, introdução ao PHP, vários arquivos JavaScript, arquivos React, um arquivo .gitignore e README.md. A área central sugere ações como exibir todos os comandos e ir para um arquivo.

Bônus

E é óbvio que, para você que chegou até o final deste artigo, haveria um bônus! 🎁 Inclusive, essa é uma cultura que eu quero criar por aqui, entre a gente: você sempre pode esperar de mim mais do que o combinado (nesse caso, prometi 3 atalhos essenciais, mas ao todo entreguei mais de 10) e, em contrapartida, eu só espero que você aplique o que for útil no seu dia a dia e me conte sobre isso (curtindo, comentando ou recomendando esse blog para os seus amigos), combinado?

Cmd + K Cmd + T

Como todo desenvolvedor que se preza, é indispensável (ironia!) que você tenha alguns temas para trocar de vez em quando, e também consiga fazer isso o mais rápido possível! Brincadeiras à parte, particularmente, eu tenho ~5 temas que são meus preferidos e, quando sinto que preciso de alguma pequena “mudança”, costumo recorrer à essa troca (e, sem dúvidas, eu faço isso através de atalhos). Configura alguns deles na imagem abaixo:

Uma captura de tela de um editor de código TypeScript mostrando um script simples que declara duas constantes (`primeiroNumero` e `segundoNumero`), define uma função de soma e registra a soma das duas constantes no console. O script inclui comentários e metadados.

E aí, já conhecia esses atalhos? Já utiliza algum? Conhece algum outro que eu devia ter mencionado aqui? Me conta nos comentários, ou me chama no LinkedIn! 👇🏼

Escrito com 💙 e 🎯 por Manual do Front.