[Atalhos do VSCode] Um resumo das teclas úteis para aumentar drasticamente sua eficiência de trabalho (para Windows/Mac)

Olá! Apenas alguns meses atrás, eu não tinha absolutamente nenhum conhecimento de programação, mas com a ajuda da IA, consegui construir dois sites por conta própria.

Através desta experiência, senti profundamente quantas técnicas eu gostaria de ter conhecido antes. Entre elas, as "teclas de atalho" foram o que mais impactou diretamente minha eficiência no trabalho.

No início, eu as evitei, pensando: "São muitas para lembrar!" No entanto, as teclas verdadeiramente úteis não são tantas. Neste artigo, compartilharei as teclas de atalho escolhidas a dedo que eu genuinamente sinto que "não consigo mais programar sem" da minha experiência prática de desenvolvimento de sites, juntamente com minhas histórias pessoais.

Em vez de apenas uma lista de atalhos, vou detalhar "por que são convenientes" e "em que situações usá-los", como se estivesse ensinando a mim mesmo quando era iniciante. Agora, vamos melhorar drasticamente nossa velocidade de trabalho juntos!

Introdução: Para aqueles que lutam para lembrar atalhos

Quando você ouve "lista de teclas de atalho", você imagina uma tabela cheia de letras e símbolos e sente vontade de fechar a página silenciosamente? Eu também era assim.

Existem apenas dois segredos de como me tornei proficiente com atalhos:

1. Não tente aprender tudo de uma vez. Primeiro, tente usar conscientemente apenas um dos "atalhos de nível divino" introduzidos neste artigo, mesmo que seja apenas por um dia.
2. Sempre pense: "Não há uma maneira mais fácil de fazer isso?" Então, faça essa pergunta a uma IA (como o ChatGPT) em termos específicos, como: "Existe um atalho no VSCode para alterar todas as instâncias da mesma palavra de uma vez?"

Este artigo seleciona cuidadosamente apenas os atalhos verdadeiramente úteis que aprendi com a ajuda da IA. Agora, vamos dar o primeiro passo.

Os Essenciais Absolutos! Os 5 Melhores "Atalhos de Nível Divino" para Turbinar sua Programação

Entre os inúmeros atalhos, selecionei cinco "atalhos de nível divino" que uso diariamente — não, dezenas de vezes por hora. Apenas aprender estes irá transformar sua experiência de programação.

Nº 1: Selecione e corrija a mesma palavra em um instante! Edição de múltiplos cursores

Windows: Ctrl + D
Mac: Cmd + D

Este é o primeiro atalho que aprendi que me surpreendeu. Ele permite que você selecione várias instâncias da mesma palavra ou código em uma página e edite todas de uma vez.

Minha Experiência: Suponha que você esteja criando uma lista de produtos em HTML e queira alterar um nome de classe de <div class="card"> para <div class="product-card">. Eu costumava usar a função de pesquisar e substituir um por um. Mas depois de aprender este atalho, eu apenas clico duas vezes em "card" para selecioná-lo, depois pressiono Ctrl + D (ou Cmd + D no Mac) quantas vezes forem necessárias. Os cursores se multiplicam, e não consigo esquecer o choque de conseguir corrigir todos os nomes de classe com uma única digitação.

Dica Profissional: Clicar duas vezes na palavra que você quer corrigir antes de usar este atalho torna a seleção mais precisa e rápida.

Nº 2: Chega de copiar e colar! Mova linhas inteiras

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

Você pode mover a linha atual ou várias linhas selecionadas para cima ou para baixo. Chega de passos tediosos de selecionar uma linha → Ctrl + X → clicar no destino → Ctrl + V.

Minha Experiência: Este atalho é incrivelmente poderoso ao reordenar itens de lista <li> em HTML ou organizar propriedades de CSS. Ele elimina completamente problemas de indentação e exclusões acidentais que frequentemente acontecem ao cortar e colar código. É verdadeiramente uma "varinha mágica" que permite que você altere a estrutura do seu código de forma segura e intuitiva.

Nº 3: Duplique linhas em um instante

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

Isso duplica a linha atual acima ou abaixo. Reduz drasticamente seu tempo de trabalho quando você precisa escrever código semelhante repetidamente.

Minha Experiência: Por exemplo, quando você quer produzir em massa elementos HTML com a mesma estrutura, como menus de navegação ou itens de lista. Eu costumava copiar uma linha, pressionar enter, colar e repetir. Com este atalho, apenas pressionar repetidamente Shift + Alt + ↓ completa o número necessário de itens de lista em pouco tempo. Combinado com "Mover Linha" do Nº 2, sua velocidade de programação aumentará várias vezes.

Nº 4: Abra arquivos de qualquer lugar! Explorador de Arquivos

Windows: Ctrl + P
Mac: Cmd + P

Pressionar este atalho abre uma caixa de pesquisa na parte superior da tela, permitindo que você abra instantaneamente qualquer arquivo em seu projeto digitando seu nome. Você não precisa mais procurar arquivos no explorador do lado esquerdo.

Minha Experiência: À medida que você se acostuma com o desenvolvimento de sites, o número de arquivos aumenta para dezenas ou até centenas. Então, torna-se um incômodo apenas encontrar um arquivo, pensando: "Em que pasta eu coloquei aquele arquivo CSS...?" Desde que aprendi Ctrl + P, o tempo que passo procurando arquivos tornou-se quase zero. Digitar style sugere style.css. Realmente permite codificar sem interromper sua linha de pensamento.

Nº 5: Tudo começa aqui. A Paleta de Comandos

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

Semelhante ao Nº 4, mas este permite que você pesquise e execute não apenas arquivos, mas "todas as funções (comandos)" do VSCode. Mesmo que você esqueça uma tecla de atalho, pode simplesmente digitar o nome da operação que deseja executar (por exemplo, format ou theme), e o VSCode invocará essa função para você.

Minha Experiência: Quando pensei: "Espere, qual era o atalho para formatar o código de forma organizada?", eu pressionei Ctrl + Shift + P, digitei format e encontrei o comando "Formatar Documento". Contanto que você se lembre deste, você pode se virar mesmo que esqueça outros atalhos — é verdadeiramente o "último recurso". Quando instalo uma nova extensão, este é o primeiro lugar que vou para ver quais novos recursos foram adicionados.

[Avançado] Criando seu ambiente definitivo: Alterando as associações de teclas

O ótimo do VSCode é que você pode personalizar as teclas de atalho ao seu gosto. Se você sentir que "este atalho é útil, mas as teclas são difíceis de pressionar", vamos alterá-lo.

Aqui, mostrarei como abrir o arquivo de configuração, keybindings.json, e compartilharei alguns exemplos de personalização que achei úteis. Apenas copiando e colando, você pode tornar seu VSCode ainda mais fácil de usar.

1. Abra keybindings.json

1. Primeiro, abra a Paleta de Comandos. (Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P)
2. Na caixa de pesquisa, digite keybindings.
3. Nas sugestões, selecione "Preferências: Abrir Atalhos de Teclado (JSON)" e pressione Enter.

Isso abrirá um arquivo de configurações chamado keybindings.json. Ele pode dizer apenas [] no início. Escreveremos nossas configurações dentro desses colchetes.

2. Apenas Copie e Cole! Configurações de Personalização Recomendadas

Abaixo estão minhas personalizações recomendadas. Tente copiar todo este bloco de código e colá-lo dentro dos [] do seu keybindings.json.

[
    // {
    //   "key": "tecla original",
    //   "command": "comando para executar",
    //   "when": "habilitar apenas sob uma condição específica"
    // },
    
    // Exemplo 1: Tornar o atalho para abrir o terminal mais fácil de pressionar
    // O `Ctrl + `` padrão é difícil de pressionar, então vamos mudá-lo
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // Exemplo 2: Facilitar o fechamento do editor (aba)
    // Sobrescrever o `Ctrl+W` padrão
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // O padrão para Mac é fácil de pressionar, então está bom como está
        "command": "workbench.action.closeActiveEditor"
    }
]

Explicação:

• Exemplo 1 é um atalho para abrir o "Terminal" para executar comandos dentro do VSCode. Como a tecla padrão está em uma posição um pouco desajeitada, estamos mudando para uma tecla mais intuitiva.
• Exemplo 2 é um atalho para fechar o arquivo atualmente aberto. Atribuí-lo a uma tecla semelhante a fechar uma aba do navegador torna mais fácil para seus dedos lembrarem.

Desta forma, você pode especificar sua combinação de teclas preferida na parte key e a função que deseja atribuir na parte command. Você pode descobrir quais commands estão disponíveis na documentação oficial de associação de teclas ou pesquisando na Paleta de Comandos. Eu recomendo fortemente que você construa seu próprio ambiente de atalhos definitivo.

Observação: keybindings.json é um arquivo em formato JSON. Uma vírgula , é necessária após cada }, exceto para o último item, então tenha cuidado com erros de sintaxe ao editar. Se ocorrer um erro, o VSCode o apontará, então siga as instruções para corrigi-lo.

Conclusão: Um novo mundo de programação aberto por atalhos

Desta vez, apresentei as teclas de atalho do VSCode verdadeiramente úteis que tenho usado desde que era um programador iniciante. Vamos rever os 5 melhores atalhos de nível divino mais uma vez.

• Selecione e corrija a mesma palavra: Ctrl + D / Cmd + D
• Mover linha: Alt + ↑ / ↓ / Option + ↑ / ↓
• Duplicar linha: Shift + Alt + ↑ / ↓ / Shift + Option + ↑ / ↓
• Abrir arquivo: Ctrl + P / Cmd + P
• Abrir Paleta de Comandos: Ctrl + Shift + P / Cmd + Shift + P

Você não precisa aprender todos de uma vez. Comece com o Nº 1, Ctrl + D (Cmd + D), e tente usá-lo conscientemente em sua programação de hoje. Quando seus dedos se lembrarem do movimento, sua velocidade de trabalho sem dúvida terá melhorado.

As teclas de atalho são ferramentas poderosas para traduzir suas ideias diretamente em código sem interromper sua linha de pensamento. Eu ficaria muito feliz se este artigo servisse como o primeiro passo em sua confortável vida de programação.