VS Code: Editor for Flutter, React Native and Ionic

What is VS Code?

VS Code is a source code editor released by Microsoft in 2015. Unlike Visual Studio, VS Code is not a full-fledged IDE — it is a lightweight editor extensible to IDE level through extensions. For mobile development, VS Code supports Flutter (via Dart Code extension), React Native (React Native Tools extension) and Ionic (through built-in TypeScript support).

According to the Stack Overflow Developer Survey 2025, VS Code is used by 74% of all developers, making it the most popular editor in the world. For mobile development, it is chosen by 68% of Flutter developers, 55% of React Native developers and 71% of Ionic developers. The main reasons are: speed, extensibility, built-in Git and terminal.

VS Code architecture is built on the Language Server Protocol (LSP) for autocompletion and diagnostics, the Debug Adapter Protocol (DAP) for debugging, and extensions in VSIX format. The editor runs on Electron (Chromium + Node.js), enabling JavaScript/TypeScript for creating extensions. VS Code is available on Windows, macOS and Linux.

Setting Up VS Code for Mobile Development

Basic VS Code setup for mobile development involves installing an extension pack for the specific framework. For Flutter, the Flutter extension is sufficient (Dart installs automatically). For React Native — React Native Tools. For Ionic/React Native with TypeScript — built-in support works immediately, but it is recommended to install ESLint and Prettier.

// .vscode/settings.json — settings for a mobile project
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensions for mobile development: Flutter (Dart Code, 50M+ installs), React Native Tools (Microsoft, 10M+), Expo (for React Native Expo), Thunder Client (API testing), GitLens (Git visualization), Error Lens (inline errors), Material Icon Theme (file icons). Code Runner is also recommended for quick script execution.

Workspace configuration (.code-workspace) allows grouping related projects in a single VS Code window. For monorepos (e.g., React Native + Backend), a workspace opens all folders with their settings, extensions and launch configurations. VS Code automatically detects projects in the workspace and displays them in the Explorer.

Flutter in VS Code

The Flutter extension for VS Code provides a complete set of development tools: project creation (Ctrl+Shift+P → Flutter: New Project), hot reload (Hot Reload, Hot Restart), UI inspector (Flutter Inspector), emulator/device (Flutter: Select Device), DevTools (widget tree, timeline, network, memory).

// lib/main.dart — Flutter application with navigation
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 in VS Code runs as a tab inside the editor or as a separate window. DevTools includes Flutter Inspector (widget tree with layout overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocations), Network (HTTP requests) and Logging (dart:developer log, stderr).

React Native in VS Code

React Native Tools is the official Microsoft extension for debugging React Native applications. It supports launching on Android emulator, iOS simulator and physical devices, JavaScript debugging with breakpoints, element inspection via Flipper, and integration with Expo for rapid development.

React Native setup: the extension adds commands React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Hermes debugging uses React Native Hermes Debugger. VS Code supports Flipper Integration — the Reactotron plugin for monitoring network, Redux/NgRx state, async storage, console.log.

// App.tsx — React Native component with navigation
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 is a mandatory combo for TypeScript in VS Code. ESLint checks code semantics (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formats indentation, quotes, commas. Configuration is stored in .eslintrc.js and .prettierrc. VS Code automatically runs ESLint on save and highlights errors inline.

Ionic in VS Code

Ionic is a framework for hybrid mobile applications using Angular, React or Vue. VS Code provides built-in TypeScript support, Angular Language Service (for .html templates) and autocompletion for Ionic components via the Ionic Snippets extension. Capacitor (successor to Cordova) is used for building and publishing.

Ionic CLI integration in VS Code: the built-in terminal runs ionic serve for browser development, ionic build for production and ionic cap sync for synchronization with native platforms. The Ionic Extension adds a panel with commands: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — a bridge between web code and native APIs. Key plugins: Camera, Geolocation, Push Notifications, File System, Storage. Each plugin has a unified JS API and native implementations for Android (Java/Kotlin) and iOS (Swift). VS Code offers autocompletion for Capacitor API via TypeScript definitions.

Launch.json and Debugging

launch.json — the VS Code debugger configuration in the .vscode/ folder. For mobile projects, launch.json defines the launch type: Flutter (dart), React Native (reactnative), Ionic (chrome or edge for browser debugging). Each configuration includes parameters: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configurations for Flutter and 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 debugging in VS Code — parallel launch of multiple configurations (compounds). For example, Flutter DevTools + Flutter App with automatic Inspector opening. For React Native, Attach to Packager is used — the Metro bundler starts first, then the debugger attaches to the already running application.

Remote development via Dev Containers: VS Code connects to a Docker container or WSL2 with pre-installed SDK (Flutter, Android, Node.js). The Dev Containers extension (formerly Remote — Containers) launches the project in an isolated environment with a full set of tools, including emulator and debugger.