VS Code: Flutter, React Native və Ionic üçün redaktor

VS Code nədir?

VS Code — Microsoft tərəfindən 2015-ci ildə buraxılmış mənbə kodu redaktoru. Visual Studio-dan fərqli olaraq, VS Code tam hüquqlu IDE deyil — bu, extensions vasitəsilə IDE səviyyəsinə qədər genişləndirilə bilən yüngül redaktordur. Mobil inkişaf üçün VS Code Flutter (Dart Code extension vasitəsilə), React Native (React Native Tools extension) və Ionic (daxili TypeScript dəstəyi ilə) dəstəkləyir.

Stack Overflow Developer Survey 2025 məlumatlarına görə, VS Code bütün tərtibatçıların 74%-i tərəfindən istifadə olunur ki, bu da onu dünyada ən populyar redaktor edir. Mobil inkişaf üçün onu Flutter tərtibatçılarının 68%-i, React Native tərtibatçılarının 55%-i və Ionic tərtibatçılarının 71%-i seçir. Əsas səbəblər: iş sürəti, genişləndirilə bilmə, daxili Git və terminal.

VS Code arxitekturası avtomatik tamamlama və diaqnostika üçün Language Server Protocol (LSP), debug üçün Debug Adapter Protocol (DAP) və VSIX formatında genişlənmələr üzərində qurulub. Redaktor Electron (Chromium + Node.js) üzərində işləyir ki, bu da genişlənmələr yaratmaq üçün JavaScript/TypeScript istifadə etməyə imkan verir. VS Code Windows, macOS və Linux-da mövcuddur.

Mobil inkişaf üçün VS Code qurulumu

Mobil inkişaf üçün əsas VS Code qurulumu konkret framework üçün extension pack quraşdırılmasını əhatə edir. Flutter üçün Flutter genişlənməsi kifayətdir (Dart avtomatik quraşdırılacaq). React Native üçün — React Native Tools. Ionic/React Native TypeScript ilə — daxili dəstək dərhal işləyir, lakin ESLint və Prettier quraşdırmaq tövsiyə olunur.

// .vscode/settings.json — mobil layihə üçün parametrlər
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Mobil inkişaf üçün genişlənmələr: Flutter (Dart Code, 50M+ quraşdırma), React Native Tools (Microsoft, 10M+), Expo (React Native Expo üçün), Thunder Client (API testi), GitLens (Git vizuallaşdırılması), Error Lens (inline xətalar), Material Icon Theme (fayl ikonları). Həmçinin skriptləri sürətli işə salmaq üçün Code Runner quraşdırmaq tövsiyə olunur.

Workspace konfiqurasiyası (.code-workspace) əlaqəli layihələri bir VS Code pəncərəsində qruplaşdırmağa imkan verir. Monorepozitoriyalar üçün (məsələn, React Native + Backend) workspace bütün qovluqları öz parametrləri, genişlənmələri və launch konfiqurasiyaları ilə açır. VS Code workspace-də layihələri avtomatik aşkarlayır və Explorer-də göstərir.

Flutter VS Code daxilində

Flutter extension VS Code üçün tam inkişaf alətləri dəsti təqdim edir: layihə yaratma (Ctrl+Shift+P → Flutter: New Project), isti yenidən yükləmə (Hot Reload, Hot Restart), UI inspektor (Flutter Inspector), emulator/cihaz (Flutter: Select Device), DevTools (vidjet ağacı, timeline, şəbəkə, yaddaş).

// lib/main.dart — naviqasiya ilə Flutter tətbiqi
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 daxilində redaktor daxilində tab və ya ayrıca pəncərə kimi açılır. DevTools Flutter Inspector (layout overlay ilə vidjet ağacı), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, alokasiyalar), Network (HTTP sorğuları) və Logging (dart:developer log, stderr) daxildir.

React Native VS Code daxilində

React Native Tools — React Native tətbiqlərini debug etmək üçün Microsoft-un rəsmi genişlənməsi. Android emulatoru, iOS simulyatoru və fiziki cihazlarda işə salma, breakpoints ilə JavaScript debug, Flipper vasitəsilə element inspeksiyası və sürətli inkişaf üçün Expo ilə inteqrasiyanı dəstəkləyir.

React Native qurulumu: genişlənmə React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug əmrlərini əlavə edir. Hermes debug üçün React Native Hermes Debugger istifadə olunur. VS Code Flipper Integration — şəbəkə, Redux/NgRx state, async storage, console.log monitorinqi üçün Reactotron pluginini dəstəkləyir.

// App.tsx — naviqasiya ilə 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 üçün məcburi birləşmə. ESLint kod semantikasını yoxlayır (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier abzasları, dırnaq işarələrini, vergülləri formatlaşdırır. Konfiqurasiya .eslintrc.js və .prettierrc fayllarında saxlanılır. VS Code avtomatik olaraq yaddaşda ESLint-i işə salır və xətaları inline vurğulayır.

Ionic VS Code daxilində

Ionic — Angular, React və ya Vue ilə hibrid mobil tətbiqlər üçün framework. VS Code daxili TypeScript dəstəyi, Angular Language Service (.html şablonları üçün) və Ionic Snippets genişlənməsi vasitəsilə Ionic komponentləri üçün avtomatik tamamlama təmin edir. Qurma və nəşr üçün Capacitor (Cordova-nın varisi) istifadə olunur.

Ionic CLI inteqrasiyası VS Code daxilində: daxili terminal brauzerdə inkişaf üçün ionic serve, istehsal üçün ionic build və yerli platformalarla sinxronizasiya üçün ionic cap sync işə salır. Ionic Extension genişlənməsi əmrlərlə panel əlavə edir: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — veb kod ilə yerli API arasında körpü. Əsas pluginlər: Camera, Geolocation, Push Notifications, File System, Storage. Hər bir plugin vahid JS API və Android (Java/Kotlin) və iOS (Swift) üçün yerli tətbiqlərə malikdir. VS Code Capacitor API üçün TypeScript definitions vasitəsilə avtomatik tamamlama təklif edir.

Launch.json və debug

launch.json — .vscode/ qovluğunda VS Code debugger konfiqurasiyası. Mobil layihələr üçün launch.json işə salma növünü təyin edir: Flutter (dart), React Native (reactnative), Ionic (brauzerdə debug üçün chrome və ya edge). Hər konfiqurasiya parametrləri əhatə edir: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — Flutter və React Native üçün konfiqurasiyalar
{
    "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 debug VS Code daxilində — bir neçə konfiqurasiyanın paralel işə salınması (compounds). Məsələn, Flutter DevTools + Flutter App Inspector-un avtomatik açılması ilə. React Native üçün Attach to Packager istifadə olunur — əvvəlcə Metro bundler işə salınır, sonra debugger artıq işləyən tətbiqə qoşulur.

Remote development Dev Containers vasitəsilə: VS Code əvvəlcədən quraşdırılmış SDK (Flutter, Android, Node.js) ilə Docker konteynerinə və ya WSL2-yə qoşulur. Dev Containers genişlənməsi (keçmiş Remote — Containers) layihəni emulator və debugger daxil olmaqla tam alətlər dəsti ilə izolyasiya edilmiş mühitdə işə salır.