VS Code Verimlilik: Extension'lar, Shortcut'lar ve İpuçları

VS Code Verimlilik: Extension'lar, Shortcut'lar ve İpuçları

Visual Studio Code, web geliştiricilerin büyük çoğunluğunun tercih ettiği kod editörüdür. Ancak VS Code'un gerçek gücü, doğru yapılandırma, extension'lar ve kısayollarla ortaya çıkar. Bu rehberde günlük geliştirme sürecinizi önemli ölçüde hızlandıracak VS Code ipuçlarını, olmazsa olmaz extension'ları ve az bilinen ama güçlü özellikleri detaylı olarak inceliyoruz.

Temel Kısayollar

VS Code'da verimli çalışmanın temeli klavye kısayollarıdır. En çok kullanacağınız kısayollar:

# Dosya ve Navigasyon
Ctrl+P              → Hızlı dosya açma (Quick Open)
Ctrl+Shift+P        → Komut Paleti (Command Palette)
Ctrl+Shift+E        → Explorer paneli
Ctrl+Shift+F        → Projede arama
Ctrl+Shift+G        → Git paneli
Ctrl+`              → Terminal aç/kapat

# Düzenleme
Ctrl+D              → Kelimeyi seç / sonraki aynı kelimeyi seç
Ctrl+Shift+L        → Tüm aynı kelimeleri seç
Alt+Up/Down         → Satırı yukarı/aşağı taşı
Shift+Alt+Up/Down   → Satırı kopyala
Ctrl+Shift+K        → Satırı sil
Ctrl+/              → Satırı yorum yap/aç
Ctrl+Shift+A        → Blok yorum

# Multi-cursor
Alt+Click           → Birden fazla cursor ekle
Ctrl+Alt+Up/Down    → Yukarı/aşağı cursor ekle
Ctrl+Shift+L        → Seçili kelimenin tüm tekrarlarına cursor

# Kod Navigasyonu
F12                 → Tanıma git (Go to Definition)
Alt+F12             → Tanıma göz at (Peek Definition)
Shift+F12           → Referansları bul
Ctrl+Shift+O        → Dosyadaki semboller
Ctrl+T              → Projedeki semboller

Olmazsa Olmaz Extension'lar

Her web geliştiricinin yüklemesi gereken temel extension'lar:

// .vscode/extensions.json
{
  "recommendations": [
    // Kod Kalitesi
    "dbaeumer.vscode-eslint",           // ESLint entegrasyonu
    "esbenp.prettier-vscode",           // Prettier formatlama
    "usernamehw.errorlens",             // Hataları satır içinde göster

    // Geliştirme Deneyimi
    "bradlc.vscode-tailwindcss",        // Tailwind CSS IntelliSense
    "dsznajder.es7-react-js-snippets",  // React snippet'ları
    "prisma.prisma",                     // Prisma ORM desteği

    // Git
    "eamodio.gitlens",                  // Git süper güçleri
    "mhutchie.git-graph",              // Git dallanma grafiği

    // Genel Araçlar
    "christian-kohler.path-intellisense", // Dosya yolu otomatik tamamlama
    "streetsidesoftware.code-spell-checker", // Yazım denetimi
    "formulahendry.auto-rename-tag",     // HTML tag otomatik yeniden adlandırma
    "naumovs.color-highlight",           // Renk kodlarını görselleştir

    // AI Araçları
    "github.copilot",                    // GitHub Copilot
    "anthropic.claude-code"              // Claude Code
  ]
}

Workspace Ayarları

Proje bazında VS Code ayarlarını yapılandırmak, takım tutarlılığı için kritiktir:

// .vscode/settings.json
{
  // Formatlama
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // TypeScript
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",

  // Editor
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "editor.stickyScroll.enabled": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.linkedEditing": true,

  // Dosya Yönetimi
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true,
    "**/coverage": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/.next": true,
    "**/dist": true
  },

  // Terminal
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.fontSize": 14,

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

  // Tailwind CSS
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

VS Code Snippet'ları

Sık kullandığınız kod kalıpları için özel snippet'lar oluşturun:

// .vscode/typescriptreact.code-snippets
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:${TM_FILENAME_BASE}}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:${TM_FILENAME_BASE}}({ $3 }: ${1:${TM_FILENAME_BASE}}Props) {",
      "  return (",
      "    
",
      "      $0",
      "    
",
      "  );",
      "}"
    ],
    "description": "React Functional Component with TypeScript"
  },
  "useState Hook": {
    "prefix": "us",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:string}>(${3:''});"
    ],
    "description": "useState hook with TypeScript"
  },
  "useEffect Hook": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "",
      "  return () => {",
      "    $2",
      "  };",
      "}, [$3]);"
    ],
    "description": "useEffect hook with cleanup"
  },
  "Console Log Variable": {
    "prefix": "clv",
    "body": [
      "console.log('${1:variable}:', ${1:variable});"
    ],
    "description": "Console log with variable name"
  }
}

Debugging Yapılandırması

VS Code'un yerleşik debugger'ını yapılandırarak breakpoint'ler ile kod akışını izleyin:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: Debug Server",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "skipFiles": ["/**"],
      "console": "integratedTerminal"
    },
    {
      "name": "Next.js: Debug Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "name": "Jest: Current File",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${relativeFile}",
        "--config",
        "jest.config.ts",
        "--no-cache"
      ],
      "console": "integratedTerminal"
    }
  ]
}

Verimlilik İpuçları

• Zen Mode: Ctrl+K Z ile dikkat dağıtıcı tüm panelleri gizleyerek sadece koda odaklanın
• Sticky Scroll: Uzun dosyalarda hangi fonksiyon/class içinde olduğunuzu üstte gösterir
• Timeline View: Dosyanın Git geçmişini Explorer panelinde görüntüleyin
• Emmet Abbreviations: HTML/JSX yazarken div.container>ul>li*5 gibi kısaltmalar kullanın
• Multi-root Workspaces: Birden fazla proje klasörünü tek bir pencerede açın
• Task Runner: .vscode/tasks.json ile build, test gibi görevleri tanımlayın
• Diff Editor: İki dosyayı karşılaştırmak için code --diff file1.ts file2.ts

Terminal İpuçları

# VS Code entegre terminalde faydalı komutlar

# Terminal'i ikiye böl
Ctrl+Shift+5

# Terminaller arası geçiş
Ctrl+PageUp / Ctrl+PageDown

# Terminal'i yeniden adlandır
# Terminal sekmesine sağ tıklayıp "Rename" seçin

# Terminal profile'ları (settings.json)
"terminal.integrated.profiles.windows": {
  "Git Bash": {
    "source": "Git Bash",
    "icon": "terminal-bash"
  },
  "PowerShell": {
    "source": "PowerShell",
    "icon": "terminal-powershell"
  }
}

Performans Optimizasyonu

Büyük projelerde VS Code'un hızlı kalması için:

• files.watcherExclude ile gereksiz klasörleri izlemeden çıkarın
• Kullanmadığınız extension'ları devre dışı bırakın veya workspace bazında etkinleştirin
• search.exclude ile arama kapsamını daraltın
• Minimap'i kapatın ("editor.minimap.enabled": false)
• Extension bisect özelliği ile yavaşlatan extension'ı tespit edin

Sonuç

VS Code, doğru yapılandırıldığında geliştirme verimliliğinizi katbekat artıran güçlü bir araçtır. Kısayolları öğrenmek, doğru extension'ları seçmek, workspace ayarlarını standardize etmek ve snippet'larla tekrarlayan işleri otomatikleştirmek, profesyonel geliştirici deneyiminin temelini oluşturur. Bu rehberdeki ayarları projenize uygulayarak hemen farkı görmeye başlayabilirsiniz.

Kaynaklar

• VS Code Resmi Dokümantasyonu
• VS Code Klavye Kısayolları
• VS Code Extension Marketplace
• VS Code Debugging Rehberi