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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656551987-0.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552349-1.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656551992-1.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656380809-2.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552020-3.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552025-4.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552031-5.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552036-6.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552042-7.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552048-8.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552054-9.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552060-10.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552066-11.gif%3Fauto%3Dformat&w=3840&q=75)
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 ."](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552072-12.gif%3Fauto%3Dformat&w=3840&q=75)
Ir para a aba de extensões
CTRL + SHIFT + X
view: show extensions
![Animação do atalho VS Code para abrir as extensões](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552078-13.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552084-14.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552091-15.gif%3Fauto%3Dformat&w=3840&q=75)
Ativa modo Zen
Mais espaço ainda?
CTRL + K ... Z
view: toggle zen mode
![Animação do atalho VS Code para avisar modo Zen](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552098-16.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552105-17.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552111-18.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552118-19.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552129-21.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552123-20.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552135-22.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552142-23.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552148-24.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552154-25.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552160-26.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552166-27.gif%3Fauto%3Dformat&w=3840&q=75)
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](/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1656552172-28.gif%3Fauto%3Dformat&w=3840&q=75)
Callback
Não esqueça de comentar a sua lista de atalhos para fazer parte do próximo post ;)