00: Tools & Environment Setup
เตรียมเครื่องมือให้พร้อม ก่อนเริ่มเขียนโค้ด
1. The Editor: VS Code
เครื่องมือหลักที่จะใช้ในคอร์สนี้คือ Visual Studio Code (VS Code) ซึ่งเป็น Code Editor ที่ได้รับความนิยมเป็นอย่างมากในปัจจุบัน สามารถปรับแต่งได้เยอะมาก
ทำไมต้อง VS Code?
- IntelliSense: ระบบเดาโค้ดอัจฉริยะ ช่วยให้พิมพ์ผิดน้อยลง
- Extensions: มีส่วนเสริมให้เลือกใช้เป็นหมื่นตัว
- Integrated Terminal: พิมพ์คำสั่ง Command Line ได้ในตัว
- Git Control: รองรับการทำงานร่วมกับ Git/GitHub
2. Essential Extensions
เพื่อให้ชีวิตการเขียนโค้ดง่ายขึ้น แนะนำให้ติดตั้งส่วนเสริม (Extensions) ต่อไปนี้:
Live Server
โดย Ritwick Dey
ช่วยจำลอง Web Server บนเครื่องเรา เมื่อกด Save หน้าเว็บจะ Refresh เองอัตโนมัติ (ไม่ต้องกด F5) และจำเป็นมากสำหรับการโหลดไฟล์ Sidebar!
Prettier - Code formatter
โดย Prettier
ช่วยจัดรูปแบบโค้ด (Format) ให้สวยงาม เป็นระเบียบ อ่านง่าย เพียงแค่กด Save
Auto Rename Tag
โดย Jun Han
เมื่อเราแก้ชื่อ Tag เปิด (เช่นเปลี่ยน <div> เป็น <section>) Tag ปิดจะเปลี่ยนตามให้อัตโนมัติ
Material Icon Theme
โดย Philipp Kief
เปลี่ยนไอคอนหน้าไฟล์และโฟลเดอร์ให้สวยงาม แยกประเภทไฟล์ได้ง่ายขึ้นมาก
Indent Rainbow
โดย oderwat
ช่วยระบายสีระยะย่อหน้า (Indentation) ให้เป็นแถบสีรุ้งสลับกัน ทำให้ดูขอบเขต (Scope) ของ Tag HTML และปีกกา {} ใน JS ได้ง่ายขึ้นมาก
Code Spell Checker
โดย Street Side Software
ช่วยตรวจคำผิดในโค้ด เนื่องจากการพิมพ์ชื่อ Class หรือตัวแปรผิดแค่ตัวเดียว ก็ทำให้โปรแกรมไม่ทำงานได้เลย
3. Tips & Tricks
พิมพ์คำย่อ แล้วกด Tab เพื่อขยายเป็นโค้ดเต็ม
| พิมพ์ | ผลลัพธ์ |
|---|---|
! |
โครงสร้าง HTML5 เริ่มต้น |
.container |
<div class="container"></div> |
#header |
<div id="header"></div> |
ul>li*3 |
สร้าง List 3 รายการซ้อนกัน |
p{Hello} |
<p>Hello</p> |
- Copy บรรทัดลงล่าง Shift + Alt + ↓
- ย้ายบรรทัด ขึ้น/ลง Alt + ↑ / ↓
- ลบทั้งบรรทัด Ctrl + Shift + K
- ค้นหาไฟล์ในโปรเจกต์ Ctrl + P
- เปิด/ปิด Sidebar Ctrl + B
- Format Document Shift + Alt + F