VS Code: редактор за Flutter, React Native и Ionic

Какво е VS Code?

VS Code — редактор на изходен код, пуснат от Microsoft през 2015 г. За разлика от Visual Studio, VS Code не е пълноценна IDE — това е лек редактор, разширяем до ниво IDE чрез extensions. За мобилно разработване 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 автоматично открива projects в 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 (дърво на виджети с layout-овърлей), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocations), Network (HTTP заявки) и Logging (dart:developer log, stderr).

React Native в VS Code

React Native Tools — официално разширение на Microsoft за отстраняване на грешки в 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 при запазване и подчертава грешките inline.

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 предлага автоматично довършване за Capacitor API чрез TypeScript definitions.

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, след което дебъгерът се присъединява към вече работещото приложение.

Remote development чрез Dev Containers: VS Code се свързва към Docker контейнер или WSL2 с предварително инсталиран SDK (Flutter, Android, Node.js). Разширението Dev Containers (предишно Remote — Containers) стартира проекта в изолирана среда с пълен набор от инструменти, включително емулатор и дебъгер.