Atalhos VS Code: personalize e aumente sua produtividade

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

Ou acesse File > Preferences > Keyboard Shortcuts.

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

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

Animação do atalho VS Code de quebra de linha — Atalho 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

Animação mostrando o atalho VS Code para controlar a barra de rolagem — 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

Animação do atalho VS Code para duplicar linha — Atalho 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

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

Recuar linha

CTRL + [

editor.action.indentLines

Ou:

SHIFT + TAB

editor.action.indentLines

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

Avançar linha

CTRL + ]

editor.action.outdentLines

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

Ou:

CTRL + SHIFT + ]

editor.unfold

Animação mostrando o atalho VS Code de recolher e expandir um bloco de código — Atalho 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

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

Animação do atalho VS Code de selecionar trechos repetidos no código um a um — Animação do atalho 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

Animação mostrando o atalho VS Code de selecionar trechos repetidos no código todos de uma vez — Atalho 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

Animação do atalho VS Code para abrir o Explorer — Atalho 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

Animação mostrando o atalho VS Code para recolher pastar do Explorer — Atalho 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

Animação mostrando o atalho VS Code para abrir a busca geral — Atalho 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

Animação do atalho VS Code para abrir o Source Control — Atalho 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

Animação do atalho VS Code para executar um "git add ." — Atalho para executar um "git add ."

Ir para a aba de extensões

CTRL + SHIFT + X

view: show extensions

Animação do atalho VS Code para abrir as extensões — Atalho 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

Animação do atalho VS Code para abrir e fechar o painel lateral — Atalho 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

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

Ativa modo Zen

Mais espaço ainda?

CTRL + K ... Z

view: toggle zen mode

Animação do atalho VS Code para avisar modo Zen — Atalho 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

Animação do atalho VS Code para dividir o arquivo aberto em duas abas — Atalho 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

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

CTRL + 1

O segundo grupo de abas fica disponível em:

CTRL + 2

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

Animação do atalho VS Code para mudar o foco do cursor — Atalho 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

Animação do atalho VS Code para salvar todos os arquivos abertos — Atalho 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

Animação do atalho VS Code para criar um arquivo no Explorer — Atalho 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

Animação do atalho VS Code de criar uma pasta — Atalho 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

Animação do atalho VS Code para criar novo arquivo em branco — Atalho 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

Animação do atalho VS Code para trocar linguagem do documento — Atalho 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

Animação do atalho VS Code para visualizar arquivo markdown — Atalho 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

Animação do atalho VS Code para exibir e ocultar o terminal integrado — Atalho 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

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

Depois é só...

Fechar a aba do terminal

CTRL + SHIFT + W

terminal: kill the active terminal instance

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

Animação do atalho VS Code para alternar entre os terminais abertos — Atalho 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

Animação do atalho VS Code para maximizar e restaurar o terminal integrado — Atalho 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 ;)

35 atalhos customizados VS Code para aumentar sua produtividade