TypeScript no VS Code: Setup e Dicas 2026

// .vscode/settings.json
{
  // Formatter padrão
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // TypeScript específico
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.quoteStyle": "single",

  // Organize imports ao salvar
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit"
  },

  // IntelliSense turbinado
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "endOfLine": "lf"
}

// Com inlay hints ativados, o VS Code mostra:

// Antes (sem hints)
const resultado = calcular(10, 20);

// Depois (com hints visíveis no editor)
const resultado: number = calcular(valor1: 10, valor2: 20);
// Os tipos aparecem em cinza claro, sem poluir o código

// Configuração no settings.json:
{
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true
}

// Atalhos de Code Actions no VS Code:

// Ctrl+. (ou Cmd+. no Mac) - Quick Fix
// Exemplos do que aparece:
// - Add missing import
// - Remove unused variable
// - Convert to optional chain
// - Extract to function
// - Generate getter/setter

// Ctrl+Shift+R - Refactor
// Exemplos:
// - Extract variable
// - Extract function
// - Move to new file
// - Rename symbol (F2)

// Shift+Alt+O - Organize Imports
// Remove imports não usados e ordena os restantes

// settings.json - organize imports ao salvar
{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.removeUnusedImports": "explicit"
  }
}

// O que isso faz ao salvar:
// 1. Remove imports que você não usa mais
// 2. Ordena imports alfabeticamente
// 3. Agrupa imports por origem (node_modules vs locais)
// 4. Corrige problemas de ESLint automaticamente

// Antes de salvar:
import { useState, useEffect, useCallback } from 'react';
import { z } from 'zod';
import { Button } from '@/components/Button';
import axios from 'axios';
import { Header } from '@/components/Header';

// Depois de salvar (organizado automaticamente):
import { useCallback, useEffect, useState } from 'react';

import axios from 'axios';
import { z } from 'zod';

import { Button } from '@/components/Button';
import { Header } from '@/components/Header';

// Navegação
Ctrl+Click (Cmd+Click)     → Ir pra definição do tipo/função
Alt+← (Ctrl+-)             → Voltar pra posição anterior
Ctrl+Shift+F               → Buscar em todos os arquivos
Ctrl+P                     → Abrir arquivo por nome
Ctrl+Shift+O               → Ir pra símbolo no arquivo

// Edição
F2                         → Renomear símbolo em todo o projeto
Ctrl+.                     → Quick Fix / Code Actions
Ctrl+D                     → Selecionar próxima ocorrência
Alt+↑/↓                    → Mover linha pra cima/baixo
Ctrl+Shift+K               → Deletar linha inteira

// TypeScript específico
Shift+Alt+O                → Organize Imports
Ctrl+Shift+M               → Abrir painel de Problemas
Ctrl+Space                 → Forçar IntelliSense
Ctrl+Shift+Space           → Ver assinatura da função

// Terminal
Ctrl+`                     → Abrir/fechar terminal
Ctrl+Shift+`               → Novo terminal

// .vscode/settings.json (na raiz do projeto)
{
  // TypeScript version do projeto
  "typescript.tsdk": "node_modules/typescript/lib",

  // Excluir pastas da busca
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  },

  // Esconder arquivos gerados
  "files.exclude": {
    "**/*.js.map": true,
    "**/dist": true
  },

  // ESLint pra TypeScript
  "eslint.validate": [
    "typescript",
    "typescriptreact"
  ],

  // Extensões recomendadas pro time
  // .vscode/extensions.json
  // {
  //   "recommendations": [
  //     "dbaeumer.vscode-eslint",
  //     "esbenp.prettier-vscode",
  //     "usernamehw.errorlens"
  //   ]
  // }
}