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 integration в 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) запускает проект в изолированной среде с полным набором инструментов, включая эмулятор и отладчик.