VS Code: ویرایشگر برای Flutter، React Native و Ionic

VS Code چیست؟

VS Code — ویرایشگر کد منبع منتشر شده توسط مایکروسافت در سال 2015. برخلاف Visual Studio، VS Code یک IDE کامل نیست — این یک ویرایشگر سبک است که از طریق extensions تا سطح IDE قابل گسترش است. برای توسعه موبایل، VS Code از Flutter (از طریق Dart Code extension)، React Native (React Native Tools extension) و 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 برای توسعه موبایل شامل نصب extension pack برای فریم‌ورک خاص است. برای 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 برای اجرای سریع اسکریپت‌ها توصیه می‌شود.

پیکربندی Workspace (.code-workspace) امکان گروه‌بندی پروژه‌های مرتبط در یک پنجره VS Code را فراهم می‌کند. برای مونورپوها (مثلاً React Native + Backend)، workspace همه پوشه‌ها را با تنظیمات، افزونه‌ها و پیکربندی‌های launch خود باز می‌کند. VS Code به طور خودکار پروژه‌ها را در workspace شناسایی کرده و در Explorer نمایش می‌دهد.

Flutter در VS Code

Flutter extension برای VS Code مجموعه کاملی از ابزارهای توسعه را فراهم می‌کند: ایجاد پروژه (Ctrl+Shift+P → Flutter: New Project)، بارگذاری مجدد داغ (Hot Reload، Hot Restart)، بازرس UI (Flutter Inspector)، شبیه‌ساز/دستگاه (Flutter: Select Device)، DevTools (درخت ویجت، timeline، شبکه، حافظه).

// 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('Hello from VS Code!'),
                    child: Text('Tap here'),
                ),
            ),
        );
    }
}

Dart DevTools در VS Code به صورت یک تب درون ویرایشگر یا پنجره جداگانه باز می‌شود. DevTools شامل Flutter Inspector (درخت ویجت با overlay layout)، Performance (FPS، frame build/rast)، CPU Profiler (flutter/scheduler/gesture)، Memory (heap snapshot، GC، تخصیص‌ها)، Network (درخواست‌های HTTP) و Logging (dart:developer log، stderr) است.

React Native در VS Code

React Native Tools — افزونه رسمی مایکروسافت برای دیباگ برنامه‌های React Native. از اجرا روی شبیه‌ساز Android، شبیه‌ساز iOS و دستگاه‌های فیزیکی، دیباگ JavaScript با breakpoints، بازرسی عناصر از طریق 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 — پلاگین 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 Plugins — پلی بین کد وب و API بومی. پلاگین‌های اصلی: Camera، Geolocation، Push Notifications، File System، Storage. هر پلاگین دارای JS API یکپارچه و پیاده‌سازی‌های بومی برای Android (Java/Kotlin) و iOS (Swift) است. VS Code از طریق TypeScript definitions تکمیل خودکار را برای Capacitor API ارائه می‌دهد.

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}"
        }
    ]
}

دیباگ Multi-target در VS Code — اجرای همزمان چندین پیکربندی (compounds). مثلاً Flutter DevTools + Flutter App با باز شدن خودکار Inspector. برای React Native از Attach to Packager استفاده می‌شود — ابتدا Metro bundler راه‌اندازی می‌شود، سپس دیباگر به برنامه در حال اجرا متصل می‌شود.

توسعه از راه دور از طریق Dev Containers: VS Code به کانتینر Docker یا WSL2 با SDK از پیش نصب شده (Flutter، Android، Node.js) متصل می‌شود. افزونه Dev Containers (قبلاً Remote — Containers) پروژه را در محیط ایزوله با مجموعه کامل ابزارها از جمله شبیه‌ساز و دیباگر اجرا می‌کند.