VS Code: محرر لـ Flutter وReact Native وIonic

ما هو VS Code؟

VS Code هو محرر أكواد مصدرية أصدرته Microsoft في 2015. على عكس Visual Studio، VS Code ليس بيئة تطوير متكاملة كاملة — إنه محرر خفيف يمكن توسيعه إلى مستوى IDE من خلال الإضافات. لتطوير التطبيقات المحمولة، يدعم VS Code Flutter (عبر إضافة Dart Code) وReact Native (إضافة React Native Tools) وIonic (من خلال دعم TypeScript المدمج).

وفقاً لاستطلاع Stack Overflow للمطورين 2025، يستخدم VS Code 74% من جميع المطورين، مما يجعله المحرر الأكثر شعبية في العالم. لتطوير التطبيقات المحمولة، يختاره 68% من مطوري Flutter و55% من مطوري React Native و71% من مطوري Ionic. الأسباب الرئيسية: السرعة وقابلية التوسع وGit المدمج والطرفية.

هندسة VS Code مبنية على بروتوكول خادم اللغة (LSP) للإكمال التلقائي والتشخيص وبروتوكول محول تصحيح الأخطاء (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، أكثر من 50 مليون تثبيت)، React Native Tools (Microsoft، أكثر من 10 ملايين)، 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 تلقائياً المشاريع في مساحة العمل ويعرضها في المستكشف.

Flutter في VS Code

إضافة Flutter لـ VS Code توفر مجموعة كاملة من أدوات التطوير: إنشاء المشاريع (Ctrl+Shift+P → Flutter: New Project)، إعادة التحميل السريع (Hot Reload، Hot Restart)، مفتش واجهة المستخدم (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).

React Native في VS Code

React Native Tools هي الإضافة الرسمية من Microsoft لتصحيح أخطاء تطبيقات React Native. تدعم التشغيل على محاكي 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 — إضافة Reactotron لمراقبة الشبكة وحالة Redux/NgRx وasync storage وconsole.log.

// 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 مزيج إلزامي لـ TypeScript في VS Code. يتحقق ESLint من دلالات الكود (no-unused-vars، @typescript-eslint/ban-ts-comment)، ويقوم Prettier بتنسيق المسافات البادئة والاقتباسات والفواصل. يُحفظ التكوين في .eslintrc.js و.prettierrc. يقوم VS Code تلقائياً بتشغيل ESLint عند الحفظ ويبرز الأخطاء مضمنة.

Ionic في VS Code

Ionic هو إطار عمل للتطبيقات المحمولة الهجينة باستخدام Angular أو React أو Vue. يوفر VS Code دعماً مدمجاً لـ TypeScript وAngular Language Service (لقوالب .html) وإكمال تلقائي لمكونات Ionic عبر إضافة Ionic Snippets. يُستخدم Capacitor (خليفة Cordova) للبناء والنشر.

تكامل Ionic CLI في VS Code: الطرفية المدمجة تشغل 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 موحدة وتنفيذات أصلية لـ Android (Java/Kotlin) وiOS (Swift). يقدم VS Code إكمالاً تلقائياً لواجهة Capacitor عبر تعريفات TypeScript.

Launch.json وتصحيح الأخطاء

launch.json — تكوين مصحح VS Code في مجلد .vscode/. للمشاريع المحمولة، يحدد 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 مع فتح تلقائي للمفتش. لـ React Native يُستخدم Attach to Packager — يبدأ أولاً Metro bundler ثم يتصل المصحح بالتطبيق الجاري تشغيله.

التطوير عن بُعد عبر Dev Containers: يتصل VS Code بحاوية Docker أو WSL2 مع SDK مثبت مسبقاً (Flutter وAndroid وNode.js). تقوم إضافة Dev Containers (سابقاً Remote — Containers) بتشغيل المشروع في بيئة معزولة بمجموعة كاملة من الأدوات بما في ذلك المحاكي والمصحح.