VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด
ติดตั้งส่วนขยายสำคัญ ใช้คำย่อ Emmet เพื่อเขียน HTML และ CSS ได้ทันที และเรียนรู้แป้นพิมพ์ลัดที่ช่วยให้แก้ไขได้เร็วขึ้น
VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงใช้ VSCode
Visual Studio Code เป็นตัวแก้ไขโค้ดที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาส่วนหน้า ใช้งานได้ฟรี เป็นโอเพนซอร์ส รวดเร็ว และมีระบบนิเวศส่วนขยายขนาดใหญ่ ทีมพัฒนาส่วนหน้าส่วนใหญ่ใช้โปรแกรมนี้เป็นมาตรฐาน
ส่วนขยายที่จำเป็น
ส่วนขยายที่จำเป็นสำหรับการพัฒนาส่วนหน้า ได้แก่ ESLint (ตรวจสอบโค้ดในบรรทัด), Prettier (จัดรูปแบบอัตโนมัติ), GitLens (แสดงข้อมูล git blame ในบรรทัด), Path Intellisense (เติมเส้นทางไฟล์อัตโนมัติ) และ Auto Rename Tag (เปลี่ยนชื่อแท็ก HTML ที่จับคู่กัน)
ส่วนขยายเฉพาะภาษา
สำหรับ TypeScript: TypeScript and JavaScript Language Features (มีมาให้ในตัว) สำหรับ React: ES7+ React/Redux snippets สำหรับ Vue: Volar (อย่างเป็นทางการ) สำหรับ Tailwind: Tailwind CSS IntelliSense
Emmet คืออะไร
Emmet มีมาให้ใน VSCode พิมพ์คำย่อแล้วกด Tab เพื่อขยายเป็น HTML หรือ CSS แบบเต็ม ช่วยให้การเขียนมาร์กอัปเร็วขึ้นอย่างมาก
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>คำย่อ Emmet ที่ใช้บ่อย
เรียนรู้ทางลัด Emmet เหล่านี้: ! → โครงร่าง HTML พื้นฐาน, div.container → div ที่มีคลาส, ul>li*5 → รายการที่มี 5 รายการ, input:email → ช่องป้อนอีเมล, form:post → ฟอร์มที่ใช้เมธอดเป็น post
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>แป้นพิมพ์ลัดที่จำเป็น
แป้นพิมพ์ลัดที่ช่วยประหยัดเวลามากที่สุด ได้แก่ Ctrl/Cmd+P (เปิดไฟล์อย่างรวดเร็ว), Ctrl/Cmd+Shift+P (ชุดคำสั่ง), Alt+Click (เคอร์เซอร์หลายตำแหน่ง), Ctrl/Cmd+D (เลือกส่วนที่ปรากฏถัดไป) และ Ctrl/Cmd+/ (เปิดหรือปิดหมายเหตุ)
การแก้ไขด้วยเคอร์เซอร์หลายตำแหน่ง
Alt+Click เพิ่มเคอร์เซอร์ Ctrl+Alt+Up/Down เพิ่มเคอร์เซอร์ด้านบนหรือด้านล่าง Ctrl+D เลือกส่วนที่ปรากฏถัดไปจากส่วนที่เลือก เมื่อมีเคอร์เซอร์หลายตำแหน่ง การแก้ไขทั้งหมดจะเกิดขึ้นพร้อมกัน เหมาะอย่างยิ่งสำหรับการเปลี่ยนชื่อตัวแปรในขอบเขตขนาดเล็ก
เทอร์มินัลในตัว
เปิดเทอร์มินัลภายใน VSCode ด้วย Ctrl+` (แบ็กทิก) คุณสามารถแยกเทอร์มินัลเพื่อเรียกใช้เซิร์ฟเวอร์สำหรับพัฒนาในแผงหนึ่ง และเรียกใช้การทดสอบในอีกแผงหนึ่งได้โดยไม่ต้องออกจากตัวแก้ไขโค้ด
การตั้งค่าพื้นที่ทำงาน
สร้างไฟล์ .vscode/settings.json ในโครงการเพื่อกำหนดการตั้งค่าเฉพาะโครงการ ซึ่งจะแทนที่การตั้งค่าของผู้ใช้ ยืนยันไฟล์นี้เข้าแหล่งเก็บโค้ดเพื่อให้เพื่อนร่วมทีมทุกคนมีประสบการณ์เหมือนกัน เช่น จัดรูปแบบเมื่อบันทึก กำหนดขนาดแท็บ และกำหนดคอลัมน์ไม้บรรทัด
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense และการนำเข้าอัตโนมัติ
IntelliSense ของ VSCode มีการเติมข้อความอัตโนมัติ คำแนะนำพารามิเตอร์ และเอกสารเมื่อวางเมาส์เหนือโค้ด สำหรับโครงการ TypeScript ระบบยังนำเข้าสัญลักษณ์โดยอัตโนมัติเมื่อคุณยอมรับรายการเติมข้อความ จึงไม่ต้องนำเข้าด้วยตนเอง
ไปยังคำจำกัดความและข้อมูลอ้างอิง
กด Ctrl+Click (หรือ F12) ที่สัญลักษณ์ใดก็ได้เพื่อไปยังคำจำกัดความของสัญลักษณ์นั้น Shift+F12 แสดงข้อมูลอ้างอิงทั้งหมด Ctrl+Shift+F ค้นหาทั่วทั้งไฟล์ทั้งหมด แป้นพิมพ์ลัดเหล่านี้ขาดไม่ได้สำหรับการนำทางในฐานโค้ดขนาดใหญ่
แผงปัญหา
แผงปัญหา (Ctrl+Shift+M) แสดงรายการข้อผิดพลาดและคำเตือนทั้งหมดจาก ESLint และ TypeScript ในไฟล์ที่เปิดอยู่ เป็นวิธีที่เร็วที่สุดในการดูสิ่งที่ต้องแก้ไขก่อนยืนยันการเปลี่ยนแปลง
ตรวจสอบความเข้าใจ
คำย่อ Emmet ul>li*3 จะขยายเป็นอะไรใน VSCode
ทบทวน: ขั้นตอนการทำงานใน VSCode
ติดตั้ง ESLint, Prettier และส่วนขยายเฉพาะภาษา ใช้ Emmet เพื่อเขียน HTML/CSS ได้อย่างรวดเร็ว เรียนรู้แป้นพิมพ์ลัด (Cmd+P, Cmd+Shift+P, Cmd+D) ตั้งค่า formatOnSave ใน .vscode/settings.json ใช้การแก้ไขด้วยเคอร์เซอร์หลายตำแหน่งสำหรับการเปลี่ยนแปลงซ้ำ ๆ และใช้ Go to Definition เพื่อนำทางในโค้ด
คำถามที่พบบ่อย
บทเรียน “VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด”
ติดตั้งส่วนขยายสำคัญ ใช้คำย่อ Emmet เพื่อเขียน HTML และ CSS ได้ทันที และเรียนรู้แป้นพิมพ์ลัดที่ช่วยให้แก้ไขได้เร็วขึ้น คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Chrome DevTools: Elements Console Network
- VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด
- การตั้งค่า Prettier และ ESLint
- ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com