/Projects
Let’s talk
Getting started
ProjectsCS ChallengeStartGetting started

Getting started: ติดตั้ง IDE

ทำให้เสร็จก่อน Challenge Day 1

ทุกคนต้องมีที่เขียนโค้ด 1 ตัว เปิดโฟลเดอร์โปรเจกต์ได้ ใช้ Terminal ได้ และลง Extension หลักไว้แล้ว หน้านี้ใช้เวลาประมาณ 15 นาที

At a glance

ItemDetails
IDEVS Code (ค่าเริ่มต้นของคอร์ส), Cursor หรือ Orca เลือกตัวเดียว
เบราว์เซอร์Chrome หรือ Edge (ใช้ DevTools)
บัญชีGitHub (ใช้ตั้งแต่ Day 2)
ระบบที่รองรับWindows, macOS, Linux
ค่าใช้จ่ายฟรี (Cursor มีแพ็กเกจเสียเงินสำหรับ AI แต่ใช้แบบฟรีได้)
เช็กว่าพร้อมพิมพ์ code --version ใน Terminal แล้วเห็นเลขเวอร์ชัน

เลือก IDE

IDE (Integrated Development Environment) คือโปรแกรมที่รวมทุกอย่างที่ต้องใช้เขียนโค้ดไว้ในที่เดียว: ตัวแก้ไฟล์, Terminal, ตัวค้นหา, Git และ Extension ทั้งสามตัวด้านล่างเปิดโฟลเดอร์เดียวกันได้ เลือกตัวเดียวพอ

IDEเหมาะกับจุดเด่น
VS Codeทุกคนฟรี เบา Extension เยอะที่สุด ตัวอย่างในคอร์สใช้ตัวนี้
Cursorอยากให้ AI ช่วยเขียนสร้างบน VS Code ใช้ Extension และคีย์ลัดเดียวกัน มีแชต AI ในตัว
Orcaใช้ AI agent หลายตัวพร้อมกันรัน Claude Code, Codex ฯลฯ คู่กัน แต่ละตัวทำงานใน worktree ของตัวเอง

มือใหม่เริ่มที่ VS CodeOrca ไม่มี AI มาในตัว มันเป็นที่รวม agent ที่คุณติดตั้งเองบนเครื่อง (เช่น Claude Code) ถ้าเพิ่งเริ่ม ให้ใช้ VS Code หรือ Cursor ก่อน

Installation

  1. ดาวน์โหลด

    ไปที่ code.visualstudio.com/download แล้วเลือกระบบของคุณ

  2. ติดตั้ง

    Windows: กด Next ไปเรื่อย ๆ และติ๊ก Add to PATH กับ Open with Code เพื่อให้ใช้คำสั่ง code ได้

    macOS: แตกไฟล์ zip แล้วลาก Visual Studio Code.app ไปไว้ใน Applications

  3. หรือติดตั้งผ่าน Terminal

    # Windows (PowerShell)
winget install -e --id Microsoft.VisualStudioCode

# macOS (Homebrew)
brew install --cask visual-studio-code

เปิดโค้ดให้เห็น

เวลาทำงานเราเปิด ทั้งโฟลเดอร์ ไม่ใช่ไฟล์เดียว เพื่อให้ IDE เห็นไฟล์ทั้งหมดในโปรเจกต์

ผ่านเมนู

เปิด IDE แล้วไปที่ File → Open Folder… เลือกโฟลเดอร์ ไฟล์ทั้งหมดจะขึ้นใน Explorer ด้านซ้าย

ผ่าน Terminal

cd Desktop/my-first-portfolio   # เข้าไปในโฟลเดอร์
code .                          # เปิดโฟลเดอร์นี้ใน VS Code
cursor .                        # หรือเปิดใน Cursor

ขึ้นว่า command not found: code ?macOS: เปิด VS Code กด Cmd+Shift+P พิมพ์ “Shell Command: Install 'code' command in PATH” แล้วเปิด Terminal ใหม่ Windows: ติดตั้ง VS Code ใหม่แล้วติ๊ก Add to PATH

คำสั่ง Terminal ที่ใช้บ่อย

คำสั่งทำอะไร
pwdบอกว่าตอนนี้อยู่โฟลเดอร์ไหน
lsดูไฟล์ในโฟลเดอร์ (CMD เก่าใช้ dir)
cd ชื่อโฟลเดอร์เข้าไปในโฟลเดอร์
cd ..ถอยออกมา 1 ชั้น
mkdir ชื่อสร้างโฟลเดอร์ใหม่
clearล้างหน้าจอ Terminal
Ctrl+Cหยุดโปรแกรมที่กำลังรัน เช่น npm run dev

คีย์ลัดที่ควรจำ

WindowsmacOSทำอะไร
Ctrl + ` (ปุ่มใต้ Esc)Ctrl + `เปิด/ปิด Terminal ใน IDE
Ctrl+PCmd+Pค้นหาไฟล์ด้วยชื่อ
Ctrl+Shift+PCmd+Shift+PCommand Palette: ค้นหาทุกคำสั่งของ IDE
Ctrl+SCmd+Sบันทึกไฟล์
Ctrl+/Cmd+/คอมเมนต์ / เลิกคอมเมนต์บรรทัด
Shift+Alt+FShift+Option+Fจัดรูปแบบโค้ด (Format)

Extension หลัก

กด Ctrl+Shift+X ค้นหาชื่อแล้วกด Install ใช้ได้ทั้ง VS Code และ Cursor

Extensionใช้ในทำอะไร
Live ServerDay 1เปิดหน้า HTML ในเบราว์เซอร์ และรีเฟรชเองทุกครั้งที่เซฟ
Prettierทุกวันจัดรูปแบบโค้ดให้อัตโนมัติ
Auto Rename TagDay 1แก้แท็กเปิด HTML แล้วแท็กปิดเปลี่ยนตาม
ES7+ React snippetsDay 2พิมพ์ rafce แล้วได้ React component ทันที
Tailwind CSS IntelliSenseDay 2เติมคำและพรีวิวสีของคลาส Tailwind
ESLintDay 2–3เตือนโค้ดที่น่าจะผิดก่อนรัน
GitLensDay 3ดูว่าใครแก้บรรทัดไหน เมื่อไร
Thunder ClientDay 3ทดสอบ API แบบ Postman ใน IDE

ติดตั้งทั้งหมดในครั้งเดียว:

code --install-extension ritwickdey.LiveServer
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension rangav.vscode-thunder-client

จัดโค้ดทุกครั้งที่เซฟ

กด Ctrl+Shift+P → “Preferences: Open User Settings (JSON)” แล้วเพิ่ม

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

ฝึกต่อ

เว็บสำหรับลงมือทำ

เอกสาร · code.visualstudio.comVS Code: Getting started ทัวร์ทางการ 10 นาทีเอกสาร · docs.cursor.comCursor Docs แชต AI, Tab และ Agentเอกสาร · github.comOrca on GitHub วิธีติดตั้งและฟีเจอร์ทั้งหมดลงมือทำ · code.visualstudio.comคีย์ลัด VS Code (PDF) ปริ้นต์แปะข้างจอ

วิดีโอเรียนเอง

วิดีโอ · youtube.comVS Code in 100 Seconds Fireship · 2 นาทีวิดีโอ · youtube.comค้นคลิปภาษาไทย: สอนใช้ VS Code

Next steps

CS ChallengeLast updated Oct 2026