【คู่มือ VSCode สำหรับมือใหม่】Visual Studio Code คืออะไร? อธิบายครบทุกขั้นตอนตั้งแต่การติดตั้งจนถึงการตั้งค่าพื้นฐาน

“อยากเริ่มทำเว็บหรือเขียนโปรแกรม แต่ไม่รู้จะใช้ Editor ตัวไหนดี?”

สวัสดีครับ! ผมเป็นคนเขียนบทความนี้ ซึ่งเมื่อไม่กี่เดือนก่อนยังไม่มีความรู้ด้านโปรแกรมมิ่งเลยเหมือนกับทุกๆ คน แต่ตอนนี้ ด้วยความช่วยเหลือของ AI ผมสามารถสร้างเว็บไซต์อย่าง buyonjapan.com และ copicode.com ได้ด้วยตัวเองแล้วครับ

และคงไม่เกินจริงที่จะกล่าวว่า ผู้มีคุณูปการสูงสุดก็คือ Editor ที่เราจะมาแนะนำกันในวันนี้ นั่นคือ “Visual Studio Code” (ซึ่งต่อไปนี้จะเรียกว่า VSCode) ครับ

ในบทความนี้ ผมจะใช้ประสบการณ์ตรงจาก “จุดที่เคยติดขัด” และ “ความเสียดายที่ว่าทำไมไม่รู้ให้เร็วกว่านี้” มาอธิบายทุกอย่างแบบละเอียดที่สุด โดยจะพยายามไม่ใช้ศัพท์เทคนิค และเขียนในมุมมองที่เหมือนกับกำลังสอนตัวเองในสมัยที่ยังเป็นมือใหม่ ตั้งแต่การติดตั้ง VSCode ไปจนถึงการตั้งค่าเริ่มต้นที่ “ต้องทำเท่านั้น!”

เมื่ออ่านบทความนี้จบ คุณจะไม่เพียงแค่ติดตั้ง VSCode เป็น แต่ยังจะได้สภาพแวดล้อมการพัฒนาที่สะดวกสบาย และพร้อมที่จะก้าวแรกไปสู่ความสนุกของการ “เขียนโค้ดและทำให้มันทำงานด้วยตัวเอง” อย่างแน่นอนครับ

Visual Studio Code (VSCode) คืออะไรกันแน่?

VSCode คือ “Text Editor” ที่พัฒนาโดย Microsoft และให้บริการฟรีครับ Text Editor ก็คือโปรแกรมสำหรับเขียนและแก้ไขข้อความ (Text) ตามชื่อของมันเลย ลองนึกภาพว่าเป็นโปรแกรม “Notepad” ของ Windows หรือ “TextEdit” ของ Mac ในเวอร์ชันที่เทพสุดๆ ก็ได้ครับ

ในโลกนี้มี Editor อยู่มากมาย แต่ทำไมนักพัฒนาทั่วโลกถึงเลือกใช้ VSCode? จากที่ผมได้สัมผัสมา ข้อดีที่เด่นชัดที่สุดมี 3 ข้อนี้ครับ

ฟรีแต่ทรงพลังสุดๆ: การที่ฟังก์ชันครบครันขนาดนี้ถูกปล่อยให้ใช้ฟรีทั้งหมดเป็นอะไรที่น่าทึ่งมากครับ แสดงให้เห็นถึงความจริงจังของ Microsoft เลยทีเดียว
ทำงานได้รวดเร็ว: ถึงแม้จะมีฟังก์ชันเยอะ แต่การเปิดโปรแกรมและการทำงานต่างๆ กลับลื่นไหลและรวดเร็วมาก เป็นจุดที่ดีใจมากที่สามารถใช้บนคอมพิวเตอร์เครื่องเก่าได้อย่างไม่รู้สึกหงุดหงิด
ปรับแต่งได้ตามใจชอบด้วย “ส่วนขยาย” (Extensions): นี่คือเสน่ห์ที่ยิ่งใหญ่ที่สุดของ VSCode ครับ เดี๋ยวผมจะอธิบายละเอียดอีกที แต่เราสามารถติดตั้งฟังก์ชันเสริม (ส่วนขยาย) ที่นักพัฒนาทั่วโลกสร้างขึ้นมา เพื่อปั้นให้มันกลายเป็นเครื่องมือพัฒนาที่แข็งแกร่งที่สุดในแบบฉบับของเราเองได้

มีโปรแกรมอีกตัวที่ชื่อคล้ายกันคือ “Visual Studio” แต่ตัวนั้นเป็นคนละประเภทกันครับ มันคือ “Integrated Development Environment (IDE)” สำหรับการพัฒนาโปรแกรมขนาดใหญ่ ซึ่งจะซับซ้อนและหนักเครื่องกว่า สำหรับก้าวแรกในการทำเว็บ การเลือกใช้ VSCode ที่เบาและใช้ง่ายนั้นไม่ผิดพลาดแน่นอนครับ

【ลงมือทำ】มาติดตั้ง VSCode กันเถอะ

เอาล่ะครับ เรามาเริ่มติดตั้ง VSCode ลงบนคอมพิวเตอร์ของคุณกันเลย ขั้นตอนง่ายมากๆ ครับ

ก่อนอื่น ให้เข้าไปที่ เว็บไซต์ทางการของ VSCode

เมื่อเข้าไปแล้ว เว็บไซต์จะตรวจสอบระบบปฏิบัติการ (OS) ของคุณ (Windows, Mac, Linux) โดยอัตโนมัติ และแสดงปุ่มดาวน์โหลดที่เหมาะสมที่สุดให้เห็นอย่างเด่นชัด โดยทั่วไปแล้ว แค่คลิกปุ่มนั้นเพื่อดาวน์โหลดตัวติดตั้ง แล้วทำตามคำแนะนำบนหน้าจอก็เป็นอันเรียบร้อยครับ

ภาพหน้าจอเว็บไซต์ทางการของ VSCode ซึ่งแสดงปุ่มดาวน์โหลดอย่างเด่นชัด

*ดีไซน์ของเว็บไซต์ทางการอาจมีการเปลี่ยนแปลงได้

สำหรับผู้ใช้งาน Windows

ให้รันไฟล์ .exe ที่ดาวน์โหลดมา ระหว่างการติดตั้ง จะมีช่องให้ติ๊กเลือกหลายข้อ ถ้าไม่มีความต้องการพิเศษอะไร แนะนำให้ติ๊กเลือกหัวข้อต่อไปนี้ไว้ครับ

“Add to PATH”: ข้อนี้ต้องติ๊กเลยครับ การติ๊กข้อนี้จะทำให้เราสามารถเรียกใช้ VSCode จาก Command Prompt หรือ Terminal ด้วยคำสั่ง code ได้ ซึ่งสะดวกมากๆ ในภายหลัง
“Add 'Open with Code' action to Windows Explorer file context menu”
“Add 'Open with Code' action to Windows Explorer directory context menu”

การติ๊กสองข้อสุดท้ายจะทำให้มีตัวเลือก “Open with Code” แสดงขึ้นมาเมื่อเราคลิกขวาที่ไฟล์หรือโฟลเดอร์ ซึ่งเป็นฟีเจอร์เล็กๆ ที่ช่วยเพิ่มประสิทธิภาพการทำงานได้อย่างแน่นอนครับ

นอกจากนี้ หากคุณใช้ Windows 10/11 เวอร์ชันล่าสุด ก็สามารถติดตั้งผ่านคำสั่ง “winget” ได้เช่นกัน เพียงแค่เปิด Command Prompt หรือ PowerShell แล้วพิมพ์คำสั่งด้านล่างนี้เข้าไปครับ

winget install Microsoft.VisualStudioCode

สำหรับผู้ใช้งาน Mac

เมื่อแตกไฟล์ .zip ที่ดาวน์โหลดมา จะได้ไฟล์ชื่อ Visual Studio Code.app ออกมา ให้ลากไฟล์นี้ไปวางไว้ในโฟลเดอร์ “Applications” ก็เป็นอันเสร็จสิ้นการติดตั้งครับ

สำหรับผู้ใช้ Mac ผมก็ขอแนะนำให้ติดตั้งผ่านเครื่องมือ Command Line ที่ชื่อว่า “Homebrew” เช่นกันครับ เพียงเปิด Terminal แล้วรันคำสั่งด้านล่างนี้

brew install --cask visual-studio-code

สำหรับผู้ใช้งาน Linux

ให้ดาวน์โหลดแพ็กเกจ .deb (สำหรับ Debian/Ubuntu) หรือ .rpm (สำหรับ Red Hat/Fedora/SUSE) ที่ตรงกับ Distribution ของคุณจากเว็บไซต์ทางการแล้วทำการติดตั้ง นอกจากนี้ยังสามารถติดตั้งจาก Software Center ของหลายๆ Distribution ได้เช่นกัน

ตัวอย่างเช่น หากใช้ Ubuntu ก็สามารถใช้คำสั่งต่อไปนี้ใน Terminal ได้ครับ

sudo apt install code

【สำคัญที่สุด】การตั้งค่าเริ่มต้นที่ต้องทำ!

เมื่อติดตั้งเสร็จเรียบร้อย ก็มาถึงขั้นตอนการตั้งค่าแล้วครับ ซึ่งเป็นส่วนที่สำคัญที่สุด ผมได้คัดเลือกการตั้งค่าที่ทำให้ผมเสียดายว่า “น่าจะทำเร็วกว่านี้” มาให้แล้ว แค่ทำตามนี้ ประสบการณ์การพัฒนาของคุณจะเปลี่ยนไปราวฟ้ากับเหวเลยครับ

ขั้นตอนที่ 1: เปลี่ยนเป็นภาษาไทยก่อนเลย!

ในตอนแรก VSCode จะเป็นภาษาอังกฤษ ซึ่งก็ใช้งานได้ แต่ข้อความแจ้งเตือนข้อผิดพลาดหรือเมนูตั้งค่าต่างๆ ที่เป็นภาษาอังกฤษอาจทำให้เราเหนื่อยได้ง่ายๆ โดยเฉพาะสำหรับมือใหม่ เรามาเปลี่ยนเป็นภาษาไทยเพื่อลดกำแพงทางใจกันก่อนดีกว่าครับ

คลิกที่ไอคอนรูปสี่เหลี่ยม 4 อันเรียงกันที่แถบเมนูด้านซ้าย (มุมมองส่วนขยาย)
ในช่องค้นหาด้านบน พิมพ์คำว่า “thai”
คลิกปุ่ม “Install” ที่รายการ “Thai Language Pack for Visual Studio Code” ซึ่งจะปรากฏขึ้นมาเป็นอันแรก
เมื่อติดตั้งเสร็จ จะมีข้อความแจ้งให้รีสตาร์ทโปรแกรมปรากฏขึ้นที่มุมขวาล่าง ให้คลิก “Restart”

เพียงเท่านี้ เมนูทั้งหมดใน VSCode ก็จะเปลี่ยนเป็นภาษาไทยแล้วครับ ง่ายใช่ไหมล่ะ!

ขั้นตอนที่ 2: เปิดไฟล์ตั้งค่า (`settings.json`)

การตั้งค่าโดยละเอียดของ VSCode จะทำผ่านการเขียนลงในไฟล์พิเศษที่ชื่อว่า settings.json ครับ แม้จะตั้งค่าผ่าน UI (หน้าจอการตั้งค่า) ได้ แต่การฝึกเขียนลงในไฟล์นี้โดยตรงจะทำให้การจัดการและแชร์การตั้งค่าในอนาคตสะดวกขึ้นมาก

วิธีที่เร็วที่สุดในการเปิด settings.json คือการใช้คีย์ลัดครับ

Windows: Ctrl + Shift + P
Mac: Command + Shift + P

เมื่อกดคีย์ดังกล่าว จะมีช่องสำหรับป้อนคำสั่งที่เรียกว่า “Command Palette” ปรากฏขึ้นที่ด้านบนของหน้าจอ ให้พิมพ์ “settings json” ลงไป แล้วเลือก “Preferences: Open User Settings (JSON)”

จากนั้น ไฟล์ว่างๆ (หรืออาจมีข้อความเขียนอยู่เล็กน้อย) ที่ล้อมรอบด้วย {} จะเปิดขึ้นมา นี่คือไฟล์ settings.json ของคุณครับ เราจะคัดลอกและวางการตั้งค่าที่ผมจะแนะนำต่อไปนี้ลงไปในนี้กัน

ขั้นตอนที่ 3: คัดลอกและวางสุดยอดการตั้งค่าเริ่มต้น!

ถึงเวลาแล้วครับ นี่คือการตั้งค่าเริ่มต้นที่ผมได้ลองผิดลองถูกจนค้นพบว่า “แค่ใส่ชุดนี้ไว้ก็ไม่ผิดหวัง” ให้คัดลอกโค้ดด้านล่างนี้ไปวางไว้ใน {} ของไฟล์ settings.json ที่เปิดไว้เมื่อสักครู่ได้เลยครับ

(หากมีข้อความตั้งค่าเดิมอยู่แล้ว ให้ใส่เครื่องหมายจุลภาค , ไว้หน้าเครื่องหมาย } ตัวสุดท้ายก่อน แล้วจึงวางโค้ดลงไปครับ เนื่องจากในรูปแบบ JSON จะต้องใช้จุลภาคคั่นระหว่างแต่ละรายการตั้งค่า)

{
    // ----- การตั้งค่าเกี่ยวกับหน้าตา (Appearance) -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- การตั้งค่าเกี่ยวกับการจัดการไฟล์ -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- การตั้งค่าการทำงานของ Editor -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- การตั้งค่าสำหรับส่วนขยาย "Prettier" -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- การตั้งค่าเกี่ยวกับ Terminal -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

คำอธิบายการตั้งค่าแบบย่อ

ไม่จำเป็นต้องจำทั้งหมดในครั้งเดียวครับ แค่อ่านผ่านๆ เพื่อให้รู้ว่า “อ๋อ มันทำแบบนี้ได้ด้วย” ก็พอ

editor.fontFamily: กำหนดฟอนต์ที่แนะนำสำหรับการเขียนโปรแกรม ฟอนต์ที่อ่านง่ายจะช่วยเพิ่มความสามารถในการอ่านโค้ดและทำให้หาบั๊กเจอง่ายขึ้น (อาจต้องติดตั้งฟอนต์เพิ่มเติม)
editor.fontSize: ขนาดตัวอักษร ปรับได้ตามความชอบ
editor.lineHeight: ความสูงของบรรทัด การเว้นวรรคให้กว้างขึ้นเล็กน้อยจะช่วยให้อ่านโค้ดง่ายขึ้น
editor.wordWrap: ทำให้บรรทัดที่ยาวเกินไปตัดขึ้นบรรทัดใหม่ที่ขอบจอ ซึ่งจำเป็นมากเพราะจะทำให้ไม่ต้องเลื่อนจอไปด้านข้าง
files.autoSave: บันทึกไฟล์โดยอัตโนมัติเมื่อเราสลับไปหน้าต่างอื่น ช่วยป้องกันการลืมกด Ctrl+S/Cmd+S ได้ดีมาก อันนี้สะดวกจริงๆ!
files.insertFinalNewline, files.trim...: ช่วยเพิ่มบรรทัดว่างท้ายไฟล์และลบช่องว่างที่ไม่จำเป็นท้ายบรรทัดออกโดยอัตโนมัติเมื่อบันทึก เป็นการตั้งค่าเพื่อรักษาความสะอาดของโค้ด
editor.tabSize: จำนวนช่องว่างเมื่อกดปุ่ม Tab ในการพัฒนาเว็บ ส่วนใหญ่จะใช้ 2
editor.renderWhitespace: แสดงสัญลักษณ์แทนช่องว่างและแท็บ ช่วยให้สังเกตเห็นข้อผิดพลาดอย่างการเว้นวรรคเกินหรือมีช่องว่างขนาดเต็มปนเข้ามาได้ทันที
editor.minimap.enabled: ปิดการแสดงแผนที่โค้ดทั้งหมด (minimap) ที่ด้านขวา ทำให้หน้าจอดูสะอาดตาขึ้น
editor.bracketPairColorization.enabled: ทำให้วงเล็บคู่กันอย่าง (), {}, [] มีสีเดียวกัน ช่วยให้มองเห็นได้ทันทีว่าวงเล็บไหนคู่กับวงเล็บไหนเมื่อมีโครงสร้างซ้อนกันลึกๆ
editor.defaultFormatter, editor.formatOnSave: นี่คือการตั้งค่าระดับเทพ! มันจะทำงานร่วมกับส่วนขยาย “Prettier” ที่จะกล่าวถึงต่อไป เพื่อจัดรูปแบบโค้ดทั้งหมดตามกฎที่กำหนดไว้โดยอัตโนมัติทุกครั้งที่บันทึกไฟล์ เราจะไม่ต้องมานั่งกังวลเรื่องการย่อหน้า (indent) อีกต่อไป

【คัดสรรมาอย่างดี】ส่วนขยายที่ต้องติดตั้ง!

เมื่อตั้งค่าเริ่มต้นเสร็จแล้ว ต่อไปก็คือส่วนขยายครับ คุณค่าที่แท้จริงของ VSCode อยู่ที่นี่ มีให้เลือกเยอะมากจนอาจจะสับสน แต่สำหรับมือใหม่ แค่ 3 ตัวนี้ก็เพียงพอแล้วครับ

เช่นเดียวกับการเปลี่ยนภาษา ให้ค้นหาชื่อจากมุมมองส่วนขยายด้านซ้ายแล้วติดตั้งได้เลยครับ

Prettier - Code formatter
นี่คือ “เครื่องมือจัดรูปแบบโค้ด” ที่กล่าวถึงในการตั้งค่าเมื่อสักครู่ ถ้าไม่ติดตั้งตัวนี้ การตั้งค่า formatOnSave จะไม่ทำงาน มันจะช่วยจัดรูปแบบโค้ดของภาษาต่างๆ เช่น HTML, CSS, JavaScript ให้สวยงามตามมาตรฐานสากลได้ในพริบตา ช่วยให้คุณหลุดพ้นจากความกังวลเล็กๆ น้อยๆ อย่าง “ย่อหน้านี้ใช้แท็บหรือสเปซ?” หรือ “ต้องใส่ ; ไหม?” และทำให้คุณมีสมาธิกับตรรกะของโค้ดได้อย่างเต็มที่
Live Server
เป็นส่วนขยายที่จะปฏิวัติการเขียนโค้ด HTML/CSS ของคุณ เมื่อเปิดใช้งาน มันจะรีโหลดหน้าเว็บในเบราว์เซอร์ให้โดยอัตโนมัติทันทีที่คุณบันทึกไฟล์ ทำให้ไม่ต้องเสียเวลาทำขั้นตอนยุ่งยากอย่าง “แก้ไขโค้ด → บันทึก → สลับไปเบราว์เซอร์ → คลิกปุ่มรีเฟรช” อีกต่อไป ช่วยเพิ่มประสิทธิภาพการพัฒนาได้อย่างก้าวกระโดด ต้องติดตั้งเลยครับ
Material Icon Theme
ตัวนี้ไม่ใช่ส่วนขยายเชิงฟังก์ชัน แต่เป็นส่วนขยายเพื่อความสวยงามครับ มันจะแสดงไอคอนสวยๆ ข้างชื่อไฟล์ใน Explorer ตามประเภทของไฟล์ (HTML, CSS, JS, etc.) ทำให้แยกแยะประเภทไฟล์ได้ง่ายขึ้นด้วยสายตา และช่วยให้หาไฟล์ที่ต้องการได้ง่ายขึ้นเล็กน้อย แถมยังช่วยสร้างแรงบันดาลใจได้ด้วยนะ

*เนื่องจากเราตั้งค่า "workbench.iconTheme": "material-icon-theme" ใน settings.json ไว้แล้ว แค่ติดตั้งส่วนขยายนี้ ไอคอนก็จะถูกนำไปใช้โดยอัตโนมัติครับ

【ลองสัมผัส】มาทำให้มัน 'ทำงาน' กันเถอะ!

お疲れ様でした！これであなたのVSCodeは、プロも顔負けの開発環境になりました。最後に、この新しい環境を使って「動く」を体験してみましょう。

เปิดโฟลเดอร์ทำงาน
ก่อนอื่น ให้สร้างโฟลเดอร์ใหม่ในที่ที่หาง่าย เช่น บนเดสก์ท็อป แล้วตั้งชื่อว่า “vscode-test” จากนั้นไปที่เมนู “File” → “Open Folder...” ใน VSCode แล้วเลือกเปิดโฟลเดอร์ที่เราเพิ่งสร้าง
สร้างไฟล์
ที่มุมมอง Explorer ด้านซ้าย ให้เลื่อนเคอร์เซอร์ไปที่ชื่อโฟลเดอร์ จะมีไอคอน “New File” ปรากฏขึ้นมา ให้คลิกแล้วสร้างไฟล์ชื่อ “index.html”
คัดลอกและวางโค้ด
คัดลอกและวางโค้ดด้านล่างนี้ลงในไฟล์ index.html ที่สร้างไว้

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ทดสอบ VSCode</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>สวัสดี, VSCode!</h1>
  <p>ยินดีต้อนรับสู่สภาพแวดล้อมการพัฒนาของฉัน!</p>
  
</body>
</html>

เปิดใช้งาน Live Server
ที่มุมขวาล่างของหน้าจอ ควรจะมีปุ่ม “Go Live” อยู่ ให้คลิกที่ปุ่มนั้นครับ

เป็นอย่างไรบ้างครับ? เบราว์เซอร์ควรจะเปิดขึ้นมาโดยอัตโนมัติพร้อมกับแสดงหน้าเว็บ HTML ที่เราเพิ่งสร้าง!

ลองกลับไปที่ VSCode แล้วแก้ไขเนื้อหาในแท็ก h1 เป็น “Hello, World!” แล้วบันทึกไฟล์ (Ctrl+S / Cmd+S) ดูสิครับ คุณเห็นไหมว่าหน้าเว็บในเบราว์เซอร์เปลี่ยนไปทันทีโดยที่เราไม่ต้องสลับหน้าจอไปกดรีเฟรชเลย?

นี่แหละคือพลังของ “Live Server” และพลังของสภาพแวดล้อมการพัฒนาใหม่ที่คุณได้มาครอบครอง

สรุป: ถึงคุณที่ได้ครอบครองอาวุธสุดแกร่ง

ในครั้งนี้ เราได้อธิบายทุกอย่างตั้งแต่การติดตั้ง VSCode, การตั้งค่าเริ่มต้นที่ผมขอแนะนำจากใจจริง ไปจนถึงการได้สัมผัสประสบการณ์ที่ “โค้ดทำงานได้จริง”

เนื้อหาที่เราตั้งค่ากันในวันนี้ จะเป็นรากฐานที่แข็งแกร่งสำหรับการเรียนรู้การทำเว็บและการเขียนโปรแกรมของคุณในอนาคต ในตอนแรกอาจจะรู้สึกว่ามีเรื่องให้จำเยอะและยาก แต่การตั้งค่าและส่วนขยายที่แนะนำในวันนี้ล้วนเป็นสิ่งที่ช่วยทำงาน “ที่น่าเบื่อ” ให้เป็นอัตโนมัติ และช่วยให้คุณสามารถมีสมาธิกับ “การคิด” และ “การสร้างสรรค์” ได้อย่างเต็มที่

ในเมื่อคุณได้ครอบครองอาวุธสุดแกร่งที่ชื่อว่า VSCode แล้ว คุณก็ไม่ใช่แค่มือใหม่อีกต่อไป แต่เป็น “นักพัฒนา” คนหนึ่งแล้ว ขอให้คุณใช้สภาพแวดล้อมที่สะดวกสบายนี้เขียนโค้ดและสร้างสรรค์ผลงานออกมาเยอะๆ นะครับ!

ไปยังขั้นตอนต่อไป

เมื่อเตรียม Editor พร้อมแล้ว ขั้นตอนต่อไปคือการทำความคุ้นเคยกับการใช้งานหน้าจอพื้นฐานของ VSCode การเรียนรู้วิธีจัดการไฟล์และโฟลเดอร์อย่างมีประสิทธิภาพจะช่วยให้ความเร็วในการพัฒนาของคุณเพิ่มขึ้นไปอีกขั้น

【วิธีใช้ VSCode】คู่มือการใช้งานพื้นฐาน: การจัดการไฟล์, Explorer, และการใช้แท็บ