VS Code: editor para sa Flutter, React Native at Ionic

Ano ang VS Code?

VS Code — source code editor na inilabas ng Microsoft noong 2015. Hindi tulad ng Visual Studio, ang VS Code ay hindi isang kumpletong IDE — ito ay isang magaan na editor na napapalawak hanggang sa antas ng IDE sa pamamagitan ng extensions. Para sa mobile development, sinusuportahan ng VS Code ang Flutter (sa pamamagitan ng Dart Code extension), React Native (React Native Tools extension) at Ionic (sa pamamagitan ng built-in na TypeScript support).

Ayon sa Stack Overflow Developer Survey 2025, ang VS Code ay ginagamit ng 74% ng lahat ng developer, ginagawa itong pinakasikat na editor sa mundo. Para sa mobile development, pinipili ito ng 68% ng Flutter developer, 55% ng React Native developer at 71% ng Ionic developer. Mga pangunahing dahilan: bilis ng trabaho, extensibility, built-in na Git at terminal.

Arkitektura ng VS Code ay binuo sa Language Server Protocol (LSP) para sa auto-completion at diagnostics, Debug Adapter Protocol (DAP) para sa debugging at extensions sa VSIX format. Ang editor ay tumatakbo sa Electron (Chromium + Node.js), na nagpapahintulot sa paggamit ng JavaScript/TypeScript para sa paglikha ng mga extension. Ang VS Code ay available sa Windows, macOS at Linux.

Pag-setup ng VS Code para sa mobile development

Ang pangunahing VS Code setup para sa mobile development ay may kasamang pag-install ng extension pack para sa partikular na framework. Para sa Flutter, sapat na ang Flutter extension (awtomatikong mai-install ang Dart). Para sa React Native — React Native Tools. Para sa Ionic/React Native na may TypeScript — built-in na suporta ay gumagana agad, ngunit inirerekomenda na i-install ang ESLint at Prettier.

// .vscode/settings.json — mga setting para sa 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"
}

Mga extension para sa mobile development: Flutter (Dart Code, 50M+ na pag-install), React Native Tools (Microsoft, 10M+), Expo (para sa React Native Expo), Thunder Client (pagsubok ng API), GitLens (visualization ng Git), Error Lens (inline na error), Material Icon Theme (icon ng file). Inirerekomenda din na i-install ang Code Runner para sa mabilis na pagtakbo ng mga script.

Workspace configuration (.code-workspace) ay nagpapahintulot sa paggrupo ng mga kaugnay na proyekto sa isang VS Code window. Para sa monorepository (hal., React Native + Backend), binubuksan ng workspace ang lahat ng folder na may kanilang mga setting, extension at launch configuration. Awtomatikong natutukoy ng VS Code ang mga proyekto sa workspace at ipinapakita ang mga ito sa Explorer.

Flutter sa VS Code

Flutter extension para sa VS Code ay nagbibigay ng kumpletong hanay ng mga tool sa pag-develop: paggawa ng proyekto (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 app na may 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 sa VS Code ay bubukas bilang tab sa loob ng editor o hiwalay na window. Kasama sa DevTools ang Flutter Inspector (widget tree na may layout overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocation), Network (HTTP requests) at Logging (dart:developer log, stderr).

React Native sa VS Code

React Native Tools — opisyal na Microsoft extension para sa debugging ng React Native applications. Sinusuportahan ang pagtakbo sa Android emulator, iOS simulator at pisikal na device, JavaScript debugging na may breakpoints, inspeksyon ng elemento sa pamamagitan ng Flipper at integration sa Expo para sa mabilis na development.

React Native setup: ang extension ay nagdaragdag ng mga command na React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Para sa debugging ng Hermes, ginagamit ang React Native Hermes Debugger. Sinusuportahan ng VS Code ang Flipper Integration — Reactotron plugin para sa pagmonitor ng network, Redux/NgRx state, async storage, console.log.

// App.tsx — React Native component na may 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 — mandatoryong kumbinasyon para sa TypeScript sa VS Code. Sinusuri ng ESLint ang semantika ng code (no-unused-vars, @typescript-eslint/ban-ts-comment), ini-format ng Prettier ang indentation, quotes, commas. Ang configuration ay naka-store sa .eslintrc.js at .prettierrc. Awtomatikong pinapatakbo ng VS Code ang ESLint sa pag-save at ini-highlight ang mga error inline.

Ionic sa VS Code

Ionic — framework para sa hybrid mobile applications sa Angular, React o Vue. Nagbibigay ang VS Code ng built-in na TypeScript support, Angular Language Service (para sa .html templates) at auto-completion para sa Ionic components sa pamamagitan ng Ionic Snippets extension. Para sa pag-build at pag-publish, ginagamit ang Capacitor (kapalit ng Cordova).

Ionic CLI integration sa VS Code: built-in na terminal ay nagpapatakbo ng ionic serve para sa development sa browser, ionic build para sa produksyon at ionic cap sync para sa synchronisation sa native platforms. Ang Ionic Extension ay nagdaragdag ng panel na may mga command: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — tulay sa pagitan ng web code at native API. Mga pangunahing plugin: Camera, Geolocation, Push Notifications, File System, Storage. Bawat plugin ay may pare-parehong JS API at native implementations para sa Android (Java/Kotlin) at iOS (Swift). Nag-aalok ang VS Code ng auto-completion para sa Capacitor API sa pamamagitan ng TypeScript definitions.

Launch.json at debugging

launch.json — configuration ng VS Code debugger sa folder na .vscode/. Para sa mobile projects, tinutukoy ng launch.json ang uri ng paglunsad: Flutter (dart), React Native (reactnative), Ionic (chrome o edge para sa debugging sa browser). Bawat configuration ay may kasamang parameters: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — mga configuration para sa Flutter at 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 sa VS Code — parallel na pagtakbo ng maraming configuration (compounds). Halimbawa, Flutter DevTools + Flutter App na may automatic na pagbukas ng Inspector. Para sa React Native, ginagamit ang Attach to Packager — unang pinapatakbo ang Metro bundler, pagkatapos ay kumokonekta ang debugger sa tumatakbo nang application.

Remote development sa pamamagitan ng Dev Containers: kumokonekta ang VS Code sa Docker container o WSL2 na may naka-install na SDK (Flutter, Android, Node.js). Ang Dev Containers extension (dating Remote — Containers) ay nagpapatakbo ng proyekto sa isolated na environment na may kumpletong hanay ng mga tool, kasama ang emulator at debugger.