VS Code: redigerare för Flutter, React Native och Ionic

Vad är VS Code?

VS Code — en källkodsredigerare som släpptes av Microsoft 2015. Till skillnad från Visual Studio är VS Code inte en fullfjädrad IDE — det är en lättviktig redigerare som kan utökas till IDE-nivå via extensions. För mobilutveckling stöder VS Code Flutter (via Dart Code extension), React Native (React Native Tools extension) och Ionic (via inbyggt TypeScript-stöd).

Enligt Stack Overflow Developer Survey 2025 använder 74% av alla utvecklare VS Code, vilket gör det till den mest populära redigeraren i världen. För mobilutveckling väljer 68% av Flutter-utvecklarna, 55% av React Native-utvecklarna och 71% av Ionic-utvecklarna det. Huvudsakliga skäl: prestanda, utbyggbarhet, inbyggd Git och terminal.

VS Codes arkitektur är byggd på Language Server Protocol (LSP) för autokomplettering och diagnostik, Debug Adapter Protocol (DAP) för felsökning och tillägg i VSIX-format. Redigeraren körs på Electron (Chromium + Node.js), vilket möjliggör användning av JavaScript/TypeScript för att skapa tillägg. VS Code finns tillgängligt på Windows, macOS och Linux.

Konfigurera VS Code för mobilutveckling

Grundläggande VS Code-konfiguration för mobilutveckling inkluderar installation av ett extension pack för det specifika ramverket. För Flutter räcker det med tillägget Flutter (Dart installeras automatiskt). För React Native — React Native Tools. För Ionic/React Native med TypeScript — det inbyggda stödet fungerar direkt, men det rekommenderas att installera ESLint och Prettier.

// .vscode/settings.json — inställningar för mobilprojekt
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Tillägg för mobilutveckling: Flutter (Dart Code, 50M+ installationer), React Native Tools (Microsoft, 10M+), Expo (för React Native Expo), Thunder Client (API-testning), GitLens (Git-visualisering), Error Lens (inline-fel), Material Icon Theme (filikoner). Det rekommenderas också att installera Code Runner för snabb körning av skript.

Arbetsytekonfiguration (.code-workspace) gör det möjligt att gruppera relaterade projekt i ett enda VS Code-fönster. För monorepon (t.ex. React Native + Backend) öppnar arbetsytan alla mappar med deras inställningar, tillägg och startkonfigurationer. VS Code upptäcker automatiskt projects i arbetsytan och visar dem i Explorer.

Flutter i VS Code

Flutter-tillägget för VS Code tillhandahåller en komplett uppsättning utvecklingsverktyg: skapa projekt (Ctrl+Shift+P → Flutter: New Project), hot reload (Hot Reload, Hot Restart), UI-inspektör (Flutter Inspector), emulator/enhet (Flutter: Select Device), DevTools (widget-träd, tidslinje, nätverk, minne).

// lib/main.dart — Flutter-app med navigering
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 i VS Code startas som en flik i redigeraren eller ett separat fönster. DevTools inkluderar Flutter Inspector (widget-träd med layout-överlägg), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocations), Network (HTTP-förfrågningar) och Logging (dart:developer log, stderr).

React Native i VS Code

React Native Tools — ett officiellt Microsoft-tillägg för felsökning av React Native-applikationer. Det stöder körning på Android-emulator, iOS-simulator och fysiska enheter, JavaScript-felsökning med brytpunkter, elementinspektör via Flipper och integration med Expo för snabb utveckling.

Konfiguration av React Native: tillägget lägger till kommandon React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. För felsökning av Hermes används React Native Hermes Debugger. VS Code stöder Flipper Integration — pluginprogrammet Reactotron för övervakning av nätverk, Redux/NgRx-tillstånd, async storage, console.log.

// App.tsx — React Native-komponent med navigering
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 — ett obligatoriskt par för TypeScript i VS Code. ESLint kontrollerar kodsemantik (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formaterar indrag, citattecken och komman. Konfigurationen sparas i .eslintrc.js och .prettierrc. VS Code kör automatiskt ESLint vid sparande och markerar fel inline.

Ionic i VS Code

Ionic — ett ramverk för hybrida mobilapplikationer på Angular, React eller Vue. VS Code tillhandahåller inbyggt stöd för TypeScript, Angular Language Service (för .html-mallar) och autokomplettering för Ionic-komponenter via tillägget Ionic Snippets. För kompilering och publicering används Capacitor (efterföljare till Cordova).

Ionic CLI-integration i VS Code: den inbyggda terminalen kör ionic serve för utveckling i webbläsaren, ionic build för produktion och ionic cap sync för synkronisering med inbyggda plattformar. Tillägget Ionic Extension lägger till en panel med kommandon: Generate Page, Generate Component, Run on Android/iOS.

Capacitor-plugins — en bro mellan webbkod och inbyggt API. Huvudsakliga plugins: Camera, Geolocation, Push Notifications, File System, Storage. Varje plugin har ett enhetligt JS API och inbyggda implementationer för Android (Java/Kotlin) och iOS (Swift). VS Code erbjuder autokomplettering för Capacitor API via TypeScript-definitioner.

Launch.json och felsökning

launch.json — VS Code-felsökarens konfiguration i mappen .vscode/. För mobilprojekt definierar launch.json starttypen: Flutter (dart), React Native (reactnative), Ionic (chrome eller edge för felsökning i webbläsare). Varje konfiguration inkluderar parametrar: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — konfigurationer för Flutter och 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-felsökning i VS Code — parallell körning av flera konfigurationer (compounds). Till exempel Flutter DevTools + Flutter App med automatisk öppning av Inspector. För React Native används Attach to Packager — först startas Metro bundler, sedan ansluter felsökaren till den redan körande applikationen.

Remote development via Dev Containers: VS Code ansluter till en Docker-container eller WSL2 med förinstallerad SDK (Flutter, Android, Node.js). Tillägget Dev Containers (tidigare Remote — Containers) startar projektet i en isolerad miljö med en komplett uppsättning verktyg, inklusive emulator och felsökare.