VS Code Rehberi (Visual Studio Code Guide)

Tam yığın geliştiriciler için kapsamlı VS Code referans rehberi. A comprehensive VS Code reference guide for full-stack developers (PHP/Laravel, React, Python, Node.js, TypeScript) on Ubuntu Linux.

:::tip[Ne Zaman VS Code?]

✅ Her dil, her proje, ücretsiz ve açık kaynak
⚠️ Çok büyük projeler (500K+ satır monorepo) için tam IDE daha iyi performans verebilir
❌ Unity geliştirme için Rider, büyük .NET çözümleri için Visual Studio daha uygun

Önerilen: VS Code + dile özel uzantılar ile neredeyse her senaryo karşılanır. Alternatifler: WebStorm (JS/TS odaklı), Rider (.NET/Unity), Vim/Neovim (terminal tabanlı), Zed (performans odaklı). :::

1. Kısa Yollar (Shortcuts)

Not: Linux kısa yolları listelenmiştir. macOS için Ctrl yerine Cmd kullanılır.

1.1 Genel (General)

Kısa Yol (Shortcut)	Açıklama (Description)
`Ctrl+Shift+P`	Komut paleti (Command Palette)
`Ctrl+P`	Hızlı dosya açma (Quick Open file)
`Ctrl+,`	Ayarlar (Settings)
`Ctrl+K Ctrl+S`	Klavye kısa yolları (Keyboard Shortcuts)
`Ctrl+Shift+N`	Yeni pencere (New window)
`Ctrl+W`	Sekmeyi kapat (Close tab)
`Ctrl+Shift+W`	Pencereyi kapat (Close window)
`Ctrl+N`	Yeni dosya (New file)
`Ctrl+O`	Dosya aç (Open file)
`Ctrl+K Ctrl+O`	Klasör aç (Open folder)
`Ctrl+S`	Kaydet (Save)
`Ctrl+Shift+S`	Farklı kaydet (Save as)
`Ctrl+K S`	Tüm dosyaları kaydet (Save all)
`Ctrl+Z`	Geri al (Undo)
`Ctrl+Shift+Z`	Yeniden yap (Redo)
`Ctrl+K Ctrl+T`	Tema seç (Select theme)
`F11`	Tam ekran (Full screen toggle)
`Ctrl+Shift+V`	Markdown önizleme (Markdown preview)
`Ctrl+K V`	Yan yana Markdown önizleme (Side-by-side Markdown preview)

1.2 Düzenleme (Editing)

Kısa Yol (Shortcut)	Açıklama (Description)
`Ctrl+D`	Sonraki eşleşen kelimeyi seç (Select next occurrence)
`Ctrl+Shift+K`	Satırı sil (Delete line)
`Alt+Up`	Satırı yukarı taşı (Move line up)
`Alt+Down`	Satırı aşağı taşı (Move line down)
`Ctrl+Shift+Alt+Up`	Satırı yukarı kopyala (Copy line up)
`Ctrl+Shift+Alt+Down`	Satırı aşağı kopyala (Copy line down)
`Ctrl+Shift+L`	Tüm eşleşmeleri seç (Select all occurrences)
`Ctrl+L`	Tüm satırı seç (Select entire line)
`Ctrl+Shift+Enter`	Üstte yeni satır ekle (Insert line above)
`Ctrl+Enter`	Altta yeni satır ekle (Insert line below)
`Ctrl+/`	Satırı yorum yap/kaldır (Toggle line comment)
`Ctrl+Shift+A`	Blok yorum (Toggle block comment)
`Tab`	Girinti ekle (Indent)
`Shift+Tab`	Girinti kaldır (Outdent)
`Ctrl+]`	Satır girintisi ekle (Indent line)
`Ctrl+[`	Satır girintisi kaldır (Outdent line)
`Ctrl+Shift+\`	Eşleşen paranteze git (Go to matching bracket)
`Ctrl+Backspace`	Önceki kelimeyi sil (Delete word before cursor)
`Ctrl+Delete`	Sonraki kelimeyi sil (Delete word after cursor)
`Home`	Satır başına git (Go to beginning of line)
`End`	Satır sonuna git (Go to end of line)
`Ctrl+Home`	Dosya başına git (Go to beginning of file)
`Ctrl+End`	Dosya sonuna git (Go to end of file)
`Ctrl+Shift+[`	Bloğu katla (Fold region)
`Ctrl+Shift+]`	Bloğu aç (Unfold region)
`Ctrl+K Ctrl+0`	Tüm blokları katla (Fold all regions)
`Ctrl+K Ctrl+J`	Tüm blokları aç (Unfold all regions)
`Ctrl+K Ctrl+C`	Satırı yorum yap (Add line comment)
`Ctrl+K Ctrl+U`	Satır yorumunu kaldır (Remove line comment)
`Ctrl+Space`	Öneri tetikle (Trigger suggestion)
`Ctrl+Shift+Space`	Parametre ipucu (Trigger parameter hints)
`F2`	Yeniden adlandır (Rename symbol)
`Ctrl+.`	Hızlı düzeltme (Quick fix)

Kısa Yol (Shortcut)	Açıklama (Description)
`Ctrl+G`	Satıra git (Go to line)
`Ctrl+P`	Dosyaya git (Go to file)
`Ctrl+Tab`	Açık sekmeler arası geçiş (Switch between open tabs)
`Ctrl+Shift+O`	Sembole git (Go to symbol in file)
`Ctrl+T`	Çalışma alanında sembole git (Go to symbol in workspace)
`F12`	Tanımına git (Go to definition)
`Alt+F12`	Tanımı gözat (Peek definition)
`Shift+F12`	Referansları göster (Show references)
`Ctrl+Shift+M`	Sorunlar paneli (Problems panel)
`F8`	Sonraki hata (Next error/warning)
`Shift+F8`	Önceki hata (Previous error/warning)
`Alt+Left`	Geri git (Navigate back)
`Alt+Right`	İleri git (Navigate forward)
`Ctrl+K Ctrl+Q`	Son düzenleme yerine git (Go to last edit location)
`Ctrl+Shift+E`	Dosya gezgini (Explorer focus)
`Ctrl+Shift+F`	Arama paneli (Search panel focus)
`Ctrl+Shift+G`	Kaynak kontrol paneli (Source control focus)
`Ctrl+Shift+D`	Debug paneli (Debug panel focus)
`Ctrl+Shift+X`	Eklentiler paneli (Extensions panel focus)

1.4 Arama ve Değiştirme (Search & Replace)

Kısa Yol (Shortcut)	Açıklama (Description)
`Ctrl+F`	Bul (Find)
`Ctrl+H`	Bul ve değiştir (Find and replace)
`Ctrl+Shift+F`	Dosyalarda bul (Find in files)
`Ctrl+Shift+H`	Dosyalarda değiştir (Replace in files)
`F3`	Sonraki eşleme (Next match)
`Shift+F3`	Önceki eşleme (Previous match)
`Alt+Enter`	Tüm eşleşmeleri seç (Select all matches)
`Alt+R`	Regex toggle
`Alt+W`	Tam kelime eşleme toggle (Whole word match toggle)
`Alt+C`	Büyük/küçük harf duyarlılığı toggle (Case sensitive toggle)

1.5 Terminal

Kısa Yol (Shortcut)	Açıklama (Description)
Ctrl+`	Terminal aç/kapat (Toggle terminal)
Ctrl+Shift+`	Yeni terminal (New terminal)
`Ctrl+Shift+5`	Terminali böl (Split terminal)
`Ctrl+PageUp`	Önceki terminal (Previous terminal)
`Ctrl+PageDown`	Sonraki terminal (Next terminal)
`Ctrl+Shift+C`	Harici terminal aç (Open external terminal)

1.6 Multi-Cursor (Çoklu İmleç)

Kısa Yol (Shortcut)	Açıklama (Description)
`Alt+Click`	İmleç ekle (Add cursor)
`Ctrl+Alt+Up`	Yukarı imleç ekle (Add cursor above)
`Ctrl+Alt+Down`	Aşağı imleç ekle (Add cursor below)
`Ctrl+D`	Sonraki eşleşen kelimede imleç (Add cursor at next occurrence)
`Ctrl+Shift+L`	Tüm eşleşmelerde imleç (Add cursor at all occurrences)
`Ctrl+U`	Son imleci geri al (Undo last cursor operation)
`Shift+Alt+I`	Seçilen satırların sonuna imleç (Add cursor to end of each selected line)

1.7 Editor Yönetimi (Editor Management)

Kısa Yol (Shortcut)	Açıklama (Description)
`Ctrl+\`	Editörü böl (Split editor)
`Ctrl+1/2/3`	Editor grubuna odaklan (Focus editor group 1/2/3)
`Ctrl+K Ctrl+Left`	Önceki editor grubuna odaklan (Focus previous group)
`Ctrl+K Ctrl+Right`	Sonraki editor grubuna odaklan (Focus next group)
`Ctrl+B`	Kenar çubuğunu göster/gizle (Toggle sidebar)
`Ctrl+J`	Alt paneli göster/gizle (Toggle bottom panel)
`Ctrl+K Z`	Zen modu (Zen mode)
`Ctrl+Shift+Tab`	Son açılan sekmeye dön (Switch to previous tab)
`Ctrl+K Ctrl+W`	Tüm sekmeleri kapat (Close all tabs)
`Ctrl+K Enter`	Sekmeyi sabit yap (Keep/pin tab)

2. Önerilen Extensionlar (Recommended Extensions)

2.1 Genel (General)

Extension	Açıklama (Description)
Prettier	Kod formatlayıcı (Code formatter) - JS, TS, CSS, HTML, JSON
ESLint	JavaScript/TypeScript linter
GitLens	Gelişmiş Git araçları (Advanced Git features) - blame, history, compare
Auto Rename Tag	Eşleşen HTML/JSX tagini otomatik yeniden adlandır
Path Intellisense	Dosya yolu otomatik tamamlama (File path autocomplete)
Better Comments	Renkli yorumlar (Colored comments) - !, ?, TODO, *
EditorConfig	EditorConfig dosya desteği
Code Spell Checker	Yazım denetimi (Spell checking for code)
Project Manager	Projeler arası hızlı geçiş (Quick project switching)
Bookmark	Kod satırlarını işaretleme (Bookmark lines of code)

2.2 Laravel / PHP

Extension	Açıklama (Description)
PHP Intelephense	PHP dil desteği (PHP language support) - autocomplete, diagnostics, go to definition
Laravel Artisan	Artisan komutlarını VS Code içinden çalıştır (Run Artisan commands)
Laravel Blade Snippets	Blade şablonu snippet'leri
Laravel Blade Formatter	Blade dosyalarını formatla
Laravel Extra Intellisense	Route, view, config, translation autocomplete
PHP Debug	Xdebug entegrasyonu (Xdebug integration)
PHP Namespace Resolver	Namespace otomatik import/sort
PHPUnit	PHPUnit test çalıştırma (Run PHPUnit tests)
Laravel Goto	Config, route, view dosyalarına hızlı git
DotENV	.env dosya syntax renklendirme

2.3 React / JavaScript / TypeScript

Extension	Açıklama (Description)
ES7+ React/Redux/React-Native Snippets	React snippet'leri (rafce, rfc, useState vs.)
Tailwind CSS IntelliSense	Tailwind sınıf otomatik tamamlama (Tailwind class autocomplete)
TypeScript Hero	TypeScript import yönetimi (Import management)
Auto Import	Otomatik import önerileri
CSS Modules	CSS module sınıf tamamlama
vscode-styled-components	Styled-components syntax desteği
Import Cost	Import boyutunu göster (Show import size)
Console Ninja	Console.log çıktısını editörde göster

2.4 Python

Extension	Açıklama (Description)
Python	Microsoft Python dil desteği
Pylance	Python dil sunucusu (Language server) - type checking, autocomplete
Jupyter	Jupyter Notebook desteği
Black Formatter	Python kod formatlayıcı
isort	Python import sıralama
Python Debugger	Python debug desteği
autoDocstring	Otomatik docstring oluşturma

2.5 Docker & DevOps

Extension	Açıklama (Description)
Docker	Dockerfile/docker-compose desteği, container yönetimi
Dev Containers	Container içinde geliştirme (Develop inside containers)
Remote - SSH	Uzak sunucuda geliştirme (Develop on remote machines)
YAML	YAML dil desteği (docker-compose, CI/CD dosyaları için)

2.6 Tema & UI (Theme & UI)

Extension	Açıklama (Description)
One Dark Pro	Atom One Dark teması
Catppuccin	Pastel renkli tema
Material Icon Theme	Dosya/klasör ikonları (File/folder icons)
vscode-icons	Alternatif ikon paketi
Indent Rainbow	Girinti seviyelerini renklendir (Colorize indentation)
Bracket Pair Color DLC	Parantez renklendirme (yerleşik, ayarlardan aktif et)

2.7 Diğer (Other)

Extension	Açıklama (Description)
Live Server	Canlı tarayıcı yenileme ile yerel sunucu (Local dev server with live reload)
REST Client	HTTP istek gönderme (.http dosyaları)
Thunder Client	Postman benzeri API test aracı (GUI-based API testing)
Error Lens	Hataları satır içinde göster (Show errors inline)
Todo Tree	TODO/FIXME yorumlarını ağaç görünümünde listele
Peacock	Her VS Code penceresine farklı renk ata
WakaTime	Kodlama süresi takibi (Coding time tracking)
Markdown All in One	Markdown yazım araçları

2.8 Extension Öneriler Özet Tablosu (Extension Recommendations Summary)

Kategori	Extension	Ne Yapar
Genel	GitLens	Satır bazlı blame, dosya geçmişi, branch karşılaştırma
Genel	Error Lens	Hata ve uyarıları satır içinde anlık gösterir
Genel	Thunder Client	GUI tabanlı REST API test aracı (Postman alternatifi)
Genel	TODO Highlight	TODO, FIXME, HACK gibi anahtar kelimeleri vurgular
Frontend	ES7+ React Snippets	rafce, rfc, useState gibi React snippet'leri
Frontend	Tailwind IntelliSense	Tailwind sınıflarını otomatik tamamlar ve önizler
Frontend	Prettier	Otomatik kod formatlama (JS, TS, CSS, HTML, JSON)
Frontend	ESLint	JavaScript/TypeScript statik analiz ve lint
Backend	PHP Intelephense	PHP autocomplete, diagnostics, go to definition
Backend	Pylance	Python tip kontrolü, akıllı tamamlama, refactoring
Backend	C# Dev Kit	.NET geliştirme, IntelliSense, test runner
Database	SQLTools	SQL bağlantı yönetimi, sorgu çalıştırma, sonuç görüntüleme
Database	MongoDB for VS Code	MongoDB koleksiyonlarını görme, sorgu çalıştırma

Extension Kurulumu (Installation)

Terminal üzerinden toplu kurulum (Bulk install via terminal):

bash

# Genel (General)
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension usernamehw.errorlens

# Laravel / PHP
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension ryannaddy.laravel-artisan
code --install-extension onecentlin.laravel-blade
code --install-extension xdebug.php-debug

# React / JS / TS
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension bradlc.vscode-tailwindcss

# Python
code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance

# Docker
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-containers

# Tema (Theme)
code --install-extension zhuangtongfa.material-theme
code --install-extension pkief.material-icon-theme

3. settings.json Önemli Ayarlar (Important Settings)

Ayarlar dosyası konumu (Settings file location):

Genel (Global): ~/.config/Code/User/settings.json
Proje (Workspace): .vscode/settings.json

json

{
  // ---- Editor Genel (Editor General) ----
  "editor.fontSize": 15,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.stickyScroll.enabled": true,
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 120],
  "editor.accessibilitySupport": "off",
  "editor.inlineSuggest.enabled": true,
  "editor.suggestSelection": "first",

  // ---- Kaydetme (Save) ----
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,

  // ---- Tema & UI (Theme & UI) ----
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "workbench.tree.indent": 16,
  "workbench.editor.enablePreview": false,
  "breadcrumbs.enabled": true,

  // ---- Terminal ----
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.scrollback": 10000,

  // ---- Emmet ----
  "emmet.includeLanguages": {
    "blade": "html",
    "javascript": "javascriptreact",
    "typescriptreact": "html"
  },
  "emmet.triggerExpansionOnTab": true,

  // ---- Formatlayıcı (Formatter) ----
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
    "editor.tabSize": 4
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.formatOnSave": true
  },
  "[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter",
    "editor.tabSize": 4
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": "off",
      "comments": "off",
      "strings": "off"
    }
  },

  // ---- Dosya Haric Tutma (File Exclusions) ----
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/vendor": true,
    "**/__pycache__": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/vendor": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/storage/framework": true
  },

  // ---- PHP ----
  "php.validate.executablePath": "/usr/bin/php",
  "intelephense.environment.phpVersion": "8.3",

  // ---- Python ----
  "python.defaultInterpreterPath": "/usr/bin/python3",

  // ---- Git ----
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "diffEditor.ignoreTrimWhitespace": false,

  // ---- Diğer (Other) ----
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "security.workspace.trust.untrustedFiles": "open",
  "telemetry.telemetryLevel": "off"
}

4. Snippets (Kod Parçacıkları)

Custom Snippet Oluşturma (Creating Custom Snippets)

Snippet dosyası konumu (Snippet file location):

Genel: ~/.config/Code/User/snippets/
Dile özel: ~/.config/Code/User/snippets/javascript.json
Komut: Ctrl+Shift+P > Preferences: Configure User Snippets

Snippet Yapısı (Snippet Structure)

json

{
  "Snippet Adi": {
    "prefix": "tetikleyici_kelime",
    "body": [
      "Satir 1",
      "\t$1 ile tab stop tanimla",
      "\t${2:varsayilan_deger} ile placeholder",
      "$0 son imlec konumu"
    ],
    "description": "Snippet aciklamasi"
  }
}

Snippet değişkenleri:

Değişken	Açıklama
`$1`, `$2`, `$3`	Tab stop - Tab ile sırayla atlanır
`${1:varsayılan}`	Varsayılan değerli placeholder
`${1\|secim1,secim2\|}`	Seçim listesi (dropdown)
`$0`	Son imleç konumu
`$TM_FILENAME`	Dosya adı
`$TM_FILENAME_BASE`	Uzantısız dosya adı
`$TM_DIRECTORY`	Dizin yolu
`$CURRENT_YEAR`	Mevcut yıl
`$CURRENT_MONTH`	Mevcut ay
`$CLIPBOARD`	Pano içeriği
`$UUID`	Rastgele UUID

JavaScript/TypeScript Snippet Örnekleri

Dosya: ~/.config/Code/User/snippets/javascript.json

json

{
  "Console Log": {
    "prefix": "clg",
    "body": "console.log('$1:', $1);$0",
    "description": "Console log with label"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": [
      "const ${1:name} = (${2:params}) => {",
      "\t$0",
      "};"
    ],
    "description": "Arrow function"
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "\t$2",
      "}",
      "",
      "export default function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t);",
      "}"
    ],
    "description": "React functional component with TypeScript"
  },
  "useState Hook": {
    "prefix": "ust",
    "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:type}>(${3:initialValue});$0",
    "description": "React useState hook"
  },
  "useEffect Hook": {
    "prefix": "uef",
    "body": [
      "useEffect(() => {",
      "\t$1",
      "",
      "\treturn () => {",
      "\t\t$2",
      "\t};",
      "}, [${3}]);"
    ],
    "description": "React useEffect hook with cleanup"
  },
  "Try Catch": {
    "prefix": "tc",
    "body": [
      "try {",
      "\t$1",
      "} catch (error) {",
      "\tconsole.error('${2:Error}:', error);",
      "\t$0",
      "}"
    ],
    "description": "Try-catch block"
  },
  "Fetch API": {
    "prefix": "fetcha",
    "body": [
      "const response = await fetch('${1:url}', {",
      "\tmethod: '${2|GET,POST,PUT,DELETE|}',",
      "\theaders: {",
      "\t\t'Content-Type': 'application/json',",
      "\t},",
      "\t${3:body: JSON.stringify(data),}",
      "});",
      "const data = await response.json();$0"
    ],
    "description": "Fetch API async call"
  }
}

PHP/Laravel Snippet Örnekleri

Dosya: ~/.config/Code/User/snippets/php.json

json

{
  "Laravel Controller Method": {
    "prefix": "lcon",
    "body": [
      "public function ${1:index}(Request \\$request): ${2:JsonResponse}",
      "{",
      "\t$0",
      "\treturn response()->json([",
      "\t\t'status' => 'success',",
      "\t]);",
      "}"
    ],
    "description": "Laravel controller method"
  },
  "Laravel Migration Column": {
    "prefix": "lmig",
    "body": "\\$table->${1|string,integer,bigInteger,boolean,text,timestamp,foreignId|}('${2:column_name}')${3:->nullable()};$0",
    "description": "Laravel migration column"
  },
  "Laravel Validation": {
    "prefix": "lval",
    "body": [
      "\\$validated = \\$request->validate([",
      "\t'${1:field}' => '${2:required|string|max:255}',",
      "\t$0",
      "]);"
    ],
    "description": "Laravel request validation"
  },
  "PHP Class": {
    "prefix": "cls",
    "body": [
      "<?php",
      "",
      "namespace ${1:App};",
      "",
      "class ${2:ClassName}",
      "{",
      "\tpublic function __construct(",
      "\t\t$3",
      "\t) {}",
      "",
      "\t$0",
      "}"
    ],
    "description": "PHP class with constructor"
  }
}

Python Snippet Ornekleri

Dosya: ~/.config/Code/User/snippets/python.json

json

{
  "Python Main": {
    "prefix": "pymain",
    "body": [
      "def main():",
      "\t$0",
      "",
      "",
      "if __name__ == '__main__':",
      "\tmain()"
    ],
    "description": "Python main block"
  },
  "Python Class": {
    "prefix": "pycls",
    "body": [
      "class ${1:ClassName}:",
      "\t\"\"\"${2:Class description.}\"\"\"",
      "",
      "\tdef __init__(self, ${3:params}):",
      "\t\t${4:self.${3} = ${3}}$0"
    ],
    "description": "Python class with init"
  }
}

5. Debugging (Hata Ayiklama)

launch.json Konumu (Location)

Proje koku (Project root): .vscode/launch.json

Oluşturma: Ctrl+Shift+D > create a launch.json file

launch.json Yapılandırma Detaylari

launch.json dosyasinda her konfigurasyonda kullanilabilecek ortak alanlar:

Alan	Açıklama
`type`	Debugger turu (node, chrome, php, debugpy, coreclr vb.)
`request`	Baslangic modu: `launch` (yeni surec baslat) veya `attach` (mevcut surece baglan)
`name`	Debug konfigurasyonunun gorunen adi
`program`	Calistirilacak dosya yolu
`args`	Programa gonderilecek komut satiri argumanlari
`cwd`	Calisma dizini
`env`	Ortam degiskenleri (`"env": {"NODE_ENV": "development"}`)
`preLaunchTask`	Debug oncesi calistirilacak tasks.json gorevi
`postDebugTask`	Debug sonrasi calistirilacak gorev
`console`	Konsol turu: `integratedTerminal`, `externalTerminal`, `internalConsole`
`skipFiles`	Adim atlamada atlanacak dosya kaliplari
`sourceMaps`	Kaynak harita destegi (true/false)

Node.js Debug

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node.js - Current File",
      "program": "${file}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Node.js - npm start",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Node.js debug için uygulamayi --inspect veya --inspect-brk bayragi ile baslatarak attach modunu kullanabilirsiniz:

bash

node --inspect-brk app.js
# veya
node --inspect=0.0.0.0:9229 app.js

Chrome / Edge Debug (React uygulamalari için)

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome - React App",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome - Vite App",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

PHP Debug (Xdebug)

Oncelikle Xdebug kurulumu (First install Xdebug):

bash

# Xdebug kurulumu (Ubuntu)
sudo apt install php-xdebug

# php.ini ayarlari (genellikle /etc/php/8.3/cli/conf.d/20-xdebug.ini)
# Asagidaki satirlari ekleyin:

ini

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=127.0.0.1

launch.json yapılandırması:

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "PHP - Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      }
    },
    {
      "name": "PHP - Current File",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9003
    }
  ]
}

Python Debug

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python - Current File",
      "type": "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python - Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    },
    {
      "name": "Python - FastAPI",
      "type": "debugpy",
      "request": "launch",
      "module": "uvicorn",
      "args": ["main:app", "--reload"],
      "jinja": true,
      "justMyCode": true
    }
  ]
}

C# Debug (.NET)

C# Dev Kit veya C# extension kurulduktan sonra:

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  ]
}

Breakpoint Turleri (Breakpoint Types)

Tur (Type)	Açıklama (Description)	Kullanım (Usage)
Breakpoint	Satir uzerinde dur (Pause at line)	Satir numarasinin soluna tikla (Click left of line number)
Conditional Breakpoint	Kosul saglandiginda dur (Pause when condition is true)	Sag tikla > Conditional Breakpoint
Logpoint	Durdurmadan log yaz (Log without pausing)	Sag tikla > Logpoint
Hit Count	N. cagrilamada dur (Pause at Nth hit)	Sag tikla > Hit Count
Exception Breakpoint	Hata firlatildiginda dur (Pause on thrown exceptions)	Debug panelinde ayarla

Breakpoint detaylari:

Conditional Breakpoint: Bir ifade girilir, ifade true dondugunde durur. Ornegin i > 100 veya user.role === 'admin'. Dongu icinde belirli bir kosulu yakalamak için idealdir.
Logpoint: Kod durmaz ama Debug Console'a mesaj yazilir. Susleme: {değişken} seklinde değişken degeri basilir. Örnek mesaj: Kullanici: {user.name}, Rol: {user.role}.
Hit Count: Breakpoint'in kac kez tetiklenmesi gerektigini belirtir. Ornegin 5 girilirse 5. cagrilamada durur. >10 girilirse 10'dan sonra her seferinde durur.
Watch Expressions: Debug panelinin Watch bolumune ifade ekleyerek değişken degerlerini surekli izleyebilirsiniz. Ornegin array.length, Object.keys(data), this.state gibi ifadeler eklenebilir.

Debug Kisa Yollari (Debug Shortcuts)

Kisa Yol (Shortcut)	Açıklama (Description)
`F5`	Debugging baslat / devam et (Start/continue debugging)
`F9`	Breakpoint toggle
`F10`	Adim atla (Step over)
`F11`	Icine gir (Step into)
`Shift+F11`	Disindan cik (Step out)
`Shift+F5`	Durdur (Stop debugging)
`Ctrl+Shift+F5`	Yeniden baslat (Restart debugging)
`Ctrl+Shift+Y`	Debug konsolu (Debug console)

6. Remote Development (Uzaktan Geliştirme)

VS Code'un Remote Development ozellikleri farkli ortamlarda sorunsuz geliştirme yapmanizi sağlar.

Remote - SSH (Uzak Sunucu)

Uzak bir sunucuya SSH ile baglanarak dosyaları dogrudan sunucu uzerinde duzenleyebilirsiniz. Dosyalar yerel makineye indirilmez, tüm islemler uzak makinede gerceklesir.

Kurulum:

Remote - SSH extension'ini kurun
Ctrl+Shift+P > Remote-SSH: Connect to Host
SSH adresini girin: kullanici@sunucu-ip

SSH config dosyasi (~/.ssh/config) ile hızlı erisim:

Host sunucum
    HostName 192.168.1.100
    User deploy
    Port 22
    IdentityFile ~/.ssh/id_rsa

Host production
    HostName prod.example.com
    User admin
    Port 2222
    ForwardAgent yes

Bağlantı sonrasi VS Code uzak sunucudaki dosyaları, terminali ve extension'lari dogrudan kullanir. Extension'lar uzak makineye otomatik kurulur.

WSL (Windows + Linux)

Windows uzerinde Linux ortaminda geliştirme yapmak için WSL entegrasyonu kullanilir. Windows'ta çalışan VS Code, WSL icindeki dosya sistemine ve araclara erisir.

Kurulum:

WSL extension'ini kurun
Ctrl+Shift+P > WSL: Connect to WSL veya terminal'den code . komutu ile acin

Avantajlari:

Linux dosya sistemi performansi (node_modules, git islemleri daha hızlı)
Linux tabanli araclar (gcc, make, python, node) dogrudan kullanilir
Windows ve Linux arasinda sorunsuz gecis

Dev Containers (Docker Ortaminda Geliştirme)

Projeye ozel Docker container icinde geliştirme ortami olusturur. Takim uyelerinin ayni ortamda calismasi garanti edilir.

Proje kokune .devcontainer/devcontainer.json dosyasi ekleyin:

json

{
  "name": "Node.js & PostgreSQL",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "18"
    }
  },
  "forwardPorts": [3000, 5432],
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  }
}

Kullanım: Ctrl+Shift+P > Dev Containers: Reopen in Container

Dev Container avantajlari:

Tüm takim ayni isletim sistemi, runtime surumleri ve araçları kullanir
Yeni gelistirici dakikalar icinde calismaya baslayabilir
Yerel makineyi kirletmeden farkli proje ortamlari olusturulabilir
CI/CD ile ayni container kullanilarak "bende calisiyor" sorunu ortadan kalkar

Remote Development Karşılaştırma

Özellik	SSH	WSL	Dev Containers
Kullanım alani	Uzak sunucu	Windows+Linux	Proje bazli ortam
Performans	Ag hizina bagli	Yerel gibi	Docker overhead
Kurulum kolayligi	SSH key gerekli	WSL kurulumu	Dockerfile gerekli
Dosya sistemi	Uzak sunucu	Linux FS	Container FS
Extension destegi	Uzak kurulum	Uzak kurulum	Container icinde

7. Integrated Terminal (Entegre Terminal)

Terminal Profilleri (Terminal Profiles)

settings.json icinde terminal profili tanimlama:

json

{
  "terminal.integrated.profiles.linux": {
    "bash": {
      "path": "/bin/bash",
      "icon": "terminal-bash"
    },
    "zsh": {
      "path": "/usr/bin/zsh",
      "icon": "terminal"
    },
    "fish": {
      "path": "/usr/bin/fish"
    },
    "node": {
      "path": "/usr/bin/node",
      "icon": "symbol-event"
    },
    "python": {
      "path": "/usr/bin/python3",
      "icon": "symbol-method"
    },
    "laravel-sail": {
      "path": "/bin/bash",
      "args": ["-c", "./vendor/bin/sail shell"],
      "icon": "terminal-bash"
    }
  },
  "terminal.integrated.defaultProfile.linux": "bash"
}

Terminal Yönetimi (Terminal Management)

İşlem (Action)	Yöntem (Method)
Yeni terminal (New terminal)	Ctrl+Shift+`
Terminali bol (Split terminal)	`Ctrl+Shift+5`
Terminali yeniden adlandir (Rename)	Terminal sekmesine sag tikla > Rename
Terminali sonlandir (Kill)	Cop kutusu ikonu (Trash icon)
Terminaller arasi gecis	`Ctrl+PageUp` / `Ctrl+PageDown`
Terminal panelini buyut (Maximize)	Panel basliginda yukari ok
Panelden editore gecis	`Ctrl+1`
Editordan panele gecis	Ctrl+`
Terminalde metin seç (Select text)	`Shift+Click` baslangic ve bitis
Secimi kopyala (Copy selection)	`Ctrl+Shift+C`
Yapistir (Paste)	`Ctrl+Shift+V`
Temizle (Clear)	Terminalde `clear` veya `Ctrl+L`

Terminal Gorevleri (Tasks)

.vscode/tasks.json dosyasi ile gorev tanimlama:

json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Laravel - Serve",
      "type": "shell",
      "command": "php artisan serve",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "NPM - Dev",
      "type": "shell",
      "command": "npm run dev",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Full Stack - Start",
      "dependsOn": ["Laravel - Serve", "NPM - Dev"],
      "dependsOrder": "parallel",
      "problemMatcher": []
    }
  ]
}

Gorev calistirma: Ctrl+Shift+P > Tasks: Run Task

tasks.json ek ayarlari:

Alan	Açıklama
`group.kind`	Gorev grubu: `build`, `test` veya `none`
`group.isDefault`	`true` ise `Ctrl+Shift+B` ile dogrudan çalışır
`presentation.reveal`	Terminal gorunurlugu: `always`, `silent`, `never`
`presentation.panel`	Terminal paneli: `shared`, `dedicated`, `new`
`runOptions.runOn`	`folderOpen` ile klasor acildiginda otomatik çalışır
`dependsOn`	Bagimli gorevler listesi
`dependsOrder`	`parallel` veya `sequence`

8. Git Entegrasyonu (Git Integration)

Source Control Paneli (Source Control Panel)

Kisa Yol (Shortcut)	Açıklama (Description)
`Ctrl+Shift+G`	Source Control panelini aç
`Ctrl+Enter`	Commit mesaji yaziliyken commit et
`+` ikonu	Dosyayi stage'e ekle (Stage file)
`-` ikonu	Dosyayi unstage et (Unstage file)
Goz ikonu	Degisiklikleri göster (Show diff)
`...` menusu	Pull, push, fetch, branch islemleri

Diff Viewer (Fark Goruntuleyici)

İşlem (Action)	Açıklama (Description)
Dosyaya tikla	Yan yana diff göster (Side by side diff)
Inline gorunum	Sag ust `...` > Inline View
Stage secilen satirlar	Diff gorunumunde satir seç > Stage Selected Ranges
Onceki/sonraki degisiklik	`Alt+F3` / `Alt+F5`

Yararli Git Komutları (Useful Git Commands via Command Palette)

Ctrl+Shift+P ile erisim:

Git: Clone
Git: Checkout to...
Git: Create Branch
Git: Delete Branch
Git: Merge Branch
Git: Pull
Git: Push
Git: Stash
Git: Pop Stash
Git: Fetch
Git: Sync

Conflict Resolution (Catisma Cozumu)

Catisma oldugunda VS Code otomatik olarak gosterir:

Accept Current Change - Mevcut degisikligi kabul et (yerel)
Accept Incoming Change - Gelen degisikligi kabul et (uzak)
Accept Both Changes - Her iki degisikligi de kabul et
Compare Changes - Degisiklikleri karsilastir

GitLens Ozellikleri (GitLens Features)

Özellik (Feature)	Açıklama (Description)
Inline Blame	Her satirin yaninda son commit bilgisi
File History	Dosya gecmisi gorunumu
Line History	Satir gecmisi
Compare Branches	Dal karşılaştırma
Interactive Rebase	Gorsel rebase
Stash Explorer	Stash yönetimi

VS Code yerlesik git ozellikleri ile GitLens'i birlikte kullanmak tavsiye edilir. Yerlesik ozellikler temel islemler için yeterlidir; GitLens ise blame, gecmis ve branch karşılaştırma gibi ileri islemler ekler.

9. Keybindings.json (Ozel Kisa Yollar)

Dosya Konumu (File Location)

~/.config/Code/User/keybindings.json

Acmak için: Ctrl+K Ctrl+S > sag ustteki dosya ikonu

Yapi (Structure)

json

[
  {
    "key": "kisa_yol",
    "command": "komut_adi",
    "when": "kosul_ifadesi"
  }
]

Örnek Keybindings (Example Keybindings)

json

[
  // Terminal toggle - Alt+T ile
  {
    "key": "alt+t",
    "command": "workbench.action.terminal.toggleTerminal"
  },

  // Dosya gezgininde yeni dosya - Ctrl+N (explorer odakliyken)
  {
    "key": "ctrl+n",
    "command": "explorer.newFile",
    "when": "explorerViewletFocus"
  },

  // Satiri asagi/yukari tasima (alternatif)
  {
    "key": "ctrl+shift+up",
    "command": "editor.action.moveLinesUpAction",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+down",
    "command": "editor.action.moveLinesDownAction",
    "when": "editorTextFocus"
  },

  // Tum dosyayi sec
  {
    "key": "ctrl+a",
    "command": "editor.action.selectAll",
    "when": "editorTextFocus"
  },

  // Kenar cubugu toggle - Ctrl+B yerine Alt+B
  {
    "key": "alt+b",
    "command": "workbench.action.toggleSidebarVisibility"
  },

  // Terminal split - Alt+S
  {
    "key": "alt+s",
    "command": "workbench.action.terminal.split",
    "when": "terminalFocus"
  },

  // Hizli commit - Ctrl+Shift+Enter (SCM odakliyken)
  {
    "key": "ctrl+shift+enter",
    "command": "git.commit",
    "when": "scmRepository"
  },

  // Onceki kisa yolu kaldir (bir kisa yolu devre disi birakmak icin)
  {
    "key": "ctrl+k ctrl+d",
    "command": "-editor.action.moveSelectionToNextFindMatch"
  }
]

Keybinding optimizasyonu için ipuclari:

Sik kullandiginiz komutları tek el ile ulasilabilir kisa yollara atayin
Ctrl+K ile baslayan chord binding'ler iki asamali kisa yollar tanimlamaya yarar
Bir kisa yolu kaldirmak için komut basina - ekleyin (örnek: "-editor.action.selectAll")
Dile ozel kisa yollar için when kosulunda editorLangId kullanin

Yaygin When Kosullari (Common When Clauses)

Kosul (Clause)	Açıklama (Description)
`editorTextFocus`	Editor odakli (Editor has focus)
`terminalFocus`	Terminal odakli (Terminal has focus)
`explorerViewletFocus`	Dosya gezgini odakli
`editorLangId == 'php'`	Dil PHP oldugunda
`editorLangId == 'python'`	Dil Python oldugunda
`inDebugMode`	Debug modundayken
`!inDebugMode`	Debug modunda degilken
`scmRepository`	SCM deposu varken
`editorHasSelection`	Secim varken
`editorHasMultipleSelections`	Birden fazla secim varken
`resourceExtname == '.blade.php'`	Dosya uzantisi .blade.php oldugunda

10. Workspace Settings (Calisma Alani Ayarlari)

Workspace vs User Settings

VS Code'da iki seviye ayar vardir:

User Settings (Kullanici Ayarlari): Tüm projelerde gecerli olan genel ayarlar. Konum: ~/.config/Code/User/settings.json
Workspace Settings (Calisma Alani Ayarlari): Yalnizca o projede gecerli ayarlar. Konum: .vscode/settings.json

Workspace ayarlari her zaman user ayarlarini gecer. Bu sayede her proje için farkli formatlayici, tab boyutu veya lint kurallari tanimlanabilir.

Profile Switching (Profil Gecisi)

VS Code profilleri farkli projeler veya diller için ayri ayar, extension ve keybinding setleri tanimlamanizi sağlar.

Profil oluşturma: Ctrl+Shift+P > Profiles: Create Profile

Örnek profil senaryolari:

Profil	Kullanım	Extension Seti
Frontend	React/Vue/Angular projeleri	ESLint, Prettier, Tailwind, ES7+ React
Backend PHP	Laravel projeleri	Intelephense, Xdebug, Laravel Artisan
Python	Django/FastAPI projeleri	Pylance, Black, Jupyter
Minimal	Hafif düzenleme, notlar	Markdown All in One, Code Spell Checker

Profiller arasi gecis: Ctrl+Shift+P > Profiles: Switch Profile

Profil ihrac ve ithal: Profiles: Export Profile ve Profiles: Import Profile ile takim uyeleriyle paylasilabilir.

.vscode Klasor Yapisi (Folder Structure)

proje-koku/
  .vscode/
    settings.json       # Proje bazli ayarlar
    launch.json         # Debug yapilandirmasi
    tasks.json          # Gorev tanimlari
    extensions.json     # Onerilen extension'lar
    snippets.code-snippets  # Proje bazli snippet'ler

Proje Bazli settings.json Ornegi (Project-Level Settings)

Laravel projesi için:

json

{
  "editor.tabSize": 4,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
    "editor.tabSize": 4
  },
  "[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter",
    "editor.tabSize": 4
  },
  "files.associations": {
    "*.blade.php": "blade"
  },
  "emmet.includeLanguages": {
    "blade": "html"
  },
  "intelephense.environment.phpVersion": "8.3",
  "intelephense.files.maxSize": 5000000,
  "search.exclude": {
    "**/vendor": true,
    "**/node_modules": true,
    "**/storage/framework": true,
    "**/bootstrap/cache": true,
    "public/build": true
  }
}

extensions.json - Önerilen Eklentiler (Recommended Extensions)

.vscode/extensions.json dosyasi ile takim uyelerine eklenti onerebilirsiniz:

json

{
  "recommendations": [
    "bmewburn.vscode-intelephense-client",
    "xdebug.php-debug",
    "ryannaddy.laravel-artisan",
    "onecentlin.laravel-blade",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "eamodio.gitlens",
    "usernamehw.errorlens"
  ],
  "unwantedRecommendations": []
}

Multi-Root Workspace (Çoklu Proje Calisma Alani)

workspace.code-workspace dosyasi:

json

{
  "folders": [
    {
      "name": "Backend (Laravel)",
      "path": "./backend"
    },
    {
      "name": "Frontend (React)",
      "path": "./frontend"
    },
    {
      "name": "Docs",
      "path": "./docs"
    }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay"
  },
  "extensions": {
    "recommendations": [
      "esbenp.prettier-vscode",
      "dbaeumer.vscode-eslint"
    ]
  }
}

Acmak için: code workspace.code-workspace veya File > Open Workspace from File

11. Verimlilik (Productivity)

Multi-Cursor İleri Teknikler

Temel multi-cursor'un otesinde ileri kullanım senaryolari:

Teknik	Kisa Yol / Yöntem	Açıklama
Regex ile çoklu secim	`Ctrl+H` > Regex aç > `Alt+Enter`	Regex ile eşleşen tüm yerlerde imlec oluştur
Blok secimi (Box select)	`Shift+Alt+Drag`	Dikdortgen alan secimi, sutun bazli düzenleme
Satir sonlarina imlec	Satirlari seç > `Shift+Alt+I`	Secilen her satirin sonuna imlec ekle
Eslesen kelimeleri atlama	`Ctrl+D` sonra `Ctrl+K Ctrl+D`	Mevcut eslemeyi atla, sonrakine gec
Tüm eslesmelerde düzenleme	`Ctrl+Shift+L`	Secili kelimenin tüm orneklerini ayni anda düzenle

Örnek: Bir değişken adini tüm dosyada degistirmek için kelimeyi secin, Ctrl+Shift+L ile tüm eslesmeleri secin, yeni adi yazin. F2 (Rename Symbol) semantik yeniden adlandirma yapar ve import'lari da gunceller.

Settings Sync (Ayar Senkronizasyonu)

VS Code ayarlarini cihazlar arasinda senkronize etmek için:

Ctrl+Shift+P > Settings Sync: Turn On
GitHub veya Microsoft hesabi ile giris yapin
Senkronize edilecek ogeleri secin: Settings, Keybindings, Extensions, Snippets, UI State

Senkronizasyon cakismalarinda VS Code birlestime veya taraf secmeye olanak tanir.

Git Integration İpuçları

VS Code icinde git islemlerini hizlandirmak için:

Source Control gorunumunde dosyalara tek tikla ile diff goruntuleyebilirsiniz
Gutter indicators: Editorde satir numaralarinin yaninda yesil (eklenen), mavi (degisen) ve kirmizi (silinen) satirlar isaretlenir
Timeline gorunumu: Explorer panelinin altinda dosya gecmisini gorsel olarak izleyebilirsiniz
Inline blame: GitLens ile her satirin yaninda son degistiren kisi ve commit bilgisi gorunur
Smart Commit: git.enableSmartCommit ayari ile stage'e almadan dogrudan commit yapabilirsiniz
Auto Fetch: git.autofetch ayari ile uzak depo degisiklikleri otomatik cekilir

Font Ligatures (Yazi Tipi Baglantimlari)

Font ligature destegi kodda ozel karakter birlesimlerini daha okunakli sembollerle gosterir. Ornegin => bir ok sembolune, !== ozel bir esitsizlik sembolune donusur.

Destekleyen fontlar: JetBrains Mono, Fira Code, Cascadia Code, Victor Mono.

Etkinlestirme:

json

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true
}

Kullanisli Editor Ozellikleri

Linked Editing: HTML'de bir tag'i degistirdiginizde eşleşen kapanma tag'i otomatik guncellenir. "editor.linkedEditing": true ile etkinlestirilir.
Bracket Pair Colorization: Eslesen parantezler farkli renklerde gosterilir. "editor.bracketPairColorization.enabled": true
Inlay Hints: Parametre adlarini ve tip bilgilerini kodun icinde gosterir. TypeScript ve Python için cok faydalidir.
Sticky Scroll: Fonksiyon/sınıf basliklarini kaydirirken ust kisimda sabit tutar, büyük dosyalarda nerede oldugunuzu kolayca gorebilirsiniz.
Editor Rulers: "editor.rulers": [80, 120] ile satir uzunlugu kilavuz cizgileri ekleyebilirsiniz.

12. İpuçları & Tricks (Tips & Tricks)

Zen Mode

Dikkat dagitici tüm ogelerden arinmis tam ekran modu.

Etkinlestir: Ctrl+K Z
Cikis: Esc Esc (iki kez Escape)
Ayar: "zenMode.hideLineNumbers": false (satir numaralarini gizleme)

Minimap

Dosyanin küçük onizlemesi (sag kenarda).

json

{
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.scale": 1,
  "editor.minimap.showSlider": "mouseover"
}

Breadcrumbs (İçerik Haritasi)

Dosya yolunu ve sembol hiyerarsisini gosteren ust cubuk.

json

{
  "breadcrumbs.enabled": true,
  "breadcrumbs.filePath": "on",
  "breadcrumbs.symbolPath": "on"
}

Sticky Scroll (Yapisan Basliklar)

Fonksiyon/sınıf basliklarini kaydirirken gorunur tutar.

json

{
  "editor.stickyScroll.enabled": true,
  "editor.stickyScroll.maxLineCount": 5
}

Terminal Split Kullanimi

Terminal bolme ile ayni anda birden fazla islemi izleyebilirsiniz:

Ctrl+Shift+5 ile terminali bolerek yan yana iki terminal acin
Sol panelde sunucu (npm run dev), sag panelde testler (npm test -- --watch)
Terminal sekmesine sag tiklayarak renk atayabilir, yeniden adlandirabilirsiniz
Ctrl+PageUp / Ctrl+PageDown ile terminaller arasi hizla gecis yapin

Emmet İpuçları (Emmet Tips)

HTML ve JSX icinde hızlı kod yazma:

Kisaltma (Abbreviation)	Sonuc (Result)
`div.container`	`<div class="container"></div>`
`ul>li*5`	5 li ogeli ul
`div>p+span`	div icinde p ve span
`.item$*3`	item1, item2, item3 class'li 3 div
`a[href="#"]`	`<a href="#"></a>`
`input:email`	`<input type="email">`
`form>input:text+input:submit`	Form ile text ve submit input
`div>(header>h1)+main+footer`	Gruplamali yapi
`lorem`	Lorem ipsum metni
`lorem10`	10 kelimelik lorem ipsum

Hızlı Dosya Oluşturma (Quick File Creation)

Explorer panelinde Ctrl+P ile dosya adi yazarken yeni dosya olusturabilirsiniz. Veya komut satirindan:

bash

# VS Code ile dosya olustur ve ac
code yeni-dosya.ts

# Birden fazla dosya ac
code src/index.ts src/utils.ts src/types.ts

# Belirli satira git
code -g dosya.ts:42

# Diff gorunumu
code --diff dosya1.ts dosya2.ts

# Extension kurulumu
code --install-extension extension-id

# Extension listesi
code --list-extensions

Yararli Ayarlar (Useful Miscellaneous Settings)

json

{
  // Dosyada yapilan degisikligi tab'da goster
  "workbench.editor.highlightModifiedTabs": true,

  // Kapanmis sekmeleri hatirla
  "workbench.editor.restoreViewState": true,

  // Dosya kaydettiginde eslint sorunlarini duzelt
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Otomatik parantez kapatma
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always",

  // Satir numarasi gosterimi
  "editor.lineNumbers": "relative",

  // Dosya ikonlari
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.folders.theme": "specific",

  // Terminal'de dosya linklerini tiklama
  "terminal.integrated.enableFileLinks": "on",

  // Editorden sonraki boslugu gizle
  "editor.scrollBeyondLastLine": false,

  // Otomatik kapanan tag
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,

  // Otomatik import guncelleme (dosya tasima/yeniden adlandirma)
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Faydali Komut Paleti Komutları (Useful Command Palette Commands)

Ctrl+Shift+P ile erisin:

Komut (Command)	Açıklama (Description)
`Reload Window`	Pencereyi yeniden yükle (extension sorunlarinda faydali)
`Transform to Uppercase`	Secili metni büyük harfe cevir
`Transform to Lowercase`	Secili metni küçük harfe cevir
`Sort Lines Ascending`	Satirlari A-Z sirala
`Sort Lines Descending`	Satirlari Z-A sirala
`Join Lines`	Secili satirlari birlestir
`Toggle Word Wrap`	Kelime sarmalamayi aç/kapat
`Format Document`	Belgeyi formatla
`Trim Trailing Whitespace`	Sondaki bosluklari temizle
`Change Language Mode`	Dil modunu değiştir (syntax highlight)
`Preferences: Open Default Settings (JSON)`	Tüm varsayılan ayarlari gor
`Developer: Toggle Developer Tools`	Gelistirici araçları
`Emmet: Wrap with Abbreviation`	Secili kodu Emmet kisaltmasiyla sar
`Emmet: Remove Tag`	HTML tag'ini kaldir, icerigi birak

Performans İpuçları (Performance Tips)

Gereksiz extension'lari devre disi birakin - Kullanmadiginiz extension'lari workspace bazinda devre disi birakin
files.exclude kullanin - node_modules, vendor gibi büyük klasorleri gizleyin
search.exclude kullanin - Aramada gereksiz klasorleri haric tutun
files.watcherExclude - Dosya izleyicisinden büyük klasorleri haric tutun:

json

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/vendor/**": true,
    "**/storage/**": true,
    "**/.next/**": true
  }
}

Büyük dosyalarda minimap'i kapatin - "editor.minimap.enabled": false
Telemetry'yi kapatin - "telemetry.telemetryLevel": "off"
Large file threshold ayarlayin - Büyük dosyalar için tokenization devre disi birakilir, varsayılan 20MB
Extension bisect kullanin - Hangi extension'in sorun cikardigini bulmak için: Help > Start Extension Bisect

Hızlı Erisim ve Navigasyon Ozeti

Amac	Yöntem
Herhangi bir dosyayi aç	`Ctrl+P` ile dosya adi yazin
Herhangi bir sembolu bul	`Ctrl+T` ile sembol adi yazin
Herhangi bir komut çalıştır	`Ctrl+Shift+P` ile komut yazin
Herhangi bir ayari değiştir	`Ctrl+,` ile ayar adi yazin
Herhangi bir satira git	`Ctrl+G` ile satir numarasi yazin
Son düzenleme yerine don	`Ctrl+K Ctrl+Q`
Onceki konuma geri git	`Alt+Left`
Tanimina git	`F12`
Tanimi gozat (popup)	`Alt+F12`
Referanslari listele	`Shift+F12`

Bu rehber VS Code 1.96+ surumu için hazirlanmistir. Kisa yollar ve ozellikler sürüm guncellemeleriyle degisebilir. This guide is prepared for VS Code 1.96+. Shortcuts and features may change with version updates.

VS Code Rehberi (Visual Studio Code Guide) ​

1. Kısa Yollar (Shortcuts) ​

1.1 Genel (General) ​

1.2 Düzenleme (Editing) ​

1.3 Navigasyon (Navigation) ​

1.4 Arama ve Değiştirme (Search & Replace) ​

1.5 Terminal ​

1.6 Multi-Cursor (Çoklu İmleç) ​

1.7 Editor Yönetimi (Editor Management) ​

2. Önerilen Extensionlar (Recommended Extensions) ​

2.1 Genel (General) ​

2.2 Laravel / PHP ​

2.3 React / JavaScript / TypeScript ​

2.4 Python ​

2.5 Docker & DevOps ​

2.6 Tema & UI (Theme & UI) ​

2.7 Diğer (Other) ​

2.8 Extension Öneriler Özet Tablosu (Extension Recommendations Summary) ​

Extension Kurulumu (Installation) ​

3. settings.json Önemli Ayarlar (Important Settings) ​

4. Snippets (Kod Parçacıkları) ​

Custom Snippet Oluşturma (Creating Custom Snippets) ​

Snippet Yapısı (Snippet Structure) ​

JavaScript/TypeScript Snippet Örnekleri ​

PHP/Laravel Snippet Örnekleri ​

Python Snippet Ornekleri ​

5. Debugging (Hata Ayiklama) ​

launch.json Konumu (Location) ​

launch.json Yapılandırma Detaylari ​

Node.js Debug ​

Chrome / Edge Debug (React uygulamalari için) ​

PHP Debug (Xdebug) ​

Python Debug ​

C# Debug (.NET) ​

Breakpoint Turleri (Breakpoint Types) ​

Debug Kisa Yollari (Debug Shortcuts) ​

6. Remote Development (Uzaktan Geliştirme) ​

Remote - SSH (Uzak Sunucu) ​

WSL (Windows + Linux) ​

Dev Containers (Docker Ortaminda Geliştirme) ​

Remote Development Karşılaştırma ​

7. Integrated Terminal (Entegre Terminal) ​

Terminal Profilleri (Terminal Profiles) ​

Terminal Yönetimi (Terminal Management) ​

Terminal Gorevleri (Tasks) ​

8. Git Entegrasyonu (Git Integration) ​

Source Control Paneli (Source Control Panel) ​

Diff Viewer (Fark Goruntuleyici) ​

Yararli Git Komutları (Useful Git Commands via Command Palette) ​

Conflict Resolution (Catisma Cozumu) ​

GitLens Ozellikleri (GitLens Features) ​

9. Keybindings.json (Ozel Kisa Yollar) ​

Dosya Konumu (File Location) ​

Yapi (Structure) ​

Örnek Keybindings (Example Keybindings) ​

Yaygin When Kosullari (Common When Clauses) ​

10. Workspace Settings (Calisma Alani Ayarlari) ​

Workspace vs User Settings ​

Profile Switching (Profil Gecisi) ​

.vscode Klasor Yapisi (Folder Structure) ​

Proje Bazli settings.json Ornegi (Project-Level Settings) ​

extensions.json - Önerilen Eklentiler (Recommended Extensions) ​

Multi-Root Workspace (Çoklu Proje Calisma Alani) ​

11. Verimlilik (Productivity) ​

Multi-Cursor İleri Teknikler ​

Settings Sync (Ayar Senkronizasyonu) ​

Git Integration İpuçları ​

Font Ligatures (Yazi Tipi Baglantimlari) ​

Kullanisli Editor Ozellikleri ​

12. İpuçları & Tricks (Tips & Tricks) ​

Zen Mode ​

Minimap ​

Breadcrumbs (İçerik Haritasi) ​

Sticky Scroll (Yapisan Basliklar) ​

Terminal Split Kullanimi ​

Emmet İpuçları (Emmet Tips) ​

Hızlı Dosya Oluşturma (Quick File Creation) ​

Yararli Ayarlar (Useful Miscellaneous Settings) ​

Faydali Komut Paleti Komutları (Useful Command Palette Commands) ​

Performans İpuçları (Performance Tips) ​

VS Code Rehberi (Visual Studio Code Guide)

1. Kısa Yollar (Shortcuts)

1.1 Genel (General)

1.2 Düzenleme (Editing)

1.3 Navigasyon (Navigation)

1.4 Arama ve Değiştirme (Search & Replace)

1.5 Terminal

1.6 Multi-Cursor (Çoklu İmleç)

1.7 Editor Yönetimi (Editor Management)

2. Önerilen Extensionlar (Recommended Extensions)

2.1 Genel (General)

2.2 Laravel / PHP

2.3 React / JavaScript / TypeScript

2.4 Python

2.5 Docker & DevOps

2.6 Tema & UI (Theme & UI)

2.7 Diğer (Other)

2.8 Extension Öneriler Özet Tablosu (Extension Recommendations Summary)

Extension Kurulumu (Installation)

3. settings.json Önemli Ayarlar (Important Settings)

4. Snippets (Kod Parçacıkları)

Custom Snippet Oluşturma (Creating Custom Snippets)

Snippet Yapısı (Snippet Structure)

JavaScript/TypeScript Snippet Örnekleri

PHP/Laravel Snippet Örnekleri

Python Snippet Ornekleri

5. Debugging (Hata Ayiklama)

launch.json Konumu (Location)

launch.json Yapılandırma Detaylari

Node.js Debug

Chrome / Edge Debug (React uygulamalari için)

PHP Debug (Xdebug)

Python Debug

C# Debug (.NET)

Breakpoint Turleri (Breakpoint Types)

Debug Kisa Yollari (Debug Shortcuts)

6. Remote Development (Uzaktan Geliştirme)

Remote - SSH (Uzak Sunucu)

WSL (Windows + Linux)

Dev Containers (Docker Ortaminda Geliştirme)

Remote Development Karşılaştırma

7. Integrated Terminal (Entegre Terminal)

Terminal Profilleri (Terminal Profiles)

Terminal Yönetimi (Terminal Management)

Terminal Gorevleri (Tasks)

8. Git Entegrasyonu (Git Integration)

Source Control Paneli (Source Control Panel)

Diff Viewer (Fark Goruntuleyici)

Yararli Git Komutları (Useful Git Commands via Command Palette)

Conflict Resolution (Catisma Cozumu)

GitLens Ozellikleri (GitLens Features)

9. Keybindings.json (Ozel Kisa Yollar)

Dosya Konumu (File Location)

Yapi (Structure)

Örnek Keybindings (Example Keybindings)

Yaygin When Kosullari (Common When Clauses)

10. Workspace Settings (Calisma Alani Ayarlari)

Workspace vs User Settings

Profile Switching (Profil Gecisi)

.vscode Klasor Yapisi (Folder Structure)

Proje Bazli settings.json Ornegi (Project-Level Settings)

extensions.json - Önerilen Eklentiler (Recommended Extensions)

Multi-Root Workspace (Çoklu Proje Calisma Alani)

11. Verimlilik (Productivity)

Multi-Cursor İleri Teknikler

Settings Sync (Ayar Senkronizasyonu)

Git Integration İpuçları

Font Ligatures (Yazi Tipi Baglantimlari)

Kullanisli Editor Ozellikleri

12. İpuçları & Tricks (Tips & Tricks)

Zen Mode

Minimap

Breadcrumbs (İçerik Haritasi)

Sticky Scroll (Yapisan Basliklar)

Terminal Split Kullanimi

Emmet İpuçları (Emmet Tips)

Hızlı Dosya Oluşturma (Quick File Creation)

Yararli Ayarlar (Useful Miscellaneous Settings)

Faydali Komut Paleti Komutları (Useful Command Palette Commands)

Performans İpuçları (Performance Tips)