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) ইমুলেটর এবং ডিবাগার সহ টুলের সম্পূর্ণ সেটসহ একটি বিচ্ছিন্ন পরিবেশে প্রজেক্ট লঞ্চ করে।