VS Code: editor para Flutter, React Native e Ionic

O que é o VS Code?

VS Code é um editor de código-fonte lançado pela Microsoft em 2015. Ao contrário do Visual Studio, o VS Code não é uma IDE completa — é um editor leve extensível ao nível de IDE através de extensões. Para desenvolvimento mobile, o VS Code suporta Flutter (via extensão Dart Code), React Native (extensão React Native Tools) e Ionic (através do suporte integrado a TypeScript).

De acordo com a Pesquisa de Desenvolvedores Stack Overflow 2025, o VS Code é usado por 74% de todos os desenvolvedores, tornando-o o editor mais popular do mundo. Para desenvolvimento mobile, é escolhido por 68% dos desenvolvedores Flutter, 55% dos desenvolvedores React Native e 71% dos desenvolvedores Ionic. As principais razões são: velocidade, extensibilidade, Git integrado e terminal.

Arquitetura do VS Code é construída sobre o Protocolo de Servidor de Linguagem (LSP) para autocompletar e diagnóstico, o Protocolo de Adaptador de Depuração (DAP) para depuração e extensões no formato VSIX. O editor funciona no Electron (Chromium + Node.js), permitindo o uso de JavaScript/TypeScript para criar extensões. O VS Code está disponível no Windows, macOS e Linux.

Configuração do VS Code para desenvolvimento mobile

A configuração básica do VS Code para desenvolvimento mobile inclui a instalação de um pacote de extensões para o framework específico. Para Flutter, a extensão Flutter é suficiente (o Dart é instalado automaticamente). Para React Native — React Native Tools. Para Ionic/React Native com TypeScript — o suporte integrado funciona imediatamente, mas é recomendável instalar o ESLint e o Prettier.

// .vscode/settings.json — configurações para um projeto mobile
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensões para desenvolvimento mobile: Flutter (Dart Code, mais de 50M de instalações), React Native Tools (Microsoft, mais de 10M), Expo (para React Native Expo), Thunder Client (teste de API), GitLens (visualização do Git), Error Lens (erros inline), Material Icon Theme (ícones de arquivos). Também é recomendado instalar o Code Runner para execução rápida de scripts.

Configuração do espaço de trabalho (.code-workspace) permite agrupar projetos relacionados em uma única janela do VS Code. Para monorrepositórios (por exemplo, React Native + Backend), o espaço de trabalho abre todas as pastas com suas configurações, extensões e configurações de inicialização. O VS Code detecta automaticamente os projetos no espaço de trabalho e os exibe no Explorer.

Flutter no VS Code

A extensão Flutter para VS Code fornece um conjunto completo de ferramentas de desenvolvimento: criação de projetos (Ctrl+Shift+P → Flutter: New Project), recarga rápida (Hot Reload, Hot Restart), inspetor de UI (Flutter Inspector), emulador/dispositivo (Flutter: Select Device), DevTools (árvore de widgets, linha do tempo, rede, memória).

// lib/main.dart — aplicação Flutter com navegação
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('Olá do VS Code!'),
                    child: Text('Toque aqui'),
                ),
            ),
        );
    }
}

Dart DevTools no VS Code é executado como uma aba dentro do editor ou como uma janela separada. O DevTools inclui Flutter Inspector (árvore de widgets com sobreposição de layout), Desempenho (FPS, build/rast de quadros), CPU Profiler (flutter/scheduler/gesture), Memória (instantâneo de heap, GC, alocações), Rede (requisições HTTP) e Logging (dart:developer log, stderr).

React Native no VS Code

React Native Tools é a extensão oficial da Microsoft para depurar aplicações React Native. Suporta execução no emulador Android, simulador iOS e dispositivos físicos, depuração JavaScript com breakpoints, inspeção de elementos via Flipper e integração com Expo para desenvolvimento rápido.

Configuração do React Native: a extensão adiciona comandos React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. A depuração Hermes usa o React Native Hermes Debugger. O VS Code suporta a Integração Flipper — o plugin Reactotron para monitorar rede, estado Redux/NgRx, async storage, console.log.

// App.tsx — componente React Native com navegação
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 é uma combinação obrigatória para TypeScript no VS Code. O ESLint verifica a semântica do código (no-unused-vars, @typescript-eslint/ban-ts-comment), o Prettier formata indentação, aspas, vírgulas. A configuração é salva em .eslintrc.js e .prettierrc. O VS Code executa automaticamente o ESLint ao salvar e destaca erros inline.

Ionic no VS Code

Ionic é um framework para aplicações móveis híbridas usando Angular, React ou Vue. O VS Code fornece suporte integrado a TypeScript, Angular Language Service (para templates .html) e autocompletar para componentes Ionic através da extensão Ionic Snippets. O Capacitor (sucessor do Cordova) é usado para construção e publicação.

Integração Ionic CLI no VS Code: o terminal integrado executa ionic serve para desenvolvimento no navegador, ionic build para produção e ionic cap sync para sincronização com plataformas nativas. A extensão Ionic Extension adiciona um painel com comandos: Generate Page, Generate Component, Run on Android/iOS.

Plugins do Capacitor — uma ponte entre o código web e as APIs nativas. Plugins principais: Camera, Geolocation, Push Notifications, File System, Storage. Cada plugin tem uma API JS unificada e implementações nativas para Android (Java/Kotlin) e iOS (Swift). O VS Code oferece autocompletar para a API do Capacitor através de definições TypeScript.

Launch.json e depuração

launch.json — a configuração do depurador do VS Code na pasta .vscode/. Para projetos mobile, o launch.json define o tipo de inicialização: Flutter (dart), React Native (reactnative), Ionic (chrome ou edge para depuração no navegador). Cada configuração inclui parâmetros: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configurações para Flutter e 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}"
        }
    ]
}

Depuração multi-alvo no VS Code — execução paralela de várias configurações (compounds). Por exemplo, Flutter DevTools + Flutter App com abertura automática do Inspector. Para React Native, usa-se Attach to Packager — primeiro o Metro bundler é iniciado, depois o depurador se conecta à aplicação já em execução.

Desenvolvimento remoto via Dev Containers: o VS Code se conecta a um contêiner Docker ou WSL2 com SDK pré-instalado (Flutter, Android, Node.js). A extensão Dev Containers (anteriormente Remote — Containers) executa o projeto em um ambiente isolado com um conjunto completo de ferramentas, incluindo emulador e depurador.