Preparado para transformar seu ambiente de desenvolvimento? Vamos lá!

Instalação e configuração inicial

{
  // Seleciona a primeira sugestão no autocompletar agilizando escolhas
  "editor.suggestSelection": "first",
  // Formata o código automaticamente ao salvar o arquivo
  "editor.formatOnSave": true,
  // Define o perfil padrão do terminal integrado (ajuste conforme seu SO)
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.defaultProfile.osx": "zsh"
}

Melhorando a experiência visual

Omni Theme da Rocketseat:

ext install rocketseat.theme-omni

Fira Code Nerd Font:

{
  "editor.fontFamily": "FiraCode Nerd Font, FiraCode, monospace",
  "editor.fontLigatures": true
}

Extensões essenciais

• Prettier – Code Formatter: formata automaticamente seu código seguindo padrões consistentes. Ao salvar, seu código já fica organizado. Instalação: ext install esbenp.prettier-vscode. (Dica: defina o Prettier como formatador padrão nas configurações). Prettier é tão popular que conta com mais de 55 milhões de downloads – praticamente um padrão de mercado para formatação.

• ESLint: integra a ferramenta ESLint ao VS Code, sinalizando erros de sintaxe e estilo em tempo real e até corrigindo automaticamente alguns problemas. Instalação: ext install dbaeumer.vscode-eslint. Essencial para manter a qualidade do código JavaScript/TypeScript seguindo as regras definidas pelo time.

• GitLens – Git supercharged: leva o controle de versão Git dentro do VS Code a outro nível. Com o GitLens, você pode ver quem editou cada linha do código, comparar versões e navegar no histórico com facilidade diretamente no editor. Instalação: ext install eamodio.gitlens. Com mais de 39 milhões de instalações, o GitLens se tornou uma ferramenta obrigatória para quem trabalha com Git diariamente.

• Better Comments: melhora a visualização de comentários no código, aplicando cores e destaques para diferentes tipos de anotação – // TODO fica em laranja, alertas em vermelho, etc. Isso deixa seu código mais expressivo e fácil de entender à primeira vista. Instalação: ext install aaron-bond.better-comments. Essa extensão é bastante adotada (mais de 8 milhões de downloads), indicando o valor de ter comentários mais organizados.

• Auto Rename Tag: se você trabalha com HTML/JSX, esta extensão sincroniza automaticamente a edição da tag de abertura/fechamento. Ou seja, renomeie uma tag <div> para <section> e a tag de fechamento ajusta instantaneamente. Instalação: ext install formulahendry.auto-rename-tag. Menos preocupação em esquecer de alterar o par e menos erros no markup.

• Live Server: para devs web, o Live Server é um salva-vidas. Ele cria um servidor local com live reload, então cada vez que você salvar um arquivo HTML/CSS/JS, a página no navegador recarrega automaticamente mostrando as mudanças. Instalação: ext install ritwickdey.LiveServer. Depois de instalar, clique em “Go Live” no rodapé do VS Code e sua aplicação web estará rodando no navegador com atualizações ao vivo.

Snippets: atalhos para código reutilizável

Onde criar seus snippets personalizados?

• Abra a paleta de comandos (Ctrl+Shift+P ou Cmd+Shift+P).

• Digite Preferences: Configure User Snippets.

• Escolha a opção New Global Snippets file.

• O VS Code criará um arquivo .code-snippets onde você poderá definir snippets válidos para todas as linguagens.

O que são e como usar?

Criando snippets personalizados

// Em snippets/javascript.json
{
  "Log no console": {
    "prefix": "log",
    "body": ["console.log('$1');", "$2"],
    "description": "Insere um console.log rapidamente"
  }
}

Exemplos práticos de Snippets

• Snippet para React: veja como criar um componente React funcional com PropTypes instantaneamente:

// Em snippets/javascript.json
"React Functional Component with PropTypes": {
    "prefix": "rfcpt",
    "body": [
        "import React from 'react';",
        "import PropTypes from 'prop-types';",
        "",
        "const ${1:${TM_FILENAME_BASE}} = ({ $2 }) => {",
        "  return (",
        "    <div>",
        "      $3",
        "    </div>",
        "  );",
        "};",
        "",
        "${1:${TM_FILENAME_BASE}}.propTypes = {",
        "  $4",
        "};",
        "",
        "export default ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "React Functional Component with PropTypes"
}

• Snippet para criação de rotas com Express: agilize o desenvolvimento do seu back-end com Node.js e Express. Em vez de digitar manualmente a estrutura de cada rota, use este snippet para gerar o código básico instantaneamente:

// Em snippets/javascript.json
"Express Route (GET)": {
    "prefix": "exget",
    "body": [
        "app.get('${1:/endpoint}', (req, res) => {",
        "  $2",
        "});"
    ],
    "description": "Create an Express GET route"
},
"Express Route (POST)": {
    "prefix": "expost",
    "body": [
        "app.post('${1:/endpoint}', (req, res) => {",
        "  $2",
        "});"
    ],
    "description": "Create an Express POST route"
}

Empresas que possuem padrões rigorosos de qualidade de código podem se beneficiar ainda mais do uso de snippets. Ao implementar snippets já alinhados às regras definidas para pull requests, os devs conseguem criar códigos consistentes desde o início, reduzindo consideravelmente o tempo gasto com revisões. Isso gera economia tanto para quem codifica quanto para quem revisa, mantendo a qualidade e facilitando a integração contínua dentro dos processos internos.

Atalhos de teclado: agilidade no desenvolvimento

Navegação

• Abrir arquivo rápido: Ctrl+P (Windows/Linux) ou Cmd+P (Mac) – Abre a busca de arquivos pelo nome. Basta digitar parte do nome de um arquivo e o VS Code filtra instantaneamente. Use este atalho para trocar de arquivo sem tirar as mãos do teclado.

• Ir para símbolo no arquivo: Ctrl+Shift+O ou Cmd+Shift+O – Lista funções, classes, e outros símbolos no arquivo atual, permitindo pular diretamente para eles. Muito útil em arquivos extensos.

• Navegar entre abas abertas: Ctrl+Tab – Alterna para o próximo arquivo aberto (e Ctrl+Shift+Tab volta ao anterior). Isso agiliza o vai-e-vem entre dois arquivos comparando código, por exemplo.

Edição

• Duplicar linha ou seleção: Alt+Shift+↓/↑ – Cria uma cópia da linha atual (ou do bloco selecionado) logo abaixo ou acima. Excelente para replicar rapidamente uma linha de código sem usar copiar/colar tradicional.

• Mover linha: Alt+↓/↑ – Move a linha atual para baixo ou cima. Organizar o código fica mais rápido, rearranjando linhas sem cortar e colar.

• Seleção múltipla (multi-cursor): Ctrl+D – Seleciona a próxima ocorrência da palavra onde está o cursor. Com isso, você pode editar várias ocorrências simultaneamente. Por exemplo, renomear todas as instâncias de uma variável em um escopo: posicione em uma, aperte Ctrl+D repetidamente para selecionar as próximas e edite todas ao mesmo tempo.

• Formatação do documento: Shift+Alt+F (ou Shift+Option+F no Mac) – Aplica a formatação padrão ao código inteiro. Útil caso o formatOnSave esteja desligado ou para alinhar código colado de fontes externas.

Controle de versão (Git)

• Abrir painel do Git: Ctrl+Shift+G ou Cmd+Shift+G – Abre a visão de Source Control mostrando mudanças, staged files, etc. Assim, você visualiza rapidamente o que foi modificado no repositório.

• Commit rápido: Dentro do painel de Source Control, escreva a mensagem de commit e use Ctrl+Enter (ou Cmd+Enter no Mac) para efetivar o commit. É um atalho pouco conhecido, mas agiliza o commit sem precisar clicar no botão de confirmação.

• Ver blame (via GitLens): O GitLens adiciona atalhos como Alt+B para abrir o blame da linha atual no painel lateral, mostrando o autor e o commit daquela linha. Embora específico da extensão, vale mencionar pois acelera a investigação do histórico diretamente no código.

Terminal integrado

• Mostrar/ocultar terminal: Ctrl+` (Ctrl + crase) ou Cmd+` – Abre ou esconde o terminal integrado na parte inferior do VS Code. Perfeito para alternar rapidamente entre editar código e rodar comandos no terminal, mantendo tudo na mesma janela.

• Novo terminal: Ctrl+Shift+` (Ctrl+Shift+`no Windows) ou Cmd+Shift+` (Mac) – Abre uma nova sessão de terminal integrado. Isso permite ter, por exemplo, um terminal rodando o servidor de desenvolvimento e outro para rodar testes, e alternar entre eles facilmente.

• Navegar entre múltiplos terminais: Ctrl+PageDown/PageUp – Alterna entre abas de terminais abertos, similar à navegação de abas do editor.

Para mais atalhos e dicas oficiais que vão otimizar ainda mais sua experiência com o VS Code, confira a página completa Tips and Tricks da documentação oficial do Visual Studio Code. Lá você encontrará diversas funcionalidades adicionais e poderá personalizar ainda mais seu fluxo de trabalho.

Configurações específicas do projeto

Criando um .vscode/settings.json

{
  "editor.tabSize": 4,
  "editor.formatOnSave": false,
  "files.exclude": {
    "**/node_modules": true}
}

Usar configurações específicas do projeto garante que ao abrir aquele projeto você não precise lembrar de ajustar nada manualmente: o VS Code já se adapta conforme o contexto. Isso é especialmente útil quando você alterna entre projetos com tecnologias ou estilos diferentes.

Debugging eficiente

Usando o debugger no VS Code

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Debugar Aplicação Node",
      "program": "${workspaceFolder}/src/index.js",
      "cwd": "${workspaceFolder}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Pontos de parada e inspeção

• Variáveis locais: todos os valores no escopo atual, permitindo inspecionar conteúdo de objetos, arrays, etc.

• Call Stack: a pilha de chamadas, útil para entender como o programa chegou naquele ponto.

• Watch: você pode adicionar expressões para acompanhar valores ao longo do tempo.

• Console de debug: uma linha de comando interativa onde você pode executar comandos no contexto pausado (por exemplo, chamar uma função ou verificar o valor de uma variável manualmente).

Dicas rápidas de debug

• Debug de JavaScript no navegador: se você configurar o debug para aplicações web (usando Chrome/Edge), pode colocar breakpoints no código front-end (React, Angular, etc.) e depurar dentro do VS Code, em vez de usar o devtools do navegador separadamente. Isso integra todo o processo em uma ferramenta.

• Debugging de outras linguagens: o VS Code suporta depuração de praticamente qualquer linguagem, muitas vezes precisando de extensões. Por exemplo, para Python instale a extensão oficial de Python (que inclui debug), para C# use a extensão C# (OmniSharp), etc. O conceito de breakpoints e stepping é similar em todas.

• Hot Reload / Auto Attach: quando disponível, use recursos de Hot Reload (no caso do React Native, Flutter, etc.) ou o Auto Attach do Node.js (configurando "console": "integratedTerminal" no launch.json) que faz o VS Code entrar em modo debug ao detectar -inspect em um processo Node executado no terminal integrado. Essas facilidades tornam o ciclo editar-executar-depurar mais ágil.

• Se algo não parar no breakpoint: verifique se o código que você está depurando está realmente sendo executado e se a fonte corresponde (às vezes breakpoints não “grudam” em código transpilado, como TypeScript – nesse caso, ajuste o sourceMap corretamente).

Com a prática, você vai perceber que um bom uso do debugger reduz drasticamente o tempo para encontrar e corrigir problemas. Menos “tentativa e erro” cega e mais compreensão do comportamento do código em tempo real.

Fluxo de trabalho diário

Resumindo, um fluxo de trabalho produtivo no VS Code envolve tirar proveito máximo da integração: editor + terminal + controle de versão + ferramentas de código tudo no mesmo lugar. Reduza ao mínimo as trocas de janelas e deixe que extensões como GitLens, Prettier, etc., façam trabalho pesado por você. Com a prática, seu dia a dia vai fluir com commits sendo feitos mais cedo, menos tempo formatando ou caçando bugs, e mais tempo implementando funcionalidades de valor.

Solução de problemas comuns

• Fonte não carrega corretamente: você instalou a Fira Code Nerd Font, mas o VS Code não está exibindo as ligações ou ícones? Primeiro, verifique se o nome da fonte está correto no settings.json. Às vezes, o nome pode variar ligeiramente (ex: "Fira Code Nerd Font" vs "FiraCode Nerd Font"). Certifique-se também de ter habilitado "editor.fontLigatures": true. Se mesmo assim não funcionar, tente fechar e reabrir o VS Code após instalar a fonte (o editor carrega as fontes disponíveis ao iniciar). No caso de ícones ainda não aparecerem, confirme que instalou a variante Nerd da fonte – as versões normais do Fira Code não incluem os glifos extras.

• Extensões não funcionam (ou parecem não fazer nada): um exemplo clássico é instalar o ESLint ou Prettier e não ver efeito algum. Nesses casos, verifique:
• Se a extensão está habilitada no workspace atual. O VS Code permite desabilitar extensões por projeto; abra a aba Extensões e veja se ao selecionar a extensão aparece a opção “Enable (Workspace)”.
• Se há dependências externas: o ESLint, por exemplo, requer que você tenha o pacote eslint instalado no projeto e um arquivo de configuração .eslintrc. Sem isso, a extensão não sabe que regras aplicar. O Prettier, similarmente, formata apenas linguagens suportadas e respeita configurações – abra a saída do Prettier (Output > Prettier) para ver logs, às vezes ele pode ignorar arquivos se achar um prettier ignore.
• Às vezes, extensões entram em conflito. Se você tiver duas extensões para formatação instaladas (por exemplo, Prettier e outra de format), desative uma ou especifique qual deve ser usada (via "editor.defaultFormatter" nas configs).
• Por fim, tente recarregar o VS Code: use o comando Developer: Reload Window. Algumas extensões precisam desse reload após instalação para iniciar corretamente.

• Configurações não se aplicam corretamente: você editou o settings.json mas não vê diferença no comportamento? Algumas dicas:
• Verifique se você editou o arquivo de User Settings ou Workspace Settings correto. O VS Code pode ter configurações definidas no nível do usuário (globais) e do workspace (projeto). Se ajustou algo no lugar errado, talvez aquela configuração esteja sendo sobrescrita em outro nível. Abra o comando Preferences: Open Settings (JSON) sem nenhum projeto específico aberto para editar as globais; abra com o projeto para editar as do workspace.
• Atenção a vírgulas e sintaxe JSON: um erro no JSON (como uma vírgula a mais ou esquecer uma chave) pode invalidar o arquivo inteiro. O VS Code normalmente destaca erros no arquivo de config, então dê uma olhada se algo está em vermelho lá.
• Algumas configurações mudam de nome entre versões do VS Code. Por exemplo, chaves antigas como terminal.integrated.shell.windows foram substituídas pelas terminal.integrated.defaultProfile.windows. Se você seguiu um tutorial antigo, a config pode estar sendo ignorada por estar obsoleta. Sempre confira na documentação oficial se o nome da config é atual.
• Em casos específicos, pode ser necessário limpar caches ou assegurar que não há uma extensão sobrepondo aquele comportamento. Por exemplo, se seu tema não muda, verifique se não há extensão de temas aplicada especificamente no workspace ou alguma configuração de alta prioridade (como via comando Preferences: Color Theme no workspace).

Se o problema persistir, lembre que a comunidade VS Code é enorme – uma busca rápida pelo erro ou comportamento inesperado provavelmente levará a alguma discussão no Stack Overflow ou nos fóruns do VS Code. Você tambem pode contar com a maior comunidade da america latina para tirar suas dúvidas e gerar insights com outros devs, muitas vezes é algo simples faltando e logo você volta aos trilhos.

Conclusão

E aí, bora codar?