vscode.dev: เขียนโค้ดบนเว็บเบราว์เซอร์ ไม่ต้องติดตั้งอะไรเลย

สมมติว่าคุณอยู่นอกบ้าน ใช้คอมเครื่องอื่น หรือแค่ยืม iPad เพื่อนมา แล้วอยากดู Code ของโปรเจกต์สักหน่อย… จะทำยังไง?

คำตอบคือ เปิดเบราว์เซอร์ แล้วพิมพ์ vscode.dev

เมื่อลูกค้าแจ้ง Bug แต่คุณอยู่ในร้านกาแฟ

vscode.dev คืออะไร?

vscode.dev คือ Visual Studio Code เวอร์ชันที่รันบนเว็บเบราว์เซอร์โดยตรง สร้างโดย Microsoft เปิดให้ใช้ฟรี ไม่ต้องติดตั้งอะไร ไม่ต้อง Sign in ก็เริ่มใช้ได้เลย

พูดง่ายๆ คือเอา VS Code ตัวเดียวกับที่เราใช้บน Desktop มายัดใส่เว็บเบราว์เซอร์ ได้ทั้ง Theme, Keyboard Shortcuts, Extensions (บางตัว) และ UI ที่คุ้นเคย ตามที่ Microsoft ประกาศเปิดตัวเมื่อปี 2021 ว่าต้องการให้ทุกคนเข้าถึง VS Code ได้จากทุกที่

เปิดมาก็เริ่มเขียนโค้ดได้เลย Syntax Highlighting, Bracket Matching, Auto-indent ทุกอย่างทำงานเหมือน Desktop จุดเดียว

ทำไมต้องใช้ vscode.dev?

คุณอาจจะสงสัยว่า “ก็มี VS Code Desktop อยู่แล้ว จะใช้ตัวเว็บทำไม?” เหตุผลมีหลายข้อมาก:

1. ไม่ต้องติดตั้งอะไรเลย — เปิดเบราว์เซอร์ พิมพ์ URL จบ
2. ใช้บนเครื่องไหนก็ได้ — Chromebook, iPad, คอมห้องสมุด, มือถือ (ถ้าจอใหญ่พอ)
3. เปิด GitHub repo ได้ทันที — แค่เปลี่ยน URL จาก github.com เป็น github.dev
4. แก้ไขไฟล์ในเครื่องได้ — ใช้ File System Access API เปิดโฟลเดอร์จากเครื่องตัวเองได้เลย
5. Lightweight มาก — โหลดเร็ว ไม่กินแรมเท่า Desktop app

วิธีใช้งาน

แบบที่ 1: เปิดตรงๆ

แค่เข้า vscode.dev บนเบราว์เซอร์ แล้วเริ่มเขียนโค้ดได้เลย สามารถเปิดไฟล์หรือโฟลเดอร์จากเครื่องตัวเองผ่าน File > Open Folder ใช้ Command Palette (Cmd/Ctrl + Shift + P) เข้าถึงทุกคำสั่งได้เหมือน Desktop เลย

แบบที่ 2: เปิด GitHub Repo โดยตรง

นี่คือ Killer feature ที่เจ๋งมาก สมมติคุณอยู่ที่ GitHub repo:

https://github.com/microsoft/vscode

แค่เปลี่ยน github.com เป็น github.dev:

https://github.dev/microsoft/vscode

VS Code จะเปิดขึ้นมาพร้อม repo นั้นทันที สามารถ browse code, แก้ไข, แล้ว commit ได้เลย ตอนที่ฟีเจอร์นี้เปิดตัว Visual Studio Magazine ถึงกับตั้งหัวข้อว่า “How Did I Not Know This?” เลยทีเดียว

แบบที่ 3: เปิดจาก Azure Repos

https://vscode.dev/azurerepos/{organization}/{project}/{repository}

ใช้ได้กับ Azure DevOps เหมือนกัน สำหรับคนที่ทำงานในองค์กรที่ใช้ Azure

แบบที่ 4: เปิดด้วย URL Scheme

สามารถเปิดไฟล์หรือ repo ด้วย URL parameters ได้:

https://vscode.dev/github/{owner}/{repo}
https://vscode.dev/github/{owner}/{repo}/blob/{branch}/{path-to-file}

ฟีเจอร์หลัก

Source Control (Git Integration)

ถ้าเปิด GitHub repo ผ่าน github.dev จะสามารถ:

• ดู diff ของไฟล์ที่เปลี่ยนแปลง
• Stage / Unstage changes
• เขียน Commit message
• สร้าง Branch ใหม่
• เปิด Pull Request

ทั้งหมดนี้ทำได้ โดยไม่ต้อง clone repo มาที่เครื่อง เลย

Extensions ที่ใช้ได้

vscode.dev รองรับ Extensions ที่เป็น Web Extensions ซึ่งไม่ต้องใช้ Node.js runtime ตัวอย่างที่ใช้ได้:

Search & Syntax Highlighting

• Full-text search ข้ามไฟล์ได้ (Cmd/Ctrl + Shift + F)
• Syntax Highlighting รองรับภาษาหลักๆ ครบ — JavaScript, TypeScript, Python, Go, Rust, HTML, CSS, JSON, YAML, Markdown ฯลฯ
• IntelliSense สำหรับ JavaScript/TypeScript (ใช้ Web-based Language Service)

Settings Sync

ถ้า Sign in ด้วย GitHub หรือ Microsoft account จะ sync settings จาก VS Code Desktop ได้เลย — Theme, Key Bindings, Extensions ทุกอย่างเหมือนกันหมด

Insiders Version

สำหรับคนที่อยากลองฟีเจอร์ใหม่ก่อนใคร เข้าได้ที่ insiders.vscode.dev — หน้าตาเหมือน vscode.dev ทุกอย่าง แต่จะได้ลองของใหม่ก่อนปล่อยให้คนทั่วไป

สิ่งที่ทำไม่ได้ (Limitations)

เพราะรันบนเบราว์เซอร์ บางอย่างจึงทำไม่ได้เหมือน Desktop:

• รัน Terminal ไม่ได้ — ไม่มี shell, ไม่สามารถ npm install หรือรันคำสั่งใดๆ
• Debug ไม่ได้ — Debugger ต้องใช้ Runtime ซึ่งเบราว์เซอร์ไม่มี
• Build/Compile ไม่ได้ — ไม่มี Node.js, Python, หรือ Runtime ใดๆ
• Extensions บางตัวใช้ไม่ได้ — ตัวที่ต้องใช้ Native code จะไม่ทำงาน
• ไม่มี Remote SSH/Container — ต่อไป Remote server ไม่ได้

เปรียบเทียบกับทางเลือกอื่น

จุดเด่นของ vscode.dev คือความ เบา เร็ว และฟรี ไม่ต้องรอ boot container ไม่ต้อง sign up ไม่มีค่าใช้จ่าย เหมาะกับการ browse code และแก้ไขเล็กน้อย

GitHub Codespaces เหมาะกว่าถ้าต้องการ Full development environment บนเว็บ (Terminal, Debug, Run) — Needlify มีบทความเปรียบเทียบไว้ละเอียดดี

Use Cases ที่เหมาะ

• Code Review — เปิด PR แล้วกด . เพื่อดู code ใน VS Code UI แทน GitHub diff
• Quick Edit — แก้ typo, อัปเดต README, แก้ config ไม่ต้อง clone repo
• Browse Code — อ่าน source code ของ Open Source project ด้วย IntelliSense
• เขียน Markdown/Docs — ใช้ Markdown Preview ในตัวเขียนเอกสาร
• เครื่องที่ลงโปรแกรมไม่ได้ — Chromebook, คอมบริษัทที่ถูกล็อก, iPad
• Demo/Teaching — สอนเขียนโค้ดโดยไม่ต้องให้นักเรียนลงอะไร

ลิงก์สำคัญ

• เว็บไซต์: vscode.dev
• Insiders: insiders.vscode.dev
• Documentation: VS Code for the Web
• GitHub: github.com/microsoft/vscode

ส่วนตัวผมใช้ vscode.dev บ่อยมากตอน Review code บน GitHub ครับ แค่กดจุด (.) แล้วดูโค้ดใน VS Code UI ได้เลย สะดวกกว่าดู diff บน GitHub เยอะมาก อีกอย่างคือใช้ตอนอยู่นอกบ้านแล้วต้องแก้อะไรเล็กน้อย เปิดบน iPad ก็ใช้ได้สบาย ข้อจำกัดหลักคือไม่มี Terminal แต่ถ้าแค่อ่านโค้ดหรือแก้นิดหน่อย มันก็เพียงพอแล้ว ที่ชอบมากคือมันฟรีจริงๆ ไม่มีค่าใช้จ่ายซ่อน ไม่ต้องสมัคร plan อะไร เปิดเว็บแล้วใช้ได้เลย