DEV Community

Cover image for 35 atalhos customizados VS Code para aumentar sua produtividade
deMenezes
deMenezes

Posted on • Originally published at demenezes.dev

35 atalhos customizados VS Code para aumentar sua produtividade

#atalhos #vscode #shortcut #personalizar

Atalhos vs code para você usar enquanto escreve código, para navegar pelo VS Code e também manipular o terminal integrado.

Essa lista de atalhos do VS Code é o tipo de post que ficará desatualizado muito rápido.

Praticamente toda semana descubro novos atalhos, para incrementar meu fluxo de trabalho.

Alguns desses atalhos são padrão do VS Code, porém a maioria eu criei através do Gerenciador de Atalhos.

E como acessar o Gerenciador de Atalhos? Aqui vai o primeiro item da lista:

CTRL + K + S
Enter fullscreen mode Exit fullscreen mode

Ou acesse File > Preferences > Keyboard Shortcuts.

Animação mostrando o atalho VS Code para abrir o gerenciador de atalhos

Logo abaixo do atalho, vou deixar o nome dele para você pesquisar no Gerenciador de Atalhos.

Veja a lista:

Atalhos VS Code para escrever código

Aqui é para auxiliar o momento mão na massa mesmo.

Quebrar linha

Ative essa função para nunca mais precisar ver aquela barra de rolagem vertical no código:

ALT + Z editor.action.toggleWordWrap
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code de quebra de linha

Controlar a barra de rolagem

Esse atalho simula o uso do scroll do mouse.

Pode ser muito útil não precisar alternar entre o teclado e mouse com a mão de forma repetida:

CTRL + Seta para cima/baixo scrollLineDown scrollLineUp
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code para controlar a barra de rolagem

Duplicar linha

Muito mais simples do que usar o tradicional CTRL + C e CTRL + V.

Ideal para quando um código repete de forma quase idêntica:

CTRL + SHIFT + Seta para cima/baixo editor.action.duplicateSelection
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para duplicar linha

Mover linha atual

Muito mais simples do que usar o tradicional CTRL + X e CTRL + V.

ALT + Seta para cima/baixo editor.action.moveLine
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code de mover linha

Recuar linha 

CTRL + [ editor.action.indentLines
Enter fullscreen mode Exit fullscreen mode

Ou:

SHIFT + TAB editor.action.indentLines
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code de recuar e avançar a linha

Avançar linha 

CTRL + ] editor.action.outdentLines
Enter fullscreen mode Exit fullscreen mode

Se o cursor estiver no início da linha, basta teclar tab que terá o mesmo efeito.

Recolher/expandir bloco de código

Também é possível fazer isso com o mouse, mas existe um atalho para facilitar.

Em vez de clicar naquelas setas do VS Code que ficam entre o número da linha e o código, use:

CTRL + SHIFT + [ editor.fold
Enter fullscreen mode Exit fullscreen mode

Ou:

CTRL + SHIFT + ] editor.unfold
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code de recolher e expandir um bloco de código

Se precisar expandir todos os blocos do documento de uma vez, existe outro "atalho" para isso:

CTRL + A CTRL + X CTRL + V
Enter fullscreen mode Exit fullscreen mode

Ou seja, basta recortar todo documento e colar de volta.

Selecionar trechos repetidos no código um a um

Selecione o primeiro trecho, então pressione o atalho abaixo para acessar os próximos:

CTRL + D editor.action.addSelectionToNextFindMatch
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code de selecionar trechos repetidos no código um a um

Outra forma é você clicar ao longo do código com a tecla alt pressionada. Assim irá criar vários cursores em pontos diferentes. Depois, basta você digitar o que for preciso.

Selecionar trecho repetido no código todos de uma vez

Selecione o primeiro trecho, então pressione o atalho abaixo:

CTRL + F2 change all occurrences
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code de selecionar trechos repetidos no código todos de uma vez

Depois dessa série de atalhos do editor, veja agora como navegar no VS Code sem precisar do mouse:

Atalhos VS Code para navegar no programa

Ir para a aba Explorer

As abas no painel à esquerda são muito importantes.

Talvez a principal delas, Explorer, que mostra a árvore de arquivos, é acessível via:

CTRL + E view: show explorer
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para abrir o Explorer

Recolher/minimizar todas as pastas no explorer

Isso serve para você ter uma visão das pastas que estão na raiz do projeto:

CTRL + M collapse folders in explorer
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code para recolher pastar do Explorer

Ir para a aba de busca geral

Todo e qualquer trecho de código que quero encontrar no projeto eu coloco aqui:

CTRL + SHIFT + F search: find in files
Enter fullscreen mode Exit fullscreen mode

Animação mostrando o atalho VS Code para abrir a busca geral

Ir para aba do Git

É possível ter um rápido acesso ao Git com esse atalho.

Para ver:

  • Seus arquivos alterados
  • Não commitados
  • Arquivos em stage
  • Fazer git pull
  • Fazer git push

Use:

CTRL + G view: focus on source control view
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para abrir o Source Control

Executar comando "git add ."

Quer colocar todas as alterações atuais em stage com um comando?

ALT + A git: stage all changes
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para executar um

Ir para a aba de extensões 

CTRL + SHIFT + X view: show extensions
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para abrir as extensões

Depois disso, é só digitar o nome da extensão que queira instalar, ou que já esteja instalada.

Abrir/fechar painel à esquerda

Esse atalho não considera qual dos painéis está aberto.

Precisa de um espaço maior para visualizar o código?

CTRL + B view: toggle primary side bar visibility
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para abrir e fechar o painel lateral

Ativar tela cheia

Quer ocultar algumas barras para ter mais espaço?

Então basta pressionar:

F11 view: toggle full screen
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para ativar tela cheia

Ativa modo Zen

Mais espaço ainda?

CTRL + K ... Z view: toggle zen mode
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para avisar modo Zen

MAS CALMA!

Para sair desse modo repita o atalho, ou pressione F11.

Dividir arquivo em duas abas

Isso é muito útil, quando você precisa ver o mesmo arquivo em linhas muito distantes:

CTRL + \ view: split editor
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para dividir o arquivo aberto em duas abas

Mudar foco do cursor

Esse atalho é muito útil quando você trabalho com mais de uma aba aberta lado a lado.

Se quiser focar no painel à esquerda, use:

CTRL + 0 view: focus into primary side bar
Enter fullscreen mode Exit fullscreen mode

Agora, se quiser acessar o primeiro grupo de abas aberto, então pressione:

CTRL + 1
Enter fullscreen mode Exit fullscreen mode

O segundo grupo de abas fica disponível em:

CTRL + 2
Enter fullscreen mode Exit fullscreen mode

Já o terceiro grupo de... bom, você entendeu!

Animação do atalho VS Code para mudar o foco do cursor

Salvar todos arquivos abertos

Muitos arquivos não salvos abertos? Já é sexta-feira 17:59?

Vai fundo:

CTRL + K ... S save all
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para salvar todos os arquivos abertos

Criar arquivo na pasta atual do explorer

Quer escolher onde irá salvar o novo arquivo, antes de escrever as primeiras linhas dele?

CTRL + N file: new file
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para criar um arquivo no Explorer

Criar pasta diretamente no Explorer

Semelhante ao comando anterior, mas agora com diretório:

CTRL + SHIFT + N file: new folder
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code de criar uma pasta

Criar arquivo em nova aba em branco

Quer escrever as primeiras linhas do novo arquivo, antes de escolher onde irá salvar ele?

CTRL + ALT + N create: new file
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para criar novo arquivo em branco

Trocar linguagem do documento

Usou o atalho acima para criar um arquivo numa nova aba?

Esse atalho é super útil nesse momento, pois sem uma extensão de arquivo, o VS Code não sabe como colorir o código. Para isso, use:

CTRL + K ... L change language mode
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para trocar linguagem do documento

Após pressionar esse atalho, digite o nome da linguagem, e seja feliz.

Visualizar arquivo em markdown

Esse atalho depende do seu plugin de markdown, mas a funcionalidade é sempre a mesma:

CTRL + M ... D markdown preview
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para visualizar arquivo markdown

Atalhos VS Code para usar no terminal integrado

Abrir/fechar painel do terminal

Esse comando de toggle ajuda muito no dia a dia, pois o terminal só fica aberto quando você precisa dele:

CTRL + J view: toggle panel visibility
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para exibir e ocultar o terminal integrado

Dividir terminal em mais telas

Sabe quando o ambiente de desenvolvimento já está rodando, mas você precisa executar algo tipo um git status?

Divida o terminal assim:

CTRL + SHIFT + 5 terminal: split terminal
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para dividir o terminal em duas telas

Depois é só...

Fechar a aba do terminal 

CTRL + SHIFT + W terminal: kill the active terminal instance
Enter fullscreen mode Exit fullscreen mode

Alternar entre os terminais abertos

Mas caso ainda precise retornar ao terminal anterior, sem fechar o novo:

ALT + Seta para a esquerda/direita terminal: focus previous terminal in terminal group terminal: focus next terminal in terminal group
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para alternar entre os terminais abertos

Maximizar/restaurar painel no terminal

Isso é de grande ajuda quando você quer ver o código e o terminal ao mesmo tempo:

ALT + J view: toggle maximized panel
Enter fullscreen mode Exit fullscreen mode

Animação do atalho VS Code para maximizar e restaurar o terminal integrado

Callback

Não esqueça de comentar a sua lista de atalhos para fazer parte do próximo post ;)

Top comments (0)