1. การติดตั้ง Visual Studio Code

1.1 การดาวน์โหลดโปรแกรม

1. เปิดเบราว์เซอร์และเข้าไปที่เว็บไซต์ https://code.visualstudio.com/
2. คลิกที่ปุ่ม Download เพื่อดาวน์โหลดโปรแกรม Visual Studio Code ให้ตรงกับระบบปฏิบัติการที่คุณใช้งาน (เช่น Windows, macOS, หรือ Linux)

1.2 การติดตั้ง VS Code บนระบบปฏิบัติการต่างๆ

• บน Windows
  1. เปิดไฟล์ติดตั้ง .exe ที่ดาวน์โหลดมา
  2. ทำตามขั้นตอนบนหน้าจอเพื่อติดตั้งโปรแกรม
  3. ติ๊กเลือก Add to PATH และ Create a desktop icon ในระหว่างขั้นตอนการติดตั้งเพื่อความสะดวก
  4. คลิก Finish เมื่อการติดตั้งเสร็จสิ้น
• บน macOS
  1. เปิดไฟล์ .zip ที่ดาวน์โหลดมา
  2. ลากไอคอน Visual Studio Code ไปไว้ใน Applications
  3. เปิดโปรแกรมจาก Applications
• บน Linux
  1. ติดตั้งผ่านไฟล์ .deb หรือ .rpm ที่ดาวน์โหลดมา หรือใช้คำสั่ง Terminal ดังนี้ (กรณี Ubuntu):

sudo apt update
sudo apt install code

หลังจากติดตั้งเสร็จสิ้น คุณสามารถเปิด VS Code จากไอคอนหรือเปิดผ่านคำสั่ง code ใน Terminal ได้ (หากเพิ่ม PATH ในขั้นตอนการติดตั้ง)

2. การตั้งค่าและใช้งานพื้นฐานใน VS Code

2.1 การตั้งค่าโฟลเดอร์โปรเจกต์

1. เปิดโปรแกรม VS Code
2. ไปที่ File > Open Folder… เพื่อเลือกโฟลเดอร์ที่คุณต้องการเปิดเป็นโปรเจกต์
3. VS Code จะโหลดไฟล์และโฟลเดอร์ทั้งหมดในโฟลเดอร์ที่เลือกไว้ในแถบด้านซ้าย

2.2 การติดตั้งส่วนขยาย (Extensions)

VS Code รองรับการติดตั้งส่วนขยายที่ช่วยเพิ่มความสามารถให้กับโปรแกรม เช่น ส่วนขยายสำหรับรองรับภาษา PHP, Python หรือเครื่องมือเช่น Git, Docker

ตัวอย่างการติดตั้งส่วนขยาย

1. คลิกที่ไอคอน Extensions ในแถบด้านซ้าย (หรือกด Ctrl+Shift+X)
2. ค้นหาชื่อส่วนขยาย เช่น PHP หรือ Python
3. คลิก Install เพื่อติดตั้งส่วนขยายที่ต้องการ

3. ฟีเจอร์หลักของ Visual Studio Code

3.1 IntelliSense

IntelliSense เป็นฟีเจอร์ที่ช่วยให้การเขียนโค้ดเป็นไปอย่างรวดเร็ว ด้วยคำแนะนำอัตโนมัติสำหรับคำสั่ง ฟังก์ชัน และโครงสร้างที่สอดคล้องกัน

ตัวอย่างการใช้งาน IntelliSense เมื่อพิมพ์คำบางคำในโค้ด VS Code จะแนะนำคำที่เกี่ยวข้องให้โดยอัตโนมัติ เช่น

javascriptคัดลอกโค้ด// เมื่อพิมพ์คำว่า "con" VS Code อาจแนะนำคำสั่ง console.log()
console.log("Hello World");

3.2 การดีบักโค้ด (Debugging)

VS Code รองรับการดีบักโค้ดในภาษาโปรแกรมหลายภาษา เช่น Node.js, Python, C++ ซึ่งช่วยในการตรวจสอบข้อผิดพลาดในโค้ดได้อย่างง่ายดาย

การดีบักใน Node.js

1. เปิดไฟล์ JavaScript
2. ไปที่แถบ Run and Debug ในแถบด้านซ้าย (หรือกด F5)
3. เลือกการตั้งค่าดีบักแบบ Node.js
4. เพิ่ม Breakpoint โดยคลิกที่แถบด้านซ้ายของโค้ดที่ต้องการดีบัก
5. กดปุ่มเริ่มดีบัก (Play) โปรแกรมจะหยุดทำงานเมื่อเจอ Breakpoint

3.3 การควบคุมเวอร์ชันด้วย Git

VS Code มีฟีเจอร์ควบคุมเวอร์ชันด้วย Git ที่ช่วยในการทำงานร่วมกับ GitHub หรือ GitLab เพื่อจัดการโค้ดในรูปแบบเวอร์ชันต่างๆ ได้

การเชื่อมต่อกับ Git

1. เปิดโปรเจกต์ที่มี Git repository หรือไปที่ View > Source Control
2. คลิก Initialize Repository หรือเชื่อมต่อกับ Remote Repository
3. สามารถใช้คำสั่ง Git เช่น Commit และ Push ได้จากแถบควบคุม

4. การใช้งาน VS Code ในโปรเจกต์จริง

VS Code มีประโยชน์ในโปรเจกต์พัฒนาซอฟต์แวร์หลายประเภท ไม่ว่าจะเป็นการพัฒนาเว็บแอปพลิเคชัน การเขียนโปรแกรมเชิงวัตถุ การควบคุมเวอร์ชัน หรือการทดสอบโค้ดต่างๆ

ตัวอย่างการใช้งาน VS Code ในโปรเจกต์เว็บแอปพลิเคชัน

1. เปิดโฟลเดอร์โปรเจกต์เว็บ
2. ติดตั้งส่วนขยาย เช่น HTML CSS Support, PHP Intelephense, Live Server
3. เขียนโค้ด HTML, CSS และ JavaScript เพื่อสร้างหน้าเว็บ
4. รัน Live Server เพื่อดูการแสดงผลของหน้าเว็บแบบเรียลไทม์