VS Code: trình soạn thảo cho Flutter, React Native và Ionic

VS Code là gì?

VS Code là trình soạn thảo mã nguồn do Microsoft phát hành năm 2015. Không giống như Visual Studio, VS Code không phải là IDE hoàn chỉnh — nó là trình soạn thảo nhẹ có thể mở rộng lên cấp IDE thông qua các tiện ích mở rộng. Đối với phát triển di động, VS Code hỗ trợ Flutter (qua tiện ích Dart Code), React Native (tiện ích React Native Tools) và Ionic (qua hỗ trợ TypeScript tích hợp).

Theo Khảo sát Nhà phát triển Stack Overflow 2025, VS Code được 74% tổng số nhà phát triển sử dụng, trở thành trình soạn thảo phổ biến nhất thế giới. Đối với phát triển di động, 68% nhà phát triển Flutter, 55% nhà phát triển React Native và 71% nhà phát triển Ionic chọn nó. Lý do chính: tốc độ, khả năng mở rộng, Git tích hợp và terminal.

Kiến trúc VS Code được xây dựng trên Giao thức Máy chủ Ngôn ngữ (LSP) để tự động hoàn thành và chẩn đoán, Giao thức Bộ điều hợp Gỡ lỗi (DAP) để gỡ lỗi và tiện ích mở rộng ở định dạng VSIX. Trình soạn thảo chạy trên Electron (Chromium + Node.js), cho phép sử dụng JavaScript/TypeScript để tạo tiện ích mở rộng. VS Code có sẵn trên Windows, macOS và Linux.

Thiết lập VS Code cho phát triển di động

Thiết lập VS Code cơ bản cho phát triển di động bao gồm cài đặt gói tiện ích cho framework cụ thể. Đối với Flutter, tiện ích Flutter là đủ (Dart tự động cài đặt). Đối với React Native — React Native Tools. Đối với Ionic/React Native với TypeScript — hỗ trợ tích hợp hoạt động ngay lập tức, nhưng nên cài đặt ESLint và Prettier.

// .vscode/settings.json — cài đặt cho dự án di động
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Tiện ích mở rộng cho phát triển di động: Flutter (Dart Code, hơn 50M lượt cài), React Native Tools (Microsoft, hơn 10M), Expo (cho React Native Expo), Thunder Client (kiểm thử API), GitLens (trực quan hóa Git), Error Lens (lỗi nội dòng), Material Icon Theme (biểu tượng tệp). Cũng nên cài đặt Code Runner để chạy script nhanh.

Cấu hình không gian làm việc (.code-workspace) cho phép nhóm các dự án liên quan trong một cửa sổ VS Code duy nhất. Đối với monorepo (ví dụ: React Native + Backend), không gian làm việc mở tất cả thư mục với cài đặt, tiện ích và cấu hình khởi chạy của chúng. VS Code tự động phát hiện các dự án trong không gian làm việc và hiển thị chúng trong Explorer.

Flutter trong VS Code

Tiện ích Flutter cho VS Code cung cấp bộ công cụ phát triển hoàn chỉnh: tạo dự án (Ctrl+Shift+P → Flutter: New Project), tải lại nhanh (Hot Reload, Hot Restart), thanh tra UI (Flutter Inspector), trình giả lập/thiết bị (Flutter: Select Device), DevTools (cây widget, dòng thời gian, mạng, bộ nhớ).

// lib/main.dart — ứng dụng Flutter với điều hướng
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('Xin chào từ VS Code!'),
                    child: Text('Nhấn vào đây'),
                ),
            ),
        );
    }
}

Dart DevTools trong VS Code chạy dưới dạng tab trong trình soạn thảo hoặc cửa sổ riêng. DevTools bao gồm Flutter Inspector (cây widget với lớp phủ bố cục), Hiệu suất (FPS, build/rast khung hình), CPU Profiler (flutter/scheduler/gesture), Bộ nhớ (ảnh chụp heap, GC, cấp phát), Mạng (yêu cầu HTTP) và Ghi nhật ký (dart:developer log, stderr).

React Native trong VS Code

React Native Tools là tiện ích chính thức của Microsoft để gỡ lỗi ứng dụng React Native. Nó hỗ trợ chạy trên trình giả lập Android, trình mô phỏng iOS và thiết bị thật, gỡ lỗi JavaScript với điểm dừng, kiểm tra phần tử qua Flipper và tích hợp với Expo để phát triển nhanh.

Thiết lập React Native: tiện ích thêm các lệnh React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Gỡ lỗi Hermes sử dụng React Native Hermes Debugger. VS Code hỗ trợ Tích hợp Flipper — plugin Reactotron để giám sát mạng, trạng thái Redux/NgRx, async storage, console.log.

// App.tsx — thành phần React Native với điều hướng
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 là sự kết hợp bắt buộc cho TypeScript trong VS Code. ESLint kiểm tra ngữ nghĩa mã (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier định dạng thụt lề, dấu ngoặc kép, dấu phẩy. Cấu hình được lưu trong .eslintrc.js và .prettierrc. VS Code tự động chạy ESLint khi lưu và đánh dấu lỗi nội dòng.

Ionic trong VS Code

Ionic là framework cho ứng dụng di động lai sử dụng Angular, React hoặc Vue. VS Code cung cấp hỗ trợ TypeScript tích hợp, Angular Language Service (cho mẫu .html) và tự động hoàn thành cho các thành phần Ionic qua tiện ích Ionic Snippets. Capacitor (kế nhiệm Cordova) được sử dụng để xây dựng và xuất bản.

Tích hợp Ionic CLI trong VS Code: terminal tích hợp chạy ionic serve để phát triển trên trình duyệt, ionic build cho sản xuất và ionic cap sync để đồng bộ với nền tảng gốc. Tiện ích Ionic Extension thêm bảng điều khiển với các lệnh: Generate Page, Generate Component, Run on Android/iOS.

Plugin Capacitor — cầu nối giữa mã web và API gốc. Plugin chính: Camera, Geolocation, Push Notifications, File System, Storage. Mỗi plugin có API JS thống nhất và triển khai gốc cho Android (Java/Kotlin) và iOS (Swift). VS Code cung cấp tự động hoàn thành cho API Capacitor qua định nghĩa TypeScript.

Launch.json và gỡ lỗi

launch.json — cấu hình trình gỡ lỗi VS Code trong thư mục .vscode/. Đối với dự án di động, launch.json xác định loại khởi chạy: Flutter (dart), React Native (reactnative), Ionic (chrome hoặc edge để gỡ lỗi trong trình duyệt). Mỗi cấu hình bao gồm các tham số: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — cấu hình cho Flutter và 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}"
        }
    ]
}

Gỡ lỗi đa mục tiêu trong VS Code — khởi chạy song song nhiều cấu hình (compounds). Ví dụ: Flutter DevTools + Flutter App với tự động mở Inspector. Đối với React Native, sử dụng Attach to Packager — đầu tiên Metro bundler được khởi động, sau đó trình gỡ lỗi kết nối với ứng dụng đang chạy.

Phát triển từ xa qua Dev Containers: VS Code kết nối với vùng chứa Docker hoặc WSL2 có SDK được cài sẵn (Flutter, Android, Node.js). Tiện ích Dev Containers (trước đây là Remote — Containers) khởi chạy dự án trong môi trường biệt lập với bộ công cụ đầy đủ, bao gồm trình giả lập và trình gỡ lỗi.