VS Code: Flutter، React Native اور Ionic کے لیے ایڈیٹر

VS Code کیا ہے؟

VS Code ایک سورس کوڈ ایڈیٹر ہے جسے Microsoft نے 2015 میں جاری کیا تھا۔ Visual Studio کے برعکس، VS Code مکمل IDE نہیں ہے — یہ ایک ہلکا پھلکا ایڈیٹر ہے جسے ایکسٹینشنز کے ذریعے IDE کی سطح تک بڑھایا جا سکتا ہے۔ موبائل ڈویلپمنٹ کے لیے، VS Code Flutter (Dart Code ایکسٹینشن کے ذریعے)، React Native (React Native Tools ایکسٹینشن) اور Ionic (بلٹ ان TypeScript سپورٹ کے ذریعے) کو سپورٹ کرتا ہے۔

Stack Overflow Developer Survey 2025 کے مطابق، VS Code 74% ڈویلپرز استعمال کرتے ہیں، جو اسے دنیا کا سب سے مقبول ایڈیٹر بناتا ہے۔ موبائل ڈویلپمنٹ کے لیے، اسے 68% Flutter ڈویلپرز، 55% React Native ڈویلپرز اور 71% Ionic ڈویلپرز منتخب کرتے ہیں۔ اہم وجوہات: رفتار، توسیع پذیری، بلٹ ان Git اور ٹرمینل۔

VS Code آرکیٹیکچر آٹوکمپلیشن اور تشخیص کے لیے Language Server Protocol (LSP)، ڈیبگنگ کے لیے Debug Adapter Protocol (DAP) اور VSIX فارمیٹ میں ایکسٹینشنز پر مبنی ہے۔ ایڈیٹر Electron (Chromium + Node.js) پر چلتا ہے، جو ایکسٹینشنز بنانے کے لیے JavaScript/TypeScript کے استعمال کے قابل بناتا ہے۔ VS Code Windows، macOS اور Linux پر دستیاب ہے۔

موبائل ڈویلپمنٹ کے لیے VS Code سیٹ اپ

موبائل ڈویلپمنٹ کے لیے بنیادی VS Code سیٹ اپ میں مخصوص فریم ورک کے لیے ایکسٹینشن پیک انسٹال کرنا شامل ہے۔ Flutter کے لیے، Flutter ایکسٹینشن کافی ہے (Dart خود بخود انسٹال ہو جاتا ہے)۔ React Native کے لیے — React Native Tools۔ TypeScript کے ساتھ Ionic/React Native کے لیے — بلٹ ان سپورٹ فوری طور پر کام کرتا ہے، لیکن ESLint اور Prettier انسٹال کرنے کی سفارش کی جاتی ہے۔

// .vscode/settings.json — موبائل پروجیکٹ کی سیٹنگز
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

موبائل ڈویلپمنٹ کے لیے ایکسٹینشنز: Flutter (Dart Code، 50M+ انسٹال)، React Native Tools (Microsoft، 10M+)، Expo (React Native Expo کے لیے)، Thunder Client (API ٹیسٹنگ)، GitLens (Git ویژولائزیشن)، Error Lens (ان لائن غلطیاں)، Material Icon Theme (فائل آئیکنز)۔ تیز اسکرپٹ پر عمل درآمد کے لیے Code Runner انسٹال کرنے کی بھی سفارش کی جاتی ہے۔

ورک اسپیس کنفیگریشن (.code-workspace) متعلقہ پروجیکٹس کو ایک VS Code ونڈو میں گروپ کرنے کی اجازت دیتی ہے۔ مونو ریپو (مثال کے طور پر، React Native + Backend) کے لیے، ورک اسپیس ان کی سیٹنگز، ایکسٹینشنز اور لانچ کنفیگریشنز کے ساتھ تمام فولڈرز کھولتا ہے۔ VS Code خود بخود ورک اسپیس میں پروجیکٹس کا پتہ لگاتا ہے اور انہیں Explorer میں دکھاتا ہے۔

VS Code میں Flutter

VS Code کے لیے Flutter ایکسٹینشن ڈویلپمنٹ ٹولز کا ایک مکمل سیٹ فراہم کرتی ہے: پروجیکٹ بنانا (Ctrl+Shift+P → Flutter: New Project)، ہاٹ ریلوڈ (Hot Reload، Hot Restart)، UI انسپکٹر (Flutter Inspector)، ایمولیٹر/ڈیوائس (Flutter: Select Device)، DevTools (ویجیٹ ٹری، ٹائم لائن، نیٹ ورک، میموری)۔

// lib/main.dart — نیویگیشن کے ساتھ Flutter ایپلیکیشن
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 سے ہیلو!'),
                    child: Text('یہاں ٹیپ کریں'),
                ),
            ),
        );
    }
}

Dart DevTools VS Code میں ایڈیٹر کے اندر ایک ٹیب یا علیحدہ ونڈو کے طور پر چلتا ہے۔ DevTools میں Flutter Inspector (لے آؤٹ اوورلے کے ساتھ ویجیٹ ٹری)، کارکردگی (FPS، فریم build/rast)، CPU Profiler (flutter/scheduler/gesture)، میموری (ہیپ سنیپ شاٹ، GC، مختص)، نیٹ ورک (HTTP درخواستیں) اور لاگنگ (dart:developer log، stderr) شامل ہیں۔

VS Code میں React Native

React Native Tools React Native ایپلیکیشنز کو ڈیبگ کرنے کے لیے Microsoft کی سرکاری ایکسٹینشن ہے۔ یہ Android ایمولیٹر، iOS سمیولیٹر اور فزیکل ڈیوائسز پر لانچ، بریک پوائنٹس کے ساتھ JavaScript ڈیبگنگ، Flipper کے ذریعے عنصر معائنہ اور تیز ڈویلپمنٹ کے لیے Expo کے ساتھ انٹیگریشن کو سپورٹ کرتی ہے۔

React Native سیٹ اپ: ایکسٹینشن کمانڈز شامل کرتی ہے: React Native: Start Packager، Run Android، Run iOS، Attach to Packager، Debug۔ Hermes ڈیبگنگ React Native Hermes Debugger استعمال کرتی ہے۔ VS Code Flipper انٹیگریشن کو سپورٹ کرتا ہے — نیٹ ورک، Redux/NgRx اسٹیٹ، async storage، console.log کی نگرانی کے لیے Reactotron پلگ ان۔

// App.tsx — نیویگیشن کے ساتھ React Native کمپوننٹ
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 میں TypeScript کے لیے ایک لازمی امتزاج ہے۔ ESLint کوڈ کے سیمنٹکس کی جانچ کرتا ہے (no-unused-vars، @typescript-eslint/ban-ts-comment)، Prettier انڈینٹیشن، کوٹیشن مارکس، کوما کو فارمیٹ کرتا ہے۔ کنفیگریشن .eslintrc.js اور .prettierrc میں محفوظ کی جاتی ہے۔ VS Code خود بخود محفوظ کرنے پر ESLint چلاتا ہے اور غلطیوں کو ان لائن ہائی لائٹ کرتا ہے۔

VS Code میں Ionic

Ionic Angular، React یا Vue استعمال کرتے ہوئے ہائبرڈ موبائل ایپلیکیشنز کے لیے ایک فریم ورک ہے۔ VS Code بلٹ ان TypeScript سپورٹ، Angular Language Service (.html ٹیمپلیٹس کے لیے) اور Ionic Snippets ایکسٹینشن کے ذریعے Ionic اجزاء کے لیے آٹوکمپلیشن فراہم کرتا ہے۔ بلڈ اور پبلشنگ کے لیے Capacitor (Cordova کا جانشین) استعمال ہوتا ہے۔

VS Code میں Ionic CLI انٹیگریشن: بلٹ ان ٹرمینل براؤزر ڈویلپمنٹ کے لیے ionic serve، پروڈکشن کے لیے ionic build اور نیٹو پلیٹ فارمز کے ساتھ ہم آہنگی کے لیے ionic cap sync چلاتا ہے۔ Ionic Extension ایکسٹینشن کمانڈز کے ساتھ ایک پینل شامل کرتی ہے: Generate Page، Generate Component، Run on Android/iOS۔

Capacitor پلگ انز — ویب کوڈ اور نیٹو APIs کے درمیان ایک پل۔ اہم پلگ انز: Camera، Geolocation، Push Notifications، File System، Storage۔ ہر پلگ ان کا ایک یونیفائیڈ JS API اور Android (Java/Kotlin) اور iOS (Swift) کے لیے نیٹو نفاذ ہے۔ VS Code TypeScript تعریفوں کے ذریعے Capacitor API کے لیے آٹوکمپلیشن پیش کرتا ہے۔

Launch.json اور ڈیبگنگ

launch.json — .vscode/ فولڈر میں VS Code ڈیبگر کنفیگریشن۔ موبائل پروجیکٹس کے لیے، launch.json لانچ کی قسم متعین کرتا ہے: Flutter (dart)، React Native (reactnative)، Ionic (براؤزر ڈیبگنگ کے لیے chrome یا edge)۔ ہر کنفیگریشن میں پیرامیٹرز شامل ہیں: program، args، cwd، env، platform، deviceId۔

// .vscode/launch.json — Flutter اور React Native کے لیے کنفیگریشنز
{
    "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 میں ملٹی ٹارگٹ ڈیبگنگ — متعدد کنفیگریشنز (compounds) کا متوازی لانچ۔ مثال کے طور پر، Flutter DevTools + Flutter App خودکار Inspector کھلنے کے ساتھ۔ React Native کے لیے Attach to Packager استعمال ہوتا ہے — پہلے Metro بنڈلر شروع ہوتا ہے، پھر ڈیبگر پہلے سے چلتی ہوئی ایپلیکیشن سے منسلک ہو جاتا ہے۔

Dev Containers کے ذریعے ریموٹ ڈویلپمنٹ: VS Code پیشگی انسٹالڈ SDK (Flutter، Android، Node.js) کے ساتھ Docker کنٹینر یا WSL2 سے منسلک ہوتا ہے۔ Dev Containers ایکسٹینشن (سابقہ Remote — Containers) ایمولیٹر اور ڈیبگر سمیت ٹولز کے مکمل سیٹ کے ساتھ ایک الگ تھلگ ماحول میں پروجیکٹ لانچ کرتی ہے۔