VS Code: โปรแกรมแก้ไขสำหรับ Flutter, React Native และ Ionic

VS Code คืออะไร?

VS Code เป็นโปรแกรมแก้ไขซอร์สโค้ดที่เผยแพร่โดย Microsoft ในปี 2015 แตกต่างจาก Visual Studio ตรงที่ VS Code ไม่ใช่ IDE ที่สมบูรณ์ — เป็นโปรแกรมแก้ไขน้ำหนักเบาที่สามารถขยายถึงระดับ IDE ผ่านส่วนขยาย สำหรับการพัฒนาโมบายล์ VS Code รองรับ Flutter (ผ่านส่วนขยาย Dart Code), React Native (ส่วนขยาย React Native Tools) และ Ionic (ผ่านการรองรับ TypeScript ในตัว)

จากการสำรวจนักพัฒนา Stack Overflow ปี 2025 นักพัฒนา 74% ใช้ VS Code ทำให้เป็นโปรแกรมแก้ไขที่ได้รับความนิยมมากที่สุดในโลก สำหรับการพัฒนาโมบายล์ นักพัฒนา Flutter 68%, นักพัฒนา React Native 55% และนักพัฒนา Ionic 71% เลือกใช้ VS Code เหตุผลหลักคือ ความเร็ว ความสามารถในการขยาย 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 พื้นฐาน สำหรับการพัฒนาโมบายล์รวมถึงการติดตั้งชุดส่วนขยายสำหรับเฟรมเวิร์กเฉพาะ สำหรับ 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 สำหรับการรันสคริปต์อย่างรวดเร็ว

การกำหนดค่าพื้นที่ทำงาน (.code-workspace) ช่วยให้จัดกลุ่มโปรเจกต์ที่เกี่ยวข้องในหน้าต่าง VS Code เดียว สำหรับโมโนรีโพ (เช่น React Native + Backend) พื้นที่ทำงานจะเปิดโฟลเดอร์ทั้งหมดพร้อมการตั้งค่า ส่วนขยาย และการกำหนดค่าเริ่มต้น VS Code จะตรวจจับโปรเจกต์ในพื้นที่ทำงานโดยอัตโนมัติและแสดงใน Explorer

Flutter ใน VS Code

ส่วนขยาย Flutter สำหรับ VS Code มีชุดเครื่องมือพัฒนาที่สมบูรณ์: การสร้างโปรเจกต์ (Ctrl+Shift+P → Flutter: New Project), การโหลดซ้ำทันที (Hot Reload, Hot Restart), ตัวตรวจสอบ UI (Flutter Inspector), อีมูเลเตอร์/อุปกรณ์ (Flutter: Select Device), DevTools (แผนผังวิดเจ็ต, ไทม์ไลน์, เครือข่าย, หน่วยความจำ)

// 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('สวัสดีจาก VS Code!'),
                    child: Text('แตะที่นี่'),
                ),
            ),
        );
    }
}

Dart DevTools ใน VS Code ทำงานเป็นแท็บภายในโปรแกรมแก้ไขหรือหน้าต่างแยก DevTools ประกอบด้วย Flutter Inspector (แผนผังวิดเจ็ตพร้อมการซ้อนทับเค้าโครง), ประสิทธิภาพ (FPS, การ build/rast เฟรม), CPU Profiler (flutter/scheduler/gesture), หน่วยความจำ (ภาพรวมฮีป, GC, การจัดสรร), เครือข่าย (คำขอ HTTP) และการบันทึก (dart:developer log, stderr)

React Native ใน VS Code

React Native Tools เป็นส่วนขยายอย่างเป็นทางการของ Microsoft สำหรับการดีบักแอปพลิเคชัน React Native รองรับการรันบนอีมูเลเตอร์ Android, จำลอง iOS และอุปกรณ์จริง การดีบัก JavaScript พร้อมเบรกพอยต์ การตรวจสอบองค์ประกอบผ่าน Flipper และการรวมกับ Expo เพื่อการพัฒนาที่รวดเร็ว

การตั้งค่า React Native: ส่วนขยายเพิ่มคำสั่ง React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug การดีบัก Hermes ใช้ React Native Hermes Debugger VS Code รองรับการรวม Flipper — ปลั๊กอิน Reactotron สำหรับตรวจสอบเครือข่าย สถานะ 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 โดยอัตโนมัติเมื่อบันทึกและเน้นข้อผิดพลาดในบรรทัด

Ionic ใน VS Code

Ionic เป็นเฟรมเวิร์กสำหรับแอปพลิเคชันโมบายล์แบบไฮบริดที่ใช้ 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 — สะพานระหว่างโค้ดเว็บและ API เนทีฟ ปลั๊กอินหลัก: Camera, Geolocation, Push Notifications, File System, Storage แต่ละปลั๊กอินมี JS API ที่เป็นหนึ่งเดียวและการใช้งานเนทีฟสำหรับ Android (Java/Kotlin) และ iOS (Swift) VS Code มีการเติมข้อความอัตโนมัติสำหรับ Capacitor API ผ่านนิยาม TypeScript

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}"
        }
    ]
}

การดีบักหลายเป้าหมาย ใน VS Code — การเริ่มต้นการกำหนดค่าหลายรายการ (compounds) พร้อมกัน ตัวอย่างเช่น Flutter DevTools + Flutter App พร้อมเปิด Inspector โดยอัตโนมัติ สำหรับ React Native ใช้ Attach to Packager — อันดับแรก Metro bundler เริ่มทำงาน จากนั้นดีบักเกอร์เชื่อมต่อกับแอปพลิเคชันที่กำลังทำงานอยู่

การพัฒนาระยะไกล ผ่าน Dev Containers: VS Code เชื่อมต่อกับคอนเทนเนอร์ Docker หรือ WSL2 ที่ติดตั้ง SDK ไว้ล่วงหน้า (Flutter, Android, Node.js) ส่วนขยาย Dev Containers (เดิมคือ Remote — Containers) เริ่มโปรเจกต์ในสภาพแวดล้อมที่แยกออกมาพร้อมชุดเครื่องมือที่สมบูรณ์ รวมถึงอีมูเลเตอร์และดีบักเกอร์