Atalhos VS Code: O Segredo da Produtividade em 2024

No mundo frenético da programação, a busca por eficiência e agilidade é constante. E se existe uma ferramenta que pode te ajudar a alcançar a produtividade máxima, essa ferramenta é o VS Code. Combinado com atalhos estratégicos, o VS Code se torna um verdadeiro turbo para o seu workflow.

Neste post detalhado, você vai descobrir atalhos essenciais e avançados que transformarão sua experiência no VS Code e te levarão ao próximo nível de produtividade. Prepare-se para se tornar um ninja do código!

Sumário

• Domine a Navegação
• Edite com Precisão
• Manipule o Código
• Crie a Estrutura Básica do HTML
• Crie Elementos em Massa com Digitação Direta
• Dicas Extras

Domine a Navegação:

• Ctrl + Shift + P: Abra o Command Palette para executar comandos rapidamente. Pesquise por “ir para” para encontrar arquivos e pastas específicos.
• Ctrl + G: Vá para uma linha específica no código. Digite o número da linha seguido por Enter.
• Ctrl + F: Pesquise por qualquer palavra ou frase no código. Utilize as opções avançadas para refinar sua pesquisa, como “match case” ou “whole word”.
• Alt + Shift + Left/Right: Navegue entre arquivos abertos com facilidade. Utilize as setas para navegar entre as abas abertas no editor.
• Ctrl + Tab: Alterne entre as guias abertas no editor. Ideal para trabalhar em vários arquivos simultaneamente.

Edite com Precisão:

• Ctrl + Shift + Z: Desfaça várias ações de uma só vez. Perfeito para reverter erros rapidamente.
• Ctrl + Y: Refaça a última ação desfeita. Útil para recuperar ações desfeitas acidentalmente.
• Ctrl + D: Duplique a linha de código selecionada. Duplique rapidamente blocos de código para agilizar seu trabalho.
• Ctrl + Backspace: Exclua a palavra anterior. Elimine palavras indesejadas com apenas um atalho.
• Ctrl + Shift + Backspace: Exclua a linha de código selecionada. Apague linhas inteiras de código de forma eficiente.
• Ctrl + X: Recorte o código selecionado. Copie e mova partes do código para outros locais.
• Ctrl + C: Copie o código selecionado. Duplique trechos de código para reutilização em outros pontos do projeto.
• Ctrl + V: Cole o código copiado ou recortado. Insira o código em qualquer lugar do editor.

Manipule o Código:

• Ctrl + K, Ctrl + X: Recorte e cole o código selecionado, preservando a formatação. Ideal para mover blocos de código sem perder a organização.
• Ctrl + Shift + K, Ctrl + Shift + X: Recorte e cole o código selecionado sem formatação. Mantenha a consistência da formatação do código ao movê-lo.
• Ctrl + Alt + Down: Selecione o bloco de código atual. Selecione rapidamente um bloco de código inteiro para editar ou excluir.
• Ctrl + Shift + Alt + Down: Selecione todas as ocorrências da palavra ou frase selecionada. Encontre e modifique todas as instâncias de um texto específico no código.

Crie a Estrutura Básica do HTML

• Diga Adeus à Digitação Manual: Esqueça de digitar toda a estrutura básica do HTML toda vez que iniciar um novo documento. Utilize o atalho mágico do VS Code para criar a estrutura HTML completa em um instante.

Exemplo:

1. Digite ! e pressione Enter.
2. O VS Code exibirá o snippet completo da estrutura básica do HTML

Crie Elementos em Massa com Digitação Direta:

• Dica de Produtividade: Crie múltiplas cópias de um elemento HTML diretamente no editor, sem necessidade de seleção, utilizando o recurso de expansão de snippets do VS Code.

Exemplo:

1. Digite div*4 no editor e pressione Tab.
2. O VS Code criará 4 elementos <div> em branco, prontos para serem preenchidos com seu conteúdo.

Observações:

• Essa técnica é ideal para criar rapidamente estruturas básicas de elementos HTML, como listas, menus e galerias.
• Você pode ajustar o número de cópias que deseja criar alterando o valor após o asterisco. Por exemplo, div*10 criará 10 elementos <div>.
• Essa técnica funciona com diversos tipos de elementos HTML, como <div>, <p>, <li>, <img>, entre outros.
• Utilize essa dica para agilizar a criação de layouts HTML repetitivos e economizar tempo.

Crie Estruturas Hierárquicas em um Piscar de Olhos:

• Dica Ninja: Utilize o poder dos snippets do VS Code para criar estruturas HTML aninhadas complexas com apenas algumas teclas.

Exemplo:

1. Digite div > ul > li*3 e pressione Tab.
2. O VS Code criará a seguinte estrutura aninhada:

Dicas Extras:

• Ctrl + Enter: Insira uma nova linha abaixo da linha atual.
• Shift + Enter: Insira uma nova linha acima da linha atual.
• Ctrl + Shift + [\ /]: Indente ou desindente o código selecionado.
• Ctrl + Home / End: Navegue para o início ou fim do arquivo aberto.
• Ctrl + Shift + Home / End: Navegue para o início ou fim do documento inteiro (considerando todos os arquivos abertos).
• Alt + Z: Ative/desative o word wrap para ajustar o texto automaticamente ao tamanho da janela do editor.

Em suma, esses são os principais atalhos do VS Code que você precisar conhecer e dominar em 2024!

Recursos Adicionais

• O que é programação e por que aprender?
• Como Programar em 2024: Guia Completo para Iniciantes
• Qual linguagem de programação escolher em 2024?