Configurando seu VS Code para produtividade máxima

1. Preparação do Ambiente de Trabalho

A escolha do tema visual é o primeiro passo para criar um ambiente produtivo. Para longas horas de codificação, temas escuros como One Dark Pro ou Dracula Official reduzem o cansaço visual. Se você trabalha em ambientes muito iluminados, temas claros como GitHub Light podem ser mais adequados.

A fonte também impacta diretamente na legibilidade. JetBrains Mono e Fira Code são excelentes opções por suportarem ligaduras (ligatures), que transformam combinações como != em um único símbolo visual. Configure no settings.json:

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.minimap.enabled": true,
  "breadcrumbs.enabled": true,
  "workbench.activityBar.visible": true,
  "window.zoomLevel": 0
}

O minimap oferece uma visão geral do código, os breadcrumbs facilitam a navegação entre funções e classes, e a barra de atividades mantém acesso rápido às ferramentas principais.

2. Atalhos e Navegação Eficiente

A produtividade no VS Code está diretamente ligada ao uso inteligente de atalhos. Personalize os seguintes atalhos essenciais no arquivo keybindings.json:

// Abrir terminal integrado
{ "key": "ctrl+`", "command": "workbench.action.terminal.toggleTerminal" },

// Alternar entre arquivos recentes
{ "key": "ctrl+e", "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor" },

// Multi-cursor
{ "key": "ctrl+d", "command": "editor.action.addSelectionToNextFindMatch" }

O Command Palette (Ctrl+Shift+P) é seu melhor amigo: digite qualquer comando sem precisar navegar por menus. O Quick Open (Ctrl+P) permite abrir arquivos apenas digitando parte do nome.

Para snippets globais, crie um arquivo global.code-snippets na pasta .vscode:

{
  "Console Log": {
    "prefix": "clog",
    "body": ["console.log('$1:', $1);", "$2"],
    "description": "Log de console com label"
  }
}

3. Extensões Essenciais para Produtividade

Evite o inchaço de extensões instalando apenas o necessário. Um conjunto mínimo e poderoso inclui:

  • Prettier: Formatação automática ao salvar
  • ESLint: Análise de código em tempo real
  • EditorConfig: Consistência entre editores
  • Path Intellisense: Autocomplete para caminhos de arquivos
  • GitLens: Visualização avançada do histórico Git

Configure a formatação automática no settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Error Lens mostra erros e warnings diretamente na linha de código, eliminando a necessidade de olhar para o painel de problemas. GitLens transforma o VS Code em uma ferramenta Git completa, com blame inline, navegação por branches e visualização de histórico.

4. Configuração de Terminal Integrado e Tarefas

O terminal integrado pode ser personalizado para máxima eficiência. Configure o shell padrão e as cores:

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorBlinking": true
}

Crie tasks automáticas no arquivo .vscode/tasks.json para build e teste:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Project",
      "type": "npm",
      "script": "build",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Run Tests",
      "type": "npm",
      "script": "test",
      "group": "test"
    }
  ]
}

Para integração com Git, configure atalhos rápidos:

{ "key": "ctrl+shift+g", "command": "workbench.view.scm" },
{ "key": "ctrl+enter", "command": "git.commit" }

5. Depuração e Hot Reload Avançados

Configure o launch.json para debug multi-plataforma. Para uma aplicação Node.js com React:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node.js",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/server.js",
      "runtimeArgs": ["--inspect"]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug React",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Para hot reload sem perda de estado com Next.js, use a configuração:

{
  "type": "node-terminal",
  "request": "launch",
  "name": "Next.js Dev",
  "command": "npm run dev",
  "serverReadyAction": {
    "pattern": "started server on .+, url: (https?://[^s]+)",
    "uriFormat": "%s",
    "action": "debugWithChrome"
  }
}

Breakpoints condicionais são ativados clicando com o botão direito no número da linha e selecionando "Add Conditional Breakpoint". Use expressões como count === 5 ou user.name === 'admin'. Watch expressions permitem monitorar variáveis específicas durante a execução.

6. Automatização com Snippets e Emmet

Crie snippets personalizados para padrões repetitivos. Para React com TypeScript, crie react-ts.code-snippets:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  ${2}",
      "}",
      "",
      "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = (props) => {",
      "  return (",
      "    <div>",
      "      ${3}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React Functional Component with TypeScript"
  }
}

Configure o Emmet para JSX no settings.json:

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.triggerExpansionOnTab": true
}

Use snippets dinâmicos com variáveis como $TM_FILENAME, $CURRENT_YEAR, e placeholders ($1, $2) para criar templates inteligentes.

7. Performance e Manutenção do VS Code

Para manter o VS Code rápido, desabilite extensões não utilizadas. Verifique as extensões mais pesadas com o comando Developer: Show Running Extensions. Crie workspace settings para projetos específicos em .vscode/settings.json:

{
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true
  }
}

Limpe o cache regularmente com o comando Developer: Reload Window With Extensions Disabled. Use perfis de configuração para diferentes contextos de trabalho:

  • Perfil Frontend: Extensões para React, Vue, CSS
  • Perfil Backend: Extensões para Node.js, Python, Docker
  • Perfil Data Science: Extensões para Jupyter, Python, SQL

Para criar um perfil, use o comando Preferences: Manage Profiles e ative o perfil desejado rapidamente com Ctrl+Shift+P e "Switch Profile".

Com essas configurações, seu VS Code estará otimizado para máxima produtividade, permitindo que você foque no que realmente importa: escrever código de qualidade.

Referências