VS Code: editor untuk Flutter, React Native dan Ionic

Apa itu VS Code?

VS Code — editor kode sumber yang dirilis oleh Microsoft pada tahun 2015. Tidak seperti Visual Studio, VS Code bukanlah IDE yang lengkap — ini adalah editor ringan yang dapat diperluas hingga level IDE melalui ekstensi. Untuk pengembangan mobile, VS Code mendukung Flutter (melalui ekstensi Dart Code), React Native (ekstensi React Native Tools) dan Ionic (melalui dukungan TypeScript bawaan).

Menurut Stack Overflow Developer Survey 2025, VS Code digunakan oleh 74% dari seluruh pengembang, menjadikannya editor paling populer di dunia. Untuk pengembangan mobile, 68% pengembang Flutter, 55% pengembang React Native dan 71% pengembang Ionic memilihnya. Alasan utama: kecepatan kerja, kemampuan perluasan, Git bawaan dan terminal.

Arsitektur VS Code dibangun di atas Language Server Protocol (LSP) untuk pelengkapan otomatis dan diagnostik, Debug Adapter Protocol (DAP) untuk debugging dan ekstensi dalam format VSIX. Editor berjalan di Electron (Chromium + Node.js), memungkinkan penggunaan JavaScript/TypeScript untuk membuat ekstensi. VS Code tersedia di Windows, macOS dan Linux.

Pengaturan VS Code untuk pengembangan mobile

Pengaturan dasar VS Code untuk pengembangan mobile meliputi pemasangan paket ekstensi untuk framework tertentu. Untuk Flutter, ekstensi Flutter sudah cukup (Dart akan terinstal secara otomatis). Untuk React Native — React Native Tools. Untuk Ionic/React Native dengan TypeScript — dukungan bawaan berfungsi langsung, tetapi disarankan untuk menginstal ESLint dan Prettier.

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

Ekstensi untuk pengembangan mobile: Flutter (Dart Code, 50J+ pemasangan), React Native Tools (Microsoft, 10J+), Expo (untuk React Native Expo), Thunder Client (pengujian API), GitLens (visualisasi Git), Error Lens (kesalahan inline), Material Icon Theme (ikon file). Juga disarankan untuk menginstal Code Runner untuk menjalankan skrip dengan cepat.

Konfigurasi Workspace (.code-workspace) memungkinkan pengelompokan proyek terkait dalam satu jendela VS Code. Untuk monorepository (misalnya, React Native + Backend), workspace membuka semua folder dengan pengaturan, ekstensi dan konfigurasi launch mereka. VS Code secara otomatis mendeteksi proyek di workspace dan menampilkannya di Explorer.

Flutter di VS Code

Ekstensi Flutter untuk VS Code menyediakan seperangkat alat pengembangan lengkap: membuat proyek (Ctrl+Shift+P → Flutter: New Project), muat ulang panas (Hot Reload, Hot Restart), inspektur UI (Flutter Inspector), emulator/perangkat (Flutter: Select Device), DevTools (pohon widget, timeline, jaringan, memori).

// lib/main.dart — aplikasi Flutter dengan navigasi
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 di VS Code terbuka sebagai tab di dalam editor atau jendela terpisah. DevTools mencakup Flutter Inspector (pohon widget dengan overlay tata letak), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, alokasi), Network (permintaan HTTP) dan Logging (dart:developer log, stderr).

React Native di VS Code

React Native Tools — ekstensi resmi Microsoft untuk debugging aplikasi React Native. Mendukung menjalankan di emulator Android, simulator iOS dan perangkat fisik, debugging JavaScript dengan breakpoints, inspeksi elemen melalui Flipper dan integrasi dengan Expo untuk pengembangan cepat.

Pengaturan React Native: ekstensi menambahkan perintah React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Untuk debugging Hermes digunakan React Native Hermes Debugger. VS Code mendukung Flipper Integration — plugin Reactotron untuk memantau jaringan, status Redux/NgRx, async storage, console.log.

// App.tsx — komponen React Native dengan navigasi
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 — kombinasi wajib untuk TypeScript di VS Code. ESLint memeriksa semantik kode (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier memformat indentasi, tanda kutip, koma. Konfigurasi disimpan di .eslintrc.js dan .prettierrc. VS Code secara otomatis menjalankan ESLint saat menyimpan dan menyorot kesalahan secara inline.

Ionic di VS Code

Ionic — framework untuk aplikasi mobile hybrid di Angular, React atau Vue. VS Code menyediakan dukungan TypeScript bawaan, Angular Language Service (untuk template .html) dan pelengkapan otomatis untuk komponen Ionic melalui ekstensi Ionic Snippets. Untuk membangun dan mempublikasikan digunakan Capacitor (penerus Cordova).

Integrasi Ionic CLI di VS Code: terminal bawaan menjalankan ionic serve untuk pengembangan di browser, ionic build untuk produksi dan ionic cap sync untuk sinkronisasi dengan platform native. Ekstensi Ionic Extension menambahkan panel dengan perintah: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — jembatan antara kode web dan API native. Plugin utama: Camera, Geolocation, Push Notifications, File System, Storage. Setiap plugin memiliki JS API yang seragam dan implementasi native untuk Android (Java/Kotlin) dan iOS (Swift). VS Code menawarkan pelengkapan otomatis untuk Capacitor API melalui definisi TypeScript.

Launch.json dan debugging

launch.json — konfigurasi debugger VS Code di folder .vscode/. Untuk proyek mobile, launch.json mendefinisikan jenis peluncuran: Flutter (dart), React Native (reactnative), Ionic (chrome atau edge untuk debugging di browser). Setiap konfigurasi mencakup parameter: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — konfigurasi untuk Flutter dan 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}"
        }
    ]
}

Debugging Multi-target di VS Code — menjalankan beberapa konfigurasi secara paralel (compounds). Misalnya, Flutter DevTools + Flutter App dengan pembukaan Inspector secara otomatis. Untuk React Native digunakan Attach to Packager — pertama Metro bundler dijalankan, kemudian debugger terhubung ke aplikasi yang sudah berjalan.

Remote development melalui Dev Containers: VS Code terhubung ke kontainer Docker atau WSL2 dengan SDK yang sudah terinstal (Flutter, Android, Node.js). Ekstensi Dev Containers (sebelumnya Remote — Containers) menjalankan proyek di lingkungan terisolasi dengan seperangkat alat lengkap, termasuk emulator dan debugger.