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। Ionic/React Native TypeScript के साथ — बिल्ट-इन सपोर्ट तुरंत काम करता है, लेकिन 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 स्वचालित रूप से वर्कस्पेस में प्रोजेक्ट्स का पता लगाता है और उन्हें एक्सप्लोरर में दिखाता है।

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), मेमोरी (heap स्नैपशॉट, 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 Integration — नेटवर्क, 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 प्लगइन्स — वेब कोड और नेटिव API के बीच एक पुल। मुख्य प्लगइन्स: 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 bundler शुरू होता है, फिर डीबगर पहले से चल रहे एप्लिकेशन से जुड़ता है।

Dev Containers के माध्यम से रिमोट डेवलपमेंट: VS Code प्री-इंस्टॉल्ड SDK (Flutter, Android, Node.js) के साथ Docker कंटेनर या WSL2 से कनेक्ट होता है। Dev Containers एक्सटेंशन (पूर्व में Remote — Containers) इम्यूलेटर और डीबगर सहित टूल्स के पूरे सेट के साथ एक पृथक वातावरण में प्रोजेक्ट लॉन्च करता है।