VS Code: редактор для Flutter, React Native та Ionic

Що таке VS Code?

VS Code — редактор вихідного коду, випущений Microsoft у 2015 році. На відміну від Visual Studio, VS Code не є повноцінною IDE — це легкий редактор, розширюваний до рівня IDE через розширення. Для мобільної розробки VS Code підтримує Flutter (через розширення Dart Code), React Native (розширення React Native Tools) та 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 для мобільної розробки включає встановлення пакету розширень під конкретний фреймворк. Для 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 для 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('Привіт з VS Code!'),
                    child: Text('Натисніть тут'),
                ),
            ),
        );
    }
}

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) запускає проект в ізольованому середовищі з повним набором інструментів, включаючи емулятор та налагоджувач.