VS Code: едитор за Flutter, React Native и Ionic

Шта је VS Code?

VS Code — едитор изворног кода који је Microsoft објавио 2015. године. За разлику од Visual Studio-а, VS Code није потпуно IDE — то је лагани едитор који се проширује до нивоа IDE-а путем extensions. За мобилни развој, VS Code подржава Flutter (преко Dart Code extension), React Native (React Native Tools extension) и 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-а за мобилни развој укључује инсталацију extension pack-а за одређени framework. За 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 extension за 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('Hello from VS Code!'),
                    child: Text('Tap here'),
                ),
            ),
        );
    }
}

Dart DevTools у VS Code-у се покреће као картица унутар едитора или као посебан прозор. DevTools укључује Flutter Inspector (стабло виџета са layout overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, алокације), 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 plugin за праћење мреже, 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 — framework за хибридне мобилне апликације у 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-ја. Главни plugin-и: Camera, Geolocation, Push Notifications, File System, Storage. Сваки plugin има јединствени 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) покреће пројекат у изолованом окружењу са комплетним скупом алата, укључујући емулатор и дебагер.