VS Code: Flutter, React Native ve Ionic için düzenleyici

VS Code nedir?

VS Code, Microsoft tarafından 2015 yılında piyasaya sürülen bir kaynak kodu düzenleyicisidir. Visual Studio'nun aksine, VS Code tam teşekküllü bir IDE değildir — uzantılar aracılığıyla IDE seviyesine genişletilebilen hafif bir düzenleyicidir. Mobil geliştirme için VS Code, Flutter (Dart Code uzantısı aracılığıyla), React Native (React Native Tools uzantısı) ve Ionic'i (yerleşik TypeScript desteği aracılığıyla) destekler.

Stack Overflow Developer Survey 2025'e göre, VS Code tüm geliştiricilerin %74'ü tarafından kullanılmakta ve dünyanın en popüler düzenleyicisi haline gelmektedir. Mobil geliştirme için, Flutter geliştiricilerinin %68'i, React Native geliştiricilerinin %55'i ve Ionic geliştiricilerinin %71'i tarafından tercih edilmektedir. Başlıca nedenler: hız, genişletilebilirlik, yerleşik Git ve terminal.

VS Code mimarisi, otomatik tamamlama ve teşhis için Language Server Protocol (LSP), hata ayıklama için Debug Adapter Protocol (DAP) ve VSIX formatındaki uzantılar üzerine inşa edilmiştir. Düzenleyici, Electron (Chromium + Node.js) üzerinde çalışır ve uzantı oluşturmak için JavaScript/TypeScript kullanımına olanak tanır. VS Code, Windows, macOS ve Linux'ta kullanılabilir.

Mobil geliştirme için VS Code kurulumu

Mobil geliştirme için temel VS Code kurulumu, belirli çerçeve için bir uzantı paketinin kurulmasını içerir. Flutter için Flutter uzantısı yeterlidir (Dart otomatik olarak kurulur). React Native için — React Native Tools. TypeScript ile Ionic/React Native için — yerleşik destek hemen çalışır, ancak ESLint ve Prettier kurulması önerilir.

// .vscode/settings.json — mobil proje ayarları
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Mobil geliştirme için uzantılar: Flutter (Dart Code, 50M+ kurulum), React Native Tools (Microsoft, 10M+), Expo (React Native Expo için), Thunder Client (API testi), GitLens (Git görselleştirme), Error Lens (satır içi hatalar), Material Icon Theme (dosya simgeleri). Hızlı betik çalıştırma için Code Runner kurulumu da önerilir.

Çalışma alanı yapılandırması (.code-workspace), ilgili projeleri tek bir VS Code penceresinde gruplandırmaya olanak tanır. Monorepo'lar (örneğin, React Native + Backend) için çalışma alanı, tüm klasörleri ayarları, uzantıları ve başlatma yapılandırmalarıyla açar. VS Code, çalışma alanındaki projeleri otomatik olarak algılar ve Explorer'da gösterir.

VS Code'da Flutter

VS Code için Flutter uzantısı tam bir geliştirme araçları seti sağlar: proje oluşturma (Ctrl+Shift+P → Flutter: New Project), sıcak yeniden yükleme (Hot Reload, Hot Restart), UI denetçisi (Flutter Inspector), emülatör/cihaz (Flutter: Select Device), DevTools (widget ağacı, zaman çizelgesi, ağ, bellek).

// lib/main.dart — navigasyonlu Flutter uygulaması
import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: 'VS Code Example',
        home: HomePage(),
        theme: ThemeData.useMaterial3(),
    ));
}

class HomePage extends StatelessWidget {
    HomePage({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter + VS Code')),
            body: Center(
                child: ElevatedButton(
                    onPressed: () => debugPrint('VS Code'dan Merhaba!'),
                    child: Text('Buraya dokun'),
                ),
            ),
        );
    }
}

Dart DevTools, VS Code'da düzenleyici içinde bir sekme veya ayrı bir pencere olarak çalışır. DevTools şunları içerir: Flutter Inspector (düzen katmanlı widget ağacı), Performans (FPS, kare build/rast), CPU Profiler (flutter/scheduler/gesture), Bellek (heap anlık görüntüsü, GC, tahsisler), Ağ (HTTP istekleri) ve Günlükleme (dart:developer log, stderr).

VS Code'da React Native

React Native Tools, React Native uygulamalarında hata ayıklamak için Microsoft'un resmi uzantısıdır. Android emülatörü, iOS simülatörü ve fiziksel cihazlarda çalıştırmayı, kesme noktalarıyla JavaScript hata ayıklamayı, Flipper aracılığıyla öğe denetimini ve hızlı geliştirme için Expo ile entegrasyonu destekler.

React Native kurulumu: uzantı şu komutları ekler: React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Hermes hata ayıklama, React Native Hermes Debugger'ı kullanır. VS Code, Flipper Entegrasyonunu destekler — ağ, Redux/NgRx durumu, async storage, console.log'u izlemek için Reactotron eklentisi.

// App.tsx — navigasyonlu React Native bileşeni
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

ESLint + Prettier, VS Code'da TypeScript için zorunlu bir kombinasyondur. ESLint kod anlambilimini denetler (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier girintileri, tırnak işaretlerini, virgülleri biçimlendirir. Yapılandırma .eslintrc.js ve .prettierrc dosyalarında saklanır. VS Code, kaydederken otomatik olarak ESLint'i çalıştırır ve hataları satır içinde vurgular.

VS Code'da Ionic

Ionic, Angular, React veya Vue kullanan hibrit mobil uygulamalar için bir çerçevedir. VS Code, yerleşik TypeScript desteği, Angular Language Service (.html şablonları için) ve Ionic Snippets uzantısı aracılığıyla Ionic bileşenleri için otomatik tamamlama sağlar. Derleme ve yayınlama için Capacitor (Cordova'nın halefi) kullanılır.

VS Code'da Ionic CLI entegrasyonu: yerleşik terminal, tarayıcı geliştirme için ionic serve, üretim için ionic build ve yerel platformlarla senkronizasyon için ionic cap sync komutlarını çalıştırır. Ionic Extension uzantısı, Generate Page, Generate Component, Run on Android/iOS komutlarını içeren bir panel ekler.

Capacitor Eklentileri — web kodu ile yerel API'ler arasında bir köprüdür. Temel eklentiler: Camera, Geolocation, Push Notifications, File System, Storage. Her eklentinin birleşik bir JS API'si ve Android (Java/Kotlin) ile iOS (Swift) için yerel uygulamaları vardır. VS Code, TypeScript tanımları aracılığıyla Capacitor API için otomatik tamamlama sunar.

Launch.json ve hata ayıklama

launch.json — .vscode/ klasöründeki VS Code hata ayıklayıcı yapılandırmasıdır. Mobil projeler için launch.json, başlatma türünü tanımlar: Flutter (dart), React Native (reactnative), Ionic (tarayıcıda hata ayıklama için chrome veya edge). Her yapılandırma şu parametreleri içerir: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — Flutter ve React Native yapılandırmaları
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter (Android)",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "deviceId": "emulator-5554",
            "args": ["--dart-define=ENV=staging"]
        },
        {
            "name": "React Native (Android)",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "sourceMaps": true
        },
        {
            "name": "Ionic (Browser)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "webRoot": "\${workspaceFolder}"
        }
    ]
}

VS Code'da çok hedefli hata ayıklama — birden çok yapılandırmanın (compounds) paralel olarak başlatılmasıdır. Örneğin, Flutter DevTools + Flutter App ile Inspector otomatik olarak açılır. React Native için Attach to Packager kullanılır — önce Metro paketleyicisi başlatılır, ardından hata ayıklayıcı zaten çalışan uygulamaya bağlanır.

Dev Containers ile uzaktan geliştirme: VS Code, önceden yüklenmiş SDK (Flutter, Android, Node.js) ile bir Docker konteynerine veya WSL2'ye bağlanır. Dev Containers uzantısı (eski adıyla Remote — Containers), emülatör ve hata ayıklayıcı dahil tam bir araç setiyle izole bir ortamda projeyi başlatır.