plaintextintermediate160 snippets

VS Code Turbo: Atalhos para Codar sem Tocar no Mouse

Largue o mouse. A diferença entre um Junior e um Sênior muitas vezes é a velocidade de navegação. Domine os atalhos de refatoração, multi-cursor e terminal integrado. Aumente seu output em 50% e pare de perder tempo procurando menus.

Seções10

⌨️ Atalhos Essenciais

21 snippets

Navegando rapidamente, editando código, aumentando produtividade.

Quick Open

Abre a paleta de comandos "Quick Open" para navegação rápida e abertura de arquivos, permitindo buscar por nome de arquivo no projeto atual. Útil para localizar e abrir arquivos rapidamente sem usar o explorador de arquivos.

plaintext

Ctrl + P

Command Palette

Exibe a "Command Palette" (Paleta de Comandos), que permite acessar todas as funcionalidades do VS Code, incluindo comandos de extensão, configurações e atalhos, por meio de busca textual. Essencial para executar ações sem memorizar atalhos específicos.

plaintext

Ctrl + Shift + P

Abrir Configurações

Abre o editor de configurações do VS Code, onde é possível personalizar o comportamento do editor, temas, atalhos e extensões, tanto globalmente (User Settings) quanto por workspace (Workspace Settings).

plaintext

Ctrl + ,

Alternar Sidebar

Exibe ou oculta a barra lateral (Sidebar) do VS Code, que contém o Explorer, Search, Source Control, Run and Debug e Extensions. Ajuda a maximizar o espaço do editor.

plaintext

Ctrl + B

Abrir Terminal Integrado

Abre ou alterna o foco para o terminal integrado do VS Code, permitindo executar comandos de shell diretamente no editor. Se o terminal estiver fechado, ele será aberto; caso contrário, será focado ou ocultado.

plaintext

Ctrl + `

Mostrar/Ocultar Painel Inferior

Mostra ou oculta o painel inferior (Panel), que pode conter o Terminal, Output, Debug Console e Problems. Útil para gerenciar o espaço da interface.

plaintext

Ctrl + J

Dividir Editor

Divide o editor ativo em dois grupos de editor, permitindo visualizar e trabalhar em múltiplos arquivos lado a lado na mesma janela. Pode ser repetido para criar mais divisões.

plaintext

Ctrl + \

Alternar entre Grupos de Editor

Alterna o foco entre os grupos de editor abertos, permitindo navegar rapidamente entre diferentes layouts de arquivos no editor. Use 1 para o primeiro grupo, 2 para o segundo, e assim por diante.

plaintext

Ctrl + 1/2/3

Selecionar Próxima Ocorrência

Seleciona a próxima ocorrência da palavra ou seleção atual. Permite adicionar múltiplos cursores para edição simultânea de ocorrências idênticas.

plaintext

Ctrl + D

Selecionar Todas as Ocorrências

Seleciona todas as ocorrências da palavra ou seleção atual no arquivo, adicionando um cursor em cada uma. Ideal para refatorações em massa ou renomear variáveis rapidamente.

plaintext

Ctrl + Shift + L

Mover Linha para Cima/Baixo

Move a linha (ou linhas selecionadas) para cima ou para baixo, alterando sua posição no código. Útil para reordenar blocos de código sem copiar e colar.

plaintext

Alt + ↑/↓

Copiar Linha para Cima/Baixo

Copia a linha (ou linhas selecionadas) e insere a cópia acima ou abaixo da posição original. Facilita a duplicação de linhas de código.

plaintext

Alt + Shift + ↑/↓

Deletar Linha

Deleta a linha inteira onde o cursor está posicionado ou as linhas selecionadas. Uma forma rápida de remover código.

plaintext

Ctrl + Shift + K

Comentar/Descomentar Linha

Alterna o comentário de linha para a linha atual ou para as linhas selecionadas. Suporta a sintaxe de comentário da linguagem do arquivo (ex: `//` para JavaScript, `#` para Python).

plaintext

Ctrl + /

Alternar Comentário de Bloco

Alterna o comentário de bloco para a seleção atual. Suporta a sintaxe de comentário de bloco da linguagem do arquivo (ex: `/* ... */` para JavaScript, `` para HTML).

plaintext

Ctrl + Shift + /

Ir para Linha

Abre uma caixa de diálogo para ir diretamente para um número de linha específico no arquivo atual. Útil para navegação rápida em arquivos grandes.

plaintext

Ctrl + G

Ir para Símbolo (Arquivo)

Abre a paleta de comandos "Go to Symbol in File" para navegar rapidamente entre símbolos (funções, classes, variáveis) definidos no arquivo atual. Digite `:` seguido do nome do símbolo.

plaintext

Ctrl + P + :

Ir para Símbolo (Workspace)

Abre a paleta de comandos "Go to Symbol in Workspace" para navegar rapidamente entre símbolos (funções, classes, variáveis) definidos em todo o workspace. Útil para explorar a estrutura de um projeto.

plaintext

Ctrl + Shift + O

Ir para Definição

Navega para a definição do símbolo sob o cursor. Por exemplo, se o cursor estiver sobre o nome de uma função, ele o levará para onde essa função foi definida. Essencial para entender o código.

plaintext

F12

Ir para Definição ao Lado

Abre a definição do símbolo sob o cursor em um painel lateral (Peek Definition), permitindo visualizar o código da definição sem sair do arquivo atual. Útil para referência rápida.

plaintext

Shift + F12

Ir para Implementação

Navega para a implementação de uma interface ou método abstrato. Útil em linguagens orientadas a objetos para encontrar onde um contrato é realmente implementado.

plaintext

Ctrl + F12

🎯 Multi-Cursor e Seleção

10 snippets

Editando múltiplas linhas, refatoração, edições em massa.

Adicionar Cursor em Posição

Adiciona um novo cursor na posição do clique do mouse, permitindo editar múltiplos locais no arquivo simultaneamente. Fundamental para edições paralelas e refatorações.

plaintext

Alt + Click

Adicionar Cursor Acima/Abaixo

Adiciona um novo cursor na linha acima ou abaixo da posição atual, mantendo o alinhamento vertical. Ideal para adicionar cursores em linhas consecutivas.

plaintext

Ctrl + Alt + ↑/↓

Desfazer Último Cursor

Remove o último cursor adicionado, útil para corrigir erros ao adicionar múltiplos cursores ou para refinar a seleção.

plaintext

Ctrl + U

Sair do Modo Multi-Cursor

Sai do modo multi-cursor, deixando apenas um cursor ativo na última posição. Também pode ser usado para fechar menus e paletas.

plaintext

Esc

Seleção Retangular (Box)

Realiza uma seleção retangular ou em bloco, permitindo selecionar e editar colunas de texto. Útil para manipular dados tabulares ou blocos de código alinhados.

plaintext

Shift + Alt + Arrastar

Seleção Colunar Acima/Abaixo

Expande ou retrai uma seleção colunar para as linhas acima ou abaixo. Permite a seleção precisa de blocos verticais de texto.

plaintext

Ctrl + Shift + Alt + ↑/↓

Expandir/Retrair Seleção Colunar

Expande ou retrai uma seleção colunar horizontalmente, ajustando a largura da seleção de bloco.

plaintext

Ctrl + Shift + Alt + ←/→

Selecionar e Editar Próxima Ocorrência

Seleciona a próxima ocorrência da palavra ou seleção atual e adiciona um novo cursor, permitindo edição simultânea. Útil para renomear variáveis em escopos controlados.

plaintext

Ctrl + D

Selecionar Todas as Ocorrências

Seleciona todas as ocorrências da palavra ou seleção atual no arquivo, adicionando um cursor em cada uma. Ideal para refatorações em massa ou renomear variáveis rapidamente.

plaintext

Ctrl + Shift + L

Inserir Cursor no Final de Linhas Selecionadas

Insere um cursor no final de cada linha que faz parte da seleção atual. Útil para adicionar pontos e vírgulas ou outros caracteres no final de múltiplas linhas.

plaintext

Ctrl + Alt + I

🐛 Debugging e Breakpoints

15 snippets

Depurando código, analisando variáveis, encontrando bugs.

Toggle Breakpoint

Ativa ou desativa um breakpoint na linha atual. Breakpoints são pontos de parada no código que permitem inspecionar o estado do programa durante a depuração.

plaintext

F9

Toggle Breakpoint (Alternativo)

Ativa ou desativa um breakpoint na linha atual. Este é um atalho alternativo para a função de toggle breakpoint, útil se F9 estiver em conflito.

plaintext

Ctrl + F9

Toggle Conditional Breakpoint

Ativa ou desativa um breakpoint condicional na linha atual. Um breakpoint condicional só pausa a execução se uma expressão específica for avaliada como verdadeira, economizando tempo na depuração.

plaintext

Shift + F9

Toggle Inline Breakpoint

Ativa ou desativa um breakpoint inline, permitindo pausar a execução em uma expressão específica dentro de uma linha de código, em vez de na linha inteira, para depuração mais granular.

plaintext

Ctrl + Shift + F9

Continuar/Iniciar Debugging

Inicia a sessão de depuração se não houver uma ativa, ou continua a execução do programa até o próximo breakpoint ou o fim do programa se já estiver em depuração.

plaintext

F5

Parar Debugging

Interrompe a sessão de depuração ativa, encerrando a execução do programa. Útil para sair de loops infinitos ou quando a depuração não é mais necessária.

plaintext

Shift + F5

Step Over

Executa a próxima linha de código. Se a linha contiver uma chamada de função, a função será executada completamente sem entrar nela. Útil para pular a depuração de funções já testadas.

plaintext

F10

Step Into

Executa a próxima linha de código. Se a linha contiver uma chamada de função, o depurador entrará na função para depurar seu código interno. Essencial para inspecionar o fluxo de execução detalhadamente.

plaintext

F11

Step Out

Sai da função atual e continua a execução até a próxima linha após a chamada da função que invocou a função atual. Útil para sair rapidamente de uma função em que você entrou acidentalmente.

plaintext

Shift + F11

Reiniciar Debugging

Reinicia a sessão de depuração do início, recarregando o programa e começando uma nova sessão. Útil para testar mudanças no código rapidamente.

plaintext

Ctrl + Shift + F5

Focar Debug Console

Foca no painel "Debug Console", onde é possível interagir com o programa em execução, avaliar expressões e visualizar logs de depuração. Essencial para monitorar o estado da aplicação.

plaintext

Ctrl + Shift + Y

Abrir Developer Tools

Abre as Ferramentas de Desenvolvedor (Developer Tools) para o VS Code em si (útil para depurar extensões ou o próprio editor), não para o código que está sendo depurado.

plaintext

Ctrl + Shift + I

Mostrar Terminal Integrado

Alterna a visibilidade do terminal integrado, que pode ser usado em conjunto com o Debug Console para executar comandos e observar a saída do programa.

plaintext

Ctrl + `

Adicionar ao Watch

Adiciona a variável ou expressão selecionada à seção "Watch" do painel de depuração, permitindo monitorar seu valor em tempo real durante a execução do programa, facilitando a identificação de mudanças.

plaintext

Ctrl + Shift + W

Inspecionar Valor (Debug)

Ao passar o mouse sobre uma variável ou expressão durante uma sessão de depuração, exibe seu valor atual em um tooltip. Permite uma inspeção rápida sem a necessidade de adicionar ao Watch.

plaintext

Alt + Hover

💻 Integrated Terminal

14 snippets

Executando comandos, build, testes, operações de sistema.

Abrir/Fechar Terminal

Abre ou fecha o terminal integrado do VS Code. Se o terminal estiver fechado, ele será aberto; caso contrário, será focado ou ocultado, maximizando o espaço do editor.

plaintext

Ctrl + `

Criar Novo Terminal

Cria uma nova instância do terminal integrado, permitindo ter múltiplos terminais abertos e ativos simultaneamente no VS Code para diferentes tarefas.

plaintext

Ctrl + Shift + `

Copiar Seleção (Terminal)

Copia o texto selecionado no terminal para a área de transferência. Este é o comportamento padrão para a maioria dos sistemas operacionais, mas pode interromper processos em execução.

plaintext

Ctrl + C

Colar no Terminal

Cola o conteúdo da área de transferência no terminal. Este é o comportamento padrão para a maioria dos sistemas operacionais e é essencial para entrada de comandos.

plaintext

Ctrl + V

Copiar no Terminal (Windows)

Atalho específico para copiar texto no terminal integrado em sistemas Windows, caso o Ctrl+C padrão seja interpretado como interrupção de processo. Garante que a cópia de texto funcione como esperado.

plaintext

Ctrl + Shift + C

Colar no Terminal (Windows)

Atalho específico para colar texto no terminal integrado em sistemas Windows, caso o Ctrl+V padrão não funcione corretamente. Assegura a funcionalidade de colar em todas as situações.

plaintext

Ctrl + Shift + V

Navegar entre Terminais

Alterna entre as diferentes instâncias do terminal integrado abertas, permitindo gerenciar múltiplos processos de linha de comando sem perder o contexto de cada um.

plaintext

Ctrl + Alt + ←/→

Navegar entre Terminais (Alternativo)

Atalho alternativo para navegar entre as instâncias do terminal integrado, movendo o foco para o terminal anterior ou próximo na lista, oferecendo flexibilidade.

plaintext

Ctrl + Shift + ↑/↓

Dividir Terminal

Divide o terminal atual em dois painéis, permitindo executar e visualizar múltiplos comandos de terminal lado a lado. Pode ser repetido para mais divisões, otimizando o fluxo de trabalho.

plaintext

Ctrl + Shift + 5

Fechar Terminal Atual

Fecha a instância do terminal integrado atualmente focada. Se houver múltiplos terminais divididos, apenas o painel ativo será fechado, liberando recursos.

plaintext

Ctrl + Shift + W

Abrir Configurações

Abre o editor de configurações do VS Code, onde é possível personalizar o comportamento do terminal integrado, como o shell padrão, fonte, cores e comportamento de rolagem.

plaintext

Ctrl + ,

Shell Padrão Windows

Configuração para definir o shell padrão a ser usado no terminal integrado do VS Code em sistemas Windows. Exemplos incluem `cmd.exe`, `powershell.exe` ou `wsl.exe`.

plaintext

terminal.integrated.shell.windows

Shell Padrão Linux

Configuração para definir o shell padrão a ser usado no terminal integrado do VS Code em sistemas Linux. Exemplos incluem `/bin/bash` ou `/bin/zsh`.

plaintext

terminal.integrated.shell.linux

Shell Padrão macOS

Configuração para definir o shell padrão a ser usado no terminal integrado do VS Code em sistemas macOS. Exemplos incluem `/bin/bash` ou `/bin/zsh`.

plaintext

terminal.integrated.shell.osx

🔀 Git Integration

15 snippets

Controle de versão, colaboração, gerenciamento de branches.

Abrir Source Control

Abre a visão de Controle de Código Fonte (Source Control) no VS Code, onde é possível gerenciar alterações Git, fazer commits, push, pull, e interagir com o repositório.

plaintext

Ctrl + Shift + G

Commit Mudanças

Realiza um commit das mudanças staged no Git, utilizando a mensagem de commit inserida na caixa de texto do Source Control. Equivale a `git commit -m "mensagem"`.

plaintext

Ctrl + Enter

Navegar entre Mudanças (Git)

Navega entre as diferentes alterações (diffs) no painel de Source Control, permitindo revisar as modificações feitas nos arquivos antes de fazer um commit.

plaintext

Alt + ←/→

Clonar Repositório Git

Abre a paleta de comandos para clonar um repositório Git remoto para o seu ambiente local. Solicita a URL do repositório e o diretório de destino para iniciar um novo projeto.

plaintext

Ctrl + Shift + P > Git: Clone

Stage All Changes

Adiciona todas as mudanças detectadas no repositório Git à área de staging (index), preparando-as para o próximo commit. Equivale a `git add .`.

plaintext

Ctrl + Shift + A

Unstage All Changes

Remove todas as mudanças da área de staging (index), revertendo-as para o estado de "modified" (não staged). Útil para desfazer um `git add .` antes de um commit.

plaintext

Ctrl + Shift + U

Stage Selected File

Adiciona o arquivo selecionado na visão de Source Control à área de staging. Equivale a `git add <file>`, preparando apenas as mudanças de um arquivo específico para o commit.

plaintext

Ctrl + Alt + S

Unstage Selected File

Remove o arquivo selecionado da área de staging. Equivale a `git reset <file>`, útil para remover um arquivo do staging sem desfazer suas modificações.

plaintext

Ctrl + Alt + U

Mudar de Branch Git

Abre a paleta de comandos para selecionar e alternar para uma branch Git existente no repositório local. Equivale a `git checkout <branch-name>`, essencial para gerenciar o fluxo de trabalho.

plaintext

Ctrl + Shift + P > Git: Checkout

Criar Nova Branch Git

Abre a paleta de comandos para criar uma nova branch Git a partir da branch atual. Equivale a `git branch <new-branch-name>` e opcionalmente `git checkout <new-branch-name>`.

plaintext

Ctrl + Shift + P > Git: Create Branch

Merge Branches Git

Abre a paleta de comandos para realizar um merge de uma branch em outra. Útil para integrar mudanças de uma feature branch na branch principal, resolvendo conflitos se necessário.

plaintext

Ctrl + Shift + P > Git: Merge

Pull do Repositório Remoto

Executa um `git pull` para buscar e integrar as últimas mudanças do repositório remoto para a branch local atual. Equivale a `git fetch` seguido de `git merge`.

plaintext

Ctrl + Shift + P > Git: Pull

Push para Repositório Remoto

Executa um `git push` para enviar os commits da branch local atual para o repositório remoto. Requer que a branch local esteja configurada para rastrear uma branch remota.

plaintext

Ctrl + Shift + P > Git: Push

Ver Histórico de Commits Git

Abre a visão de histórico do Git, mostrando uma lista de commits, seus autores, mensagens e as mudanças associadas. Requer a extensão GitLens ou similar para funcionalidade completa.

plaintext

Ctrl + Shift + P > Git: View History

Abrir GitLens History

Abre a visão de histórico avançada fornecida pela extensão GitLens, oferecendo detalhes ricos sobre commits, autores, linhas alteradas e navegação no histórico de arquivos, para uma análise profunda.

plaintext

Ctrl + Shift + H

🧩 Extensions Recomendadas

18 snippets

Personalizando ambiente, aumentando produtividade, ferramentas específicas.

TypeScript Importer (Extension)

ID da extensão oficial do VS Code para suporte a TypeScript, que inclui recursos como autocompletar, verificação de tipos, refatoração e navegação de código para projetos TypeScript.

plaintext

ms-vscode.vscode-typescript-next

Prettier - Code Formatter (Extension)

ID da extensão Prettier, um formatador de código opinativo que impõe um estilo consistente em todo o seu projeto, formatando automaticamente o código ao salvar ou por comando.

plaintext

esbenp.prettier-vscode

ESLint (Extension)

ID da extensão ESLint, que integra o linter ESLint ao VS Code, fornecendo feedback em tempo real sobre problemas de sintaxe, estilo e potenciais erros no código JavaScript/TypeScript.

plaintext

dbaeumer.vscode-eslint

JSON Language Support (Extension)

ID da extensão de suporte a linguagem JSON, que oferece recursos como validação de esquema, formatação, autocompletar e realce de sintaxe para arquivos JSON e JSONC, facilitando o trabalho com dados estruturados.

plaintext

ms-vscode.vscode-json

YAML Language Support (Extension)

ID da extensão de suporte a linguagem YAML da Red Hat, que fornece validação de esquema, autocompletar, formatação e realce de sintaxe para arquivos YAML, essencial para configurações e CI/CD.

plaintext

redhat.vscode-yaml

GitLens - Git supercharged (Extension)

ID da extensão GitLens, que aprimora as capacidades Git embutidas do VS Code, adicionando recursos como blame annotations, histórico de commits detalhado, navegação de repositório e muito mais.

plaintext

ms-vscode.vscode-gitlens

Live Server (Extension)

ID da extensão Live Server, que lança um servidor de desenvolvimento local com recarregamento ao vivo para páginas HTML/CSS/JS estáticas, atualizando o navegador automaticamente a cada alteração no arquivo.

plaintext

ms-vscode.live-server

Auto Rename Tag (Extension)

ID da extensão Auto Rename Tag, que renomeia automaticamente a tag HTML/XML de fechamento quando a tag de abertura é alterada, e vice-versa, mantendo a consistência do código.

plaintext

formulahendry.auto-rename-tag

Tailwind CSS IntelliSense (Extension)

ID da extensão Tailwind CSS IntelliSense, que fornece autocompletar inteligente, linting e realce de sintaxe para classes CSS do framework Tailwind CSS diretamente no editor.

plaintext

bradlc.vscode-tailwindcss

Color Picker (Extension)

ID da extensão Color Picker, que oferece uma interface gráfica para selecionar cores em formatos como HEX, RGB, HSL, facilitando a escolha e inserção de valores de cor no código.

plaintext

ms-vscode.vscode-color-picker

Material Icon Theme (Extension)

ID da extensão Material Icon Theme, que adiciona uma vasta coleção de ícones de arquivo e pasta ao explorador do VS Code, melhorando a identificação visual de tipos de arquivo.

plaintext

PKief.material-icon-theme

One Dark Pro Theme (Extension)

ID da extensão One Dark Pro Theme, um tema de cores popular e elegante para o VS Code, baseado no tema One Dark do Atom, que oferece uma experiência de codificação visualmente agradável.

plaintext

zhuangtongfa.Material-theme

Dracula Theme (Extension)

ID da extensão Dracula Theme, um tema de cores escuro e vibrante, muito apreciado pela comunidade, que oferece um contraste agradável e legibilidade para diversas linguagens de programação.

plaintext

dracula-theme.theme-dracula

Monokai Theme (Extension)

ID da extensão Monokai Theme, um clássico tema de cores escuro, conhecido por sua paleta de cores distinta e legibilidade, amplamente utilizado por desenvolvedores.

plaintext

ms-vscode.theme-monokai

Debugger for Chrome (Extension)

ID da extensão Debugger for Chrome, que permite depurar seu código JavaScript front-end (executado no Chrome) diretamente do VS Code, configurando breakpoints e inspecionando variáveis.

plaintext

ms-vscode.vscode-chrome-debug

Node.js Debugging (Extension)

ID da extensão para depuração de aplicações Node.js no VS Code, oferecendo suporte para breakpoints, step-by-step execution, inspeção de variáveis e avaliação de expressões.

plaintext

ms-vscode.vscode-node-debug2

REST Client (Extension)

ID da extensão REST Client, que permite enviar requisições HTTP diretamente do editor e visualizar as respostas, ideal para testar APIs RESTful e GraphQL sem sair do VS Code.

plaintext

humao.rest-client

Test Explorer UI (Extension)

ID da extensão Test Explorer UI, que fornece uma interface gráfica para visualizar e executar testes de diversas frameworks (via adaptadores), integrando o processo de teste ao VS Code.

plaintext

ms-vscode.test-adapter-converter

📁 Workspace Management

13 snippets

Trabalhando com múltiplos projetos, organização, configurações específicas.

Adicionar Pasta ao Workspace

Comando para adicionar uma pasta existente a um workspace multi-root. Permite trabalhar com múltiplos diretórios de projeto em uma única janela do VS Code, mantendo a organização.

plaintext

File > Open Folder from Workspace...

Salvar Workspace Atual

Salva as configurações do workspace atual (incluindo pastas abertas e configurações específicas) em um arquivo `.code-workspace`, permitindo reabrir o ambiente de trabalho facilmente.

plaintext

File > Save Workspace As...

Abrir Workspace Recente

Abre a lista de workspaces e pastas abertas recentemente, facilitando a alternância entre projetos nos quais você está trabalhando sem precisar navegar pelos diretórios.

plaintext

Ctrl + R

Abrir Pasta (Open Folder)

Abre uma nova janela do VS Code com a pasta selecionada como root do projeto. Este é o comando padrão para iniciar um novo projeto ou abrir um existente.

plaintext

Ctrl + K Ctrl + O

Salvar Workspace Como

Salva o workspace atual (com todas as pastas e configurações) em um novo arquivo `.code-workspace`, permitindo criar diferentes configurações de workspace para diferentes contextos de trabalho.

plaintext

Ctrl + K Ctrl + S

Alternar entre Arquivos Abertos

Alterna rapidamente entre os arquivos abertos no editor, mostrando uma lista dos arquivos mais recentemente acessados. Mantenha Ctrl pressionado e use Tab para navegar.

plaintext

Ctrl + Tab

Alternar na Direção Inversa

Alterna entre os arquivos abertos na ordem inversa da lista de arquivos mais recentemente acessados. Útil para navegação reversa e para encontrar arquivos específicos rapidamente.

plaintext

Ctrl + Shift + Tab

Ir para Editor Específico

Move o foco para um editor específico em um grupo de editores. Por exemplo, Ctrl + 1 foca no primeiro editor, Ctrl + 2 no segundo, etc., agilizando a navegação em layouts divididos.

plaintext

Ctrl + 1/2/3...

Navegar entre Grupos de Editores

Navega o foco entre os diferentes grupos de editores (painéis) abertos no VS Code, permitindo alternar rapidamente entre diferentes layouts de arquivos e contextos de trabalho.

plaintext

Ctrl + Alt + ←/→

Configurações do Workspace

Arquivo JSON localizado na pasta `.vscode/` do seu projeto, contendo configurações específicas para aquele workspace. Essas configurações sobrescrevem as configurações de usuário, garantindo consistência no projeto.

plaintext

.vscode/settings.json

Configurações de Debug

Arquivo JSON localizado na pasta `.vscode/` do seu projeto, usado para configurar sessões de depuração para diferentes ambientes ou tipos de aplicação (ex: Node.js, Chrome).

plaintext

.vscode/launch.json

Configurações de Tarefas

Arquivo JSON localizado na pasta `.vscode/` do seu projeto, usado para definir e configurar tarefas personalizadas (tasks) que podem ser executadas no VS Code (ex: build, test, run scripts).

plaintext

.vscode/tasks.json

Recomendações de Extensões

Arquivo JSON localizado na pasta `.vscode/` do seu projeto, que lista extensões recomendadas para o workspace. O VS Code sugere a instalação dessas extensões aos colaboradores do projeto.

plaintext

.vscode/extensions.json

📝 Snippets e Templates

18 snippets

Acelerando digitação, padronizando código, templates reutilizáveis.

Snippet: Loop for básico

Um snippet que, ao digitar "for" e pressionar Tab, expande para uma estrutura básica de loop `for` em JavaScript ou linguagens similares, com placeholders para variáveis e corpo do loop, agilizando a escrita de código repetitivo.

plaintext

for + Tab

Snippet: Condicional if

Um snippet que, ao digitar "if" e pressionar Tab, expande para uma estrutura básica de condicional `if` em JavaScript ou linguagens similares, com um placeholder para a condição a ser preenchida.

plaintext

if + Tab

Snippet: Console.log (JavaScript)

Um snippet que, ao digitar "log" e pressionar Tab, expande para `console.log()` em JavaScript, com um placeholder para o argumento a ser logado. Muito útil para depuração rápida e inserção de logs.

plaintext

log + Tab

Snippet: Console.log (abreviação)

Uma abreviação de snippet que, ao digitar "cl" e pressionar Tab, expande para `console.log()` em JavaScript, similar ao "log + Tab", oferecendo uma alternativa rápida para inserir logs.

plaintext

cl + Tab

Snippet: Function declaration

Um snippet que, ao digitar "fn" e pressionar Tab, expande para uma declaração de função básica em JavaScript (ex: `function name(params) { ... }`), com placeholders para nome e parâmetros.

plaintext

fn + Tab

Snippet: React Arrow Function

Um snippet que, ao digitar "raf" e pressionar Tab, expande para uma função de componente React em formato de arrow function (ex: `const Component = () => { return (...) };`), com placeholders para nome e retorno.

plaintext

raf + Tab

Abrir Editor de Snippets

Abre o arquivo de configuração onde você pode criar e editar seus próprios snippets personalizados para linguagens específicas ou globalmente no VS Code, permitindo automação de código.

plaintext

File > Preferences > User Snippets

Arquivo de Snippets Personalizados

Nome de arquivo para snippets personalizados do VS Code. Pode ser um arquivo global (`.code-snippets`) ou específico para uma linguagem (ex: `javascript.json`), permitindo organização.

plaintext

nome-do-snippet.code-snippets

Estrutura Básica de Snippet

Define o nome legível do snippet dentro do arquivo JSON de snippets. Este é o cabeçalho para a definição de um novo snippet, usado para identificá-lo no IntelliSense.

plaintext

"Snippet Name": {

Prefixo para Ativar Snippet

Define a string que, quando digitada no editor e seguida de Tab, ativará a expansão do snippet. O prefixo deve ser único ou específico o suficiente para evitar conflitos.

plaintext

  "prefix": "prefixo",

Corpo do Snippet

Define o conteúdo que será inserido no editor quando o snippet for ativado. Pode ser uma string ou um array de strings para múltiplas linhas. Inclui placeholders como `$1` para navegação do cursor.

plaintext

  "body": ["$1"],

Descrição do Snippet

Fornece uma breve descrição do que o snippet faz, que será exibida na lista de sugestões do IntelliSense. Ajuda a identificar o snippet correto e seu propósito.

plaintext

  "description": "Descrição"

Fechar Estrutura de Snippet

Fecha a definição de um snippet individual dentro do arquivo JSON de snippets, completando a estrutura do objeto.

plaintext

Variável de Texto Selecionado

Uma variável de snippet que insere o texto atualmente selecionado no editor na posição do snippet. Útil para envolver texto existente com uma nova estrutura ou tags.

plaintext

$TM_SELECTED_TEXT

Tab Stops

Placeholders numéricos que definem a ordem em que o cursor se moverá após a expansão do snippet. Pressione Tab para pular para o próximo tab stop, agilizando a inserção de dados.

plaintext

$1, $2, $3...

Tab Stop com Valor Padrão

Um tab stop que, além de definir a posição do cursor, também fornece um valor padrão. O usuário pode aceitar o padrão ou sobrescrevê-lo, tornando os snippets mais flexíveis.

plaintext

${1:default}

Variável de Ano Atual

Uma variável de snippet que insere o ano atual (ex: 2023) no corpo do snippet. Útil para cabeçalhos de arquivo, licenças ou comentários de data.

plaintext

$CURRENT_YEAR

Variável de Data Completa

Uma variável de snippet que insere a data completa atual (ex: 2023-10-27) no corpo do snippet. Útil para registros de data e hora ou documentação automatizada.

plaintext

$CURRENT_DATE

🌐 Remote Development

16 snippets

Desenvolvimento remoto, containers, WSL, acesso a servidores.

Conectar via Remote SSH

Inicia uma sessão de conexão SSH remota, permitindo desenvolver em um servidor remoto como se estivesse localmente. Solicita o host SSH configurado ou um novo para estabelecer a conexão segura.

plaintext

Ctrl + Shift + P > Remote-SSH: Connect to Host...

Editar Configuração SSH

Abre o arquivo de configuração SSH (`~/.ssh/config` ou similar) para adicionar, editar ou remover hosts SSH, incluindo detalhes como HostName, User, IdentityFile, para gerenciar suas conexões.

plaintext

Ctrl + Shift + P > Remote-SSH: Open Configuration File...

Configurar Host SSH

Define um alias para um servidor remoto no arquivo de configuração SSH, facilitando a conexão com um nome curto em vez do IP completo ou domínio, melhorando a usabilidade.

plaintext

Host nome-do-servidor

Endereço do Servidor SSH

Especifica o endereço IP ou nome de domínio do servidor remoto ao qual o cliente SSH tentará se conectar. Usado dentro da configuração de um `Host` para identificar o alvo.

plaintext

HostName IP-ou-DOMAIN

Usuário SSH

Define o nome de usuário a ser usado para autenticação no servidor SSH remoto. Usado dentro da configuração de um `Host` para especificar as credenciais de acesso.

plaintext

User nome-usuario

Chave SSH Privada

Especifica o caminho para o arquivo de chave privada SSH a ser usado para autenticação sem senha. Essencial para conexões seguras e automatizadas com servidores remotos.

plaintext

IdentityFile ~/.ssh/chave_privada

Anexar a Container em Execução

Conecta o VS Code a um container Docker já em execução, permitindo desenvolver dentro do ambiente isolado do container. Útil para depuração ou desenvolvimento contínuo em ambientes padronizados.

plaintext

Ctrl + Shift + P > Remote-Containers: Attach to Running Container...

Reabrir Pasta em Container

Reabre a pasta do projeto atual dentro de um container Docker, utilizando as configurações definidas em um arquivo `.devcontainer.json`. Ideal para ambientes de desenvolvimento consistentes e reproduzíveis.

plaintext

Ctrl + Shift + P > Remote-Containers: Reopen in Container

Configuração do Dev Container

Arquivo JSON localizado na pasta `.devcontainer/` do seu projeto, que define como o ambiente de desenvolvimento em container deve ser construído e configurado (ex: imagem Docker, portas, extensões).

plaintext

.devcontainer/devcontainer.json

Dockerfile para Build de Container

Propriedade no `.devcontainer.json` que especifica o Dockerfile a ser usado para construir a imagem do ambiente de desenvolvimento em container, permitindo personalização da imagem.

plaintext

"dockerFile": "Dockerfile"

Contexto do Docker

Propriedade no `.devcontainer.json` que define o diretório de contexto para o Docker build. ".." significa o diretório pai do `.devcontainer` (geralmente a raiz do projeto), indicando onde o Docker deve procurar arquivos.

plaintext

"context": ".."

Abrir Nova Janela WSL

Abre uma nova janela do VS Code conectada a um subsistema Windows para Linux (WSL), permitindo desenvolver em um ambiente Linux completo diretamente do Windows, com acesso a ferramentas Linux.

plaintext

Ctrl + Shift + P > Remote-WSL: New WSL Window

Reabrir Pasta em WSL

Reabre a pasta do projeto atual dentro do ambiente WSL, transferindo o contexto de desenvolvimento para o subsistema Linux e permitindo o uso de ferramentas nativas do Linux.

plaintext

Ctrl + Shift + P > Remote-WSL: Reopen in WSL

Acessar Distribuição WSL Específica

Comando para iniciar uma distribuição WSL específica (ex: Ubuntu) diretamente do prompt de comando do Windows, permitindo acesso ao ambiente Linux e suas ferramentas.

plaintext

wsl.exe -d Ubuntu

Abrir Porta no Navegador (Remote Tunnels)

Abre uma porta exposta por um túnel remoto diretamente no navegador local, facilitando o acesso a aplicações web em execução em máquinas remotas sem configurações de firewall complexas.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Open in Browser

Encaminhar Porta Específica (Remote Tunnels)

Configura o encaminhamento de uma porta específica de uma máquina remota para sua máquina local através de um túnel seguro, permitindo acesso a serviços remotos como se estivessem localmente.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Forward Port

🎨 Customização e Themes

20 snippets

Personalizando ambiente, ajustando preferências, otimizando fluxo.

Abrir Configurações

plaintext

Ctrl + ,

Tema de Cores do Workbench

Configuração que define o tema de cores geral do VS Code (editor, painéis, barra lateral). Pode ser um tema pré-instalado ou de uma extensão, alterando a estética visual do editor.

plaintext

workbench.colorTheme

Tema de Ícones do Workbench

Configuração que define o tema de ícones para arquivos e pastas exibidos no explorador do VS Code. Requer uma extensão de tema de ícones instalada para funcionar, melhorando a identificação visual.

plaintext

workbench.iconTheme

Fonte do Editor

Configuração que define a família de fontes a ser usada no editor de texto. É recomendado usar fontes monoespaçadas para codificação, como Fira Code ou JetBrains Mono, para melhor legibilidade.

plaintext

editor.fontFamily

Tamanho da Fonte do Editor

Configuração que define o tamanho da fonte em pixels para o texto no editor. Ajuste para melhor legibilidade e conforto visual, adaptando-se às suas preferências.

plaintext

editor.fontSize

Altura da Linha do Editor

Configuração que define a altura da linha em relação ao tamanho da fonte. Um valor maior aumenta o espaçamento entre as linhas, melhorando a legibilidade e reduzindo a fadiga ocular.

plaintext

editor.lineHeight

Tamanho do Tab

Configuração que define o número de espaços que um caractere de tabulação representa. Geralmente 2 ou 4, dependendo das convenções de estilo de código do projeto.

plaintext

editor.tabSize

Usar Espaços em Vez de Tabs

Configuração booleana que, se `true`, faz com que o VS Code insira espaços em vez de caracteres de tabulação quando a tecla Tab é pressionada, seguindo convenções de codificação.

plaintext

editor.insertSpaces

Quebra de Linha Automática

Configuração que controla se as linhas de texto longas devem ser quebradas automaticamente para se ajustarem à largura do editor, evitando a necessidade de rolagem horizontal.

plaintext

editor.wordWrap

Habilitar/Desabilitar Minimapa

Configuração booleana que controla a visibilidade do minimapa, uma visão em miniatura do arquivo que ajuda na navegação rápida por grandes blocos de código.

plaintext

editor.minimap.enabled

Mostrar Espaços em Branco

Configuração que controla como o VS Code renderiza caracteres de espaço em branco (espaços, tabs, novas linhas), tornando-os visíveis com símbolos discretos para depuração de formatação.

plaintext

editor.renderWhitespace

Réguas Verticais no Editor

Configuração que permite definir colunas verticais no editor (ex: `[80, 120]`), úteis para seguir convenções de estilo de código que limitam a largura da linha, melhorando a legibilidade.

plaintext

editor.rulers

Habilitar Abas no Editor

Configuração booleana que controla se os arquivos abertos devem ser exibidos em abas na parte superior do editor. Geralmente `true` para facilitar a navegação entre arquivos.

plaintext

workbench.editor.enableTabs

Auto-Salvar Arquivos

Configuração que define o comportamento de auto-salvar arquivos. Opções incluem `off`, `afterDelay`, `onFocusChange`, `onWindowChange`, garantindo que suas alterações sejam salvas automaticamente.

plaintext

files.autoSave

Abrir Atalhos de Teclado

Abre o editor de atalhos de teclado, onde é possível visualizar, pesquisar e personalizar todos os atalhos de teclado do VS Code, adaptando o editor ao seu fluxo de trabalho.

plaintext

Ctrl + K Ctrl + S

Menu de Atalhos de Teclado

Caminho no menu principal para acessar o editor de atalhos de teclado, que permite mapear comandos para combinações de teclas personalizadas, ou modificar atalhos existentes.

plaintext

File > Preferences > Keyboard Shortcuts

Arquivo de Atalhos Personalizados

Arquivo JSON onde os atalhos de teclado personalizados são armazenados. Pode ser editado diretamente para configurações avançadas, permitindo controle total sobre os atalhos.

plaintext

keybindings.json

Definir Atalho de Teclado

Propriedade dentro do `keybindings.json` que define a combinação de teclas para um atalho (ex: "ctrl+shift+a"), permitindo criar atalhos para comandos específicos.

plaintext

"key": "ctrl+shift+a",

Comando a Executar (Atalho)

Propriedade dentro do `keybindings.json` que especifica o ID do comando interno do VS Code a ser executado quando o atalho é pressionado (ex: `workbench.action.files.saveAll` para salvar todos os arquivos).

plaintext

"command": "workbench.action.files.saveAll"

Condição de Ativação (Atalho)

Propriedade opcional dentro do `keybindings.json` que define uma condição (context key) para quando o atalho deve ser ativado (ex: `editorTextFocus` significa que o atalho só funciona quando o editor de texto está em foco).

plaintext

"when": "editorTextFocus"

Ver todos os cheatsheets