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).

🗒 Observação:

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

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.

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre a Paleta de Comandos

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):

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre comandos do GitLens disponíveis na Paleta de Comandos

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre seleção múltipla

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre busca

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre temas

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.