VS Code: Flutter, React Native va Ionic uchun muharrir

VS Code nima?

VS Code — Microsoft tomonidan 2015 yilda chiqarilgan manba kodi muharriri. Visual Studio dan farqli o'laroq, VS Code to'liq IDE emas — bu extensions orqali IDE darajasigacha kengaytiriladigan yengil muharrir. Mobil ishlanma uchun VS Code Flutter (Dart Code extension orqali), React Native (React Native Tools extension) va Ionic (o'rnatilgan TypeScript qo'llab-quvvatlashi orqali) ni qo'llab-quvvatlaydi.

Stack Overflow Developer Survey 2025 ma'lumotlariga ko'ra, VS Code barcha dasturchilarning 74% tomonidan ishlatiladi, bu uni dunyodagi eng mashhur muharrirga aylantiradi. Mobil ishlanma uchun uni Flutter dasturchilarining 68%, React Native dasturchilarining 55% va Ionic dasturchilarining 71% tanlaydi. Asosiy sabablar: ishlash tezligi, kengaytirilishi, o'rnatilgan Git va terminal.

VS Code arxitekturasi avtomatik to'ldirish va diagnostika uchun Language Server Protocol (LSP), disk raskadrovka uchun Debug Adapter Protocol (DAP) va VSIX formatidagi kengaytmalar asosida qurilgan. Muharrir Electron (Chromium + Node.js) da ishlaydi, bu kengaytmalar yaratish uchun JavaScript/TypeScript dan foydalanish imkonini beradi. VS Code Windows, macOS va Linux da mavjud.

Mobil ishlanma uchun VS Code sozlash

Mobil ishlanma uchun asosiy VS Code sozlash muayyan framework uchun extension pack o'rnatishni o'z ichiga oladi. Flutter uchun Flutter kengaytmasi yetarli (Dart avtomatik o'rnatiladi). React Native uchun — React Native Tools. Ionic/React Native TypeScript bilan — o'rnatilgan qo'llab-quvvatlash darhol ishlaydi, lekin ESLint va Prettier o'rnatish tavsiya etiladi.

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

Mobil ishlanma uchun kengaytmalar: Flutter (Dart Code, 50M+ o'rnatish), React Native Tools (Microsoft, 10M+), Expo (React Native Expo uchun), Thunder Client (API testi), GitLens (Git vizualizatsiyasi), Error Lens (inline xatolar), Material Icon Theme (fayl piktogrammalari). Shuningdek, skriptlarni tez ishga tushirish uchun Code Runner o'rnatish tavsiya etiladi.

Workspace konfiguratsiyasi (.code-workspace) bog'liq loyihalarni bir VS Code oynasida guruhlash imkonini beradi. Monorepozitoriyalar uchun (masalan, React Native + Backend) workspace barcha papkalarni o'z sozlamalari, kengaytmalari va launch konfiguratsiyalari bilan ochadi. VS Code workspace dagi loyihalarni avtomatik aniqlaydi va Explorer da ko'rsatadi.

Flutter VS Code da

Flutter extension VS Code uchun to'liq ishlanma vositalari to'plamini taqdim etadi: loyiha yaratish (Ctrl+Shift+P → Flutter: New Project), issiq qayta yuklash (Hot Reload, Hot Restart), UI inspektor (Flutter Inspector), emulator/qurilma (Flutter: Select Device), DevTools (vidjet daraxti, timeline, tarmoq, xotira).

// lib/main.dart — navigatsiya bilan Flutter ilovasi
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('Hello from VS Code!'),
                    child: Text('Tap here'),
                ),
            ),
        );
    }
}

Dart DevTools VS Code da muharrir ichidagi yorliq yoki alohida oyna sifatida ochiladi. DevTools Flutter Inspector (layout overlay bilan vidjet daraxti), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, ajratmalar), Network (HTTP so'rovlari) va Logging (dart:developer log, stderr) ni o'z ichiga oladi.

React Native VS Code da

React Native Tools — React Native ilovalarini disk raskadrovka qilish uchun Microsoftning rasmiy kengaytmasi. Android emulatori, iOS simulyatori va fizik qurilmalarda ishga tushirish, breakpoints bilan JavaScript disk raskadrovka, Flipper orqali elementlarni tekshirish va tez ishlanma uchun Expo bilan integratsiyani qo'llab-quvvatlaydi.

React Native sozlash: kengaytma React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug buyruqlarini qo'shadi. Hermes disk raskadrovka uchun React Native Hermes Debugger ishlatiladi. VS Code Flipper Integration — tarmoq, Redux/NgRx holati, async storage, console.log monitoringi uchun Reactotron plaginini qo'llab-quvvatlaydi.

// App.tsx — navigatsiya bilan React Native komponenti
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 uchun majburiy birikma. ESLint kod semantikasini tekshiradi (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier chekinishlarni, qo'shtirnoqlarni, vergullarni formatlaydi. Konfiguratsiya .eslintrc.js va .prettierrc da saqlanadi. VS Code saqlashda avtomatik ESLint ni ishga tushiradi va xatolarni inline ajratib ko'rsatadi.

Ionic VS Code da

Ionic — Angular, React yoki Vue da gibrid mobil ilovalar uchun framework. VS Code o'rnatilgan TypeScript qo'llab-quvvatlashi, Angular Language Service (.html shablonlari uchun) va Ionic Snippets kengaytmasi orqali Ionic komponentlari uchun avtomatik to'ldirishni ta'minlaydi. Qurish va nashr qilish uchun Capacitor (Cordova vorisi) ishlatiladi.

Ionic CLI integratsiyasi VS Code da: o'rnatilgan terminal brauzerda ishlanma uchun ionic serve, ishlab chiqarish uchun ionic build va mahalliy platformalar bilan sinxronlash uchun ionic cap sync ni ishga tushiradi. Ionic Extension kengaytmasi buyruqlar bilan panel qo'shadi: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — veb kod va mahalliy API o'rtasidagi ko'prik. Asosiy pluginlar: Camera, Geolocation, Push Notifications, File System, Storage. Har bir plugin yagona JS API va Android (Java/Kotlin) va iOS (Swift) uchun mahalliy tatbiqlarga ega. VS Code TypeScript definitions orqali Capacitor API uchun avtomatik to'ldirishni taklif qiladi.

Launch.json va disk raskadrovka

launch.json — .vscode/ papkasida VS Code debugger konfiguratsiyasi. Mobil loyihalar uchun launch.json ishga tushirish turini belgilaydi: Flutter (dart), React Native (reactnative), Ionic (brauzerda disk raskadrovka uchun chrome yoki edge). Har bir konfiguratsiya parametrlarni o'z ichiga oladi: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — Flutter va React Native uchun konfiguratsiyalar
{
    "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}"
        }
    ]
}

Multi-target disk raskadrovka VS Code da — bir nechta konfiguratsiyalarni parallel ishga tushirish (compounds). Masalan, Flutter DevTools + Flutter App Inspector avtomatik ochilishi bilan. React Native uchun Attach to Packager ishlatiladi — avval Metro bundler ishga tushiriladi, keyin debugger allaqachon ishlayotgan ilovaga ulanadi.

Remote development Dev Containers orqali: VS Code oldindan o'rnatilgan SDK (Flutter, Android, Node.js) bilan Docker konteyneri yoki WSL2 ga ulanadi. Dev Containers kengaytmasi (sobiq Remote — Containers) loyihani emulator va debugger bilan to'liq vositalar to'plamiga ega izolyatsiyalangan muhitda ishga tushiradi.