Dominando o VS Code: guia para aumentar sua produtividade

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