📌 คู่มือการใช้ VS Code ตั้งแต่เริ่มต้นจนเป็นโปร 🚀
📌 คู่มือการใช้ VS Code ตั้งแต่เริ่มต้นจนเป็นโปร 🚀
🔹 VS Code คืออะไร?
VS Code (Visual Studio Code) เป็น เครื่องมือสำหรับเขียนโค้ด ที่ได้รับความนิยมสูงสุด เพราะมัน เร็ว, ฟรี, และรองรับหลายภาษา เช่น HTML, CSS, JavaScript, Python, PHP, และอีกมากมาย
✅ รองรับการติดตั้งส่วนเสริม (Extensions)
✅ ใช้งานง่าย มี Auto Complete (IntelliSense)
✅ รองรับ Git และ Debugger ในตัว
⸻
1️ ⃣ ติดตั้ง VS Code บนคอมพิวเตอร์
🔹 ดาวน์โหลดและติดตั้ง
📌 ดาวน์โหลดจากเว็บไซต์ทางการ 👉 https://code.visualstudio.com/
✅ รองรับ Windows, macOS และ Linux
🔹 ขั้นตอนติดตั้ง (Windows/Mac)
1. ดาวน์โหลดไฟล์ VS Code จากเว็บ
2. ติดตั้งโปรแกรมโดยทำตามคำแนะนำ (Next > Next > Install)
3. เปิดโปรแกรม VS Code ขึ้นมา
⸻
2️⃣ การตั้งค่าเริ่มต้น VS Code
🔹 เปลี่ยนภาษา VS Code เป็นภาษาไทย
1. กด Ctrl + Shift + X (หรือคลิกเมนู Extensions ด้านซ้าย)
2. ค้นหา “Thai Language Pack for VS Code”
3. กด Install และรีสตาร์ทโปรแกรม
🔹 เปิดโหมด Dark Mode (ธีมสีดำ)
1. ไปที่ File > Preferences > Color Theme
2. เลือก Dark+ (default dark) หรือธีมที่ชอบ
🔹 ตั้งค่า Auto Save (บันทึกอัตโนมัติ)
1. ไปที่ File > Preferences > Settings
2. ค้นหา “Auto Save” และเลือก After Delay
⸻
3️⃣ เริ่มต้นสร ้างโปรเจกต์ใหม่
🔹 สร้างโฟลเดอร์สำหรับโค้ด
1. เปิด VS Code
2. กด File > Open Folder…
3. เลือกโฟลเดอร์ที่ต้องการใช้เก็บโค้ด
🔹 สร้างไฟล์ใหม่
1. กด File > New File หรือกด Ctrl + N
2. พิมพ์โค้ด และกด Ctrl + S เพื่อบันทึก
3. ตั้งชื่อไฟล์ เช่น index.html, style.css หรือ script.js
⸻
4️⃣ เริ่มเขียนโค้ด HTML + CSS + JavaScript
🔹 ตัวอย่างไฟล์ index.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เว็บแรกของฉัน</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>สวัสดี! นี่คือเว็บของฉัน 🚀</h1>
<button onclick="sayHello()">กดปุ่มนี้</button>
<script src="script.js"></script>
</body>
</html>
⸻
🔹 ตัวอย่างไฟล์ style.css
body {
background-color: lightblue;
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: darkgreen;
}
⸻
🔹 ตัวอย่างไฟล์ script.js
function sayHello() {
alert("สวัสดี! ยินดีต้อนรับ 🚀");
}
⸻
5️⃣ เปิดเว็บบน Browser ด้วย Live Server
🔹 ปกติแล้วถ้าเปิด index.html โดยตรง จะไม่รองรับ JavaScript ที่ใช้ fetch() หรือ API ต่าง ๆ
🔹 แนะนำให้ใช้ Live Server เพื่อเปิดเว็บแบบมืออาชีพ
🔹 วิธีติดตั้ง Live Server
1. กด Ctrl + Shift + X แล้วค้นหา “Live Server”
2. กด Install
3. เปิดไฟล์ index.html และคลิกขวา เลือก “Open with Live Server”
✅ หน้าเว็บจะเปิดในเบราว์เซอร์อัตโนมัติ และอัปเดตทันทีเมื่อแก้ไขโค้ด
⸻
6️⃣ ติดตั้งส่วนเสริม (Extensions) ที่ควรรู้
🔹 กด Ctrl + Shift + X เพื่อเปิด Extensions แล้วค้นหา
🔹 กด Install เพื่อติดตั้ง
🔹 แนะนำ Extension สำหรับ HTML + CSS + JavaScript
✅ Live Server → เปิดเว็บแบบอัตโนมัติ
✅ Prettier - Code formatter → จัดโค้ดให้สวยงาม
✅ HTML CSS Support → แสดงคำแนะนำเวลาเขียน CSS
✅ JavaScript (ES6) Snippets → เพิ่ม Auto Complete สำหรับ JavaScript
✅ Auto Rename Tag → ช่วยเปลี่ยนชื่อแท็ก HTML อัตโนมัติ
⸻
7️⃣ ใช้ VS Code กับ Git (เก็บโค้ดบน GitHub)
🔹 Git ช่วยให้บันทึกการเปลี่ยนแปลงโค้ดได้ทุกเวอร์ชัน
🔹 VS Code มี Git ในตัว ไม่ต้องใช้ Terminal
🔹 วิธีใช้ Git ใน VS Code
1. เปิด VS Code และสร้างโปรเจกต์ใหม่
2. กด Ctrl + Shift + G เพื่อเปิด Source Control (Git)
3. กด Initialize Repository
4. กด Commit Changes เพ ื่อบันทึกการเปลี่ยนแปลง
5. ถ้าต้องการอัปโหลดไปที่ GitHub ให้ติดตั้ง GitHub Extension
📌 ถ้าใช้ GitHub ให้สมัครที่ https://github.com/
⸻
8️⃣ ปรับแต่ง VS Code ให้ทำงานเร็วขึ้น
🔹 ปิด Welcome Page
1. ไปที่ File > Preferences > Settings
2. ค้นหา “workbench.startupEditor”
3. เลือก “none”
🔹 ปิด Minimap (แผนที่โค้ดเล็ก ๆ)
1. ไปที่ File > Preferences > Settings
2. ค้นหา “editor.minimap.enabled”
3. ปิดค่า “false”
🔹 ใช้ Snippets ช่วยพิมพ์โค้ดเร็วขึ้น
✅ พิมพ์ html:5 แล้วกด Tab เพื่อสร้างโครงสร้าง HTML อัตโนมัติ
✅ พิมพ์ div แล้วกด Tab เพื่อสร้าง <div></div> ได้เร็ว
⸻
📌 สรุปการใช้งาน VS Code ตั้งแต่เริ่มต้น
✅ ติดตั้ง VS Code จาก https://code.visualstudio.com/
✅ ตั้งค่าภาษา, ธีม, Auto Save เพื่อให้ทำงานง่ายขึ้น
✅ สร้างไฟล์ index.html, style.css, script.js
✅ ใช้ Live Server เพื่อดูผลลัพธ์บนเบราว์เซอร์
✅ ติดตั้ง Extensions ที่ช่วยให้เขียนโค้ดง่ายขึ้น
✅ ใช้ Git และ GitHub เพื่อจัดเก็บและแชร์โค้ด
🔥 ลองเปิด VS Code แล้วสร้างเว็บแรกของคุณได้เลย! 🚀
ถ้าเพิ่งเริ่มใช้ VS Code แล้วงงว่า “ต้องเริ่มตรงไหนก่อน” อันนี้คือเช็กลิสต์ที่ผม/ฉันใช้เวลาตั้งเครื่องใหม่ (เหมาะกับคนค้นหาแนว vs code การใช้งาน, visual studio code คืออะไร, visual studio code วิธีใช้ และ Thai Language Pack) 1) VS Code คืออะไร ต่างจาก Visual Studio ไหม? VS Code (บางคนเรียก v code) คือโปรแกรมแก้ไขโค้ดที่เบาและเร็ว เหมาะกับงานเว็บ, Python, และงานทั่วไป ส่วน Visual Studio จะเป็น IDE ตัวใหญ่ เหมาะกับงาน .NET/Windows และโปรเจกต์ขนาดใหญ่กว่า ถ้าจุดประสงค์คือทำเว็บ/ฝึกเขียนโค้ดเริ่มต้น VS Code ตอบโจทย์สุด 2) ตั้งค่าเริ่มต้นที่ทำให้ใช้งานลื่นขึ้น (แนะนำทำทันที) - เปิด Auto Save: Settings > ค้นหา “Auto Save” เลือก After Delay (ช่วยลดลืมเซฟไฟล์) - ตั้ง Font/ขนาดตัวอักษร: ค้นหา “Font Size” และ “Font Family” เลือกฟอนต์ที่อ่านง่าย เช่น JetBrains Mono / Fira Code (ถ้าชอบ) จะอ่านโค้ดสบายขึ้น - เปิด/ปิด Minimap: ถ้ารู้สึกเครื่องหน่วง ให้ปิด minimap ได้ใน “editor.minimap.enabled” 3) เปลี่ยน VS Code เป็นภาษาไทย (Thai Language Pack) หลายคนหา “thai language pack” แล้วติดตั้ง แต่ลืมขั้นตอนสำคัญ - ไปที่ Extensions (Ctrl+Shift+X) > ค้นหา “Thai Language Pack for VS Code” - Install แล้ว “Restart” โปรแกรม - ถ้ายังไม่เปลี่ยน: กด Ctrl+Shift+P พิมพ์ “Configure Display Language” แล้วเลือกภาษาไทย จากนั้นรีสตาร์ทอีกครั้ง 4) Extensions ที่ควรมีสำหรับมือใหม่ (ติดตั้งเท่าที่จำเป็นก่อน) - Live Server: ใช้เปิดเว็บแบบมีเซิร์ฟเวอร์ ทำให้ทดสอบงานง่าย โดยเฉพาะตอนใช้ fetch()/เรียกไฟล์ - Prettier: จัดรูปแบบโค้ดให้สวยอัตโนมัติ (แนะนำเปิด Format on Save) - Auto Rename Tag: แก้แท็กเปิด/ปิดพร้อมกัน ลดพิมพ์ผิด - HTML CSS Support / JS Snippets: ช่วยแนะนำคำสั่งไวขึ้น ทริค: อย่าติดตั้งเยอะเกินไปตั้งแต่แรก เพราะบางเครื่องจะช้า ให้เริ่มจาก Live Server + Prettier ก่อน 5) ตั้งค่า Prettier แบบใช้งานจริง (กันปัญหาจัดโค้ดไม่ทำงาน) - Settings > ค้นหา “Default Formatter” เลือก Prettier - เปิด “Format On Save” - ถ้าไฟล์ HTML/CSS/JS ยังไม่จัด: ดูมุมขวาล่างว่าเลือกภาษาไฟล์ถูกไหม (เช่น HTML, JavaScript) 6) ใช้ Live Server ให้ถูกวิธี - เปิดโฟลเดอร์โปรเจกต์ก่อน (File > Open Folder) - คลิกขวา index.html > Open with Live Server - ถ้าพอร์ตชน/เปิดไม่ได้: ลองปิด Live Server แล้วเปิดใหม่ หรือรีสตาร์ท VS Code 7) เริ่มใช้ Git ใน VS Code แบบไม่งง - เข้าแท็บ Source Control (Ctrl+Shift+G) > Initialize Repository - เขียนข้อความ commit สั้น ๆ เช่น “add homepage layout” แล้ว Commit - ถ้าจะขึ้น GitHub: ใช้คำสั่ง Publish Branch หรือเชื่อมบัญชี GitHub ใน VS Code ได้เลย 8) ปัญหาที่มือใหม่เจอบ่อย (และวิธีแก้เร็ว) - พิมพ์ไทยในไฟล์แล้วเพี้ยน: ตรวจว่าไฟล์เป็น UTF-8 (มุมขวาล่าง) และตั้งค่า default เป็น UTF-8 - เปิดไฟล์เดี่ยว ๆ แล้ว Live Server หา path ไม่เจอ: ให้เปิดทั้งโฟลเดอร์โปรเจกต์แทน - เครื่องช้า: ปิด Extensions ที่ไม่ใช้, ปิด minimap, และปิด Welcome Page ถ้าทำตามนี้ คุณจะได้ VS Code ที่พร้อมใช้งานจริงในไม่กี่นาที—ตั้งแต่รู้ว่า visual studio code คืออะไร ไปจนถึงตั้งค่าไทยและเริ่มเขียนเว็บ/โค้ดโปรเจกต์แรกได้แบบไม่สะดุด