10 extension ยอดนิยมสำหรับผู้ ใช้ vscode ประจำปี 2019

วิธีการติดตั้ง Extension บน VSCode

1. ให้กดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension
2. ในช่องค้นหาด้านบน ให้พิมพ์ชื่อ Extension ที่ต้องการ
3. คลิกที่ปุ่ม Install เมื่อทำการติดตั้งเสร็จเรียบร้อยก็ให้คลิกที่ปุ่ม Reload

1.VS Color Picker, Color Highlight

ใช้เลือกสีในการไฮไลท์โค้ด มีสองโหมดให้เลือกจะเลือกสีเอง หรือ ไปดูดมาจากที่อื่นๆ ข้างนอกโปรแกรมก็ดูดได้

2.Open In Default Browser

เป็นวิธีการทำให้ VS Code สามารถรัน HTML ผ่าน browser ได้ โดยกดปุ่ม Ctrl+Shift+X หรือกดปุ่ม Extension ให้พิมพ์คำว่า open in browser

3.Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Bootstrap ช่วยในเรื่องการทำเว็บให้ responsive (รองรับทุกขนาดหน้าจอของผู้ใช้) แต่จริงๆ Bootstrap ยังทำให้ชีวิตเราง่ายขึ้นในหลายๆ ด้านมาก ไม่ว่าจะเป็นการดีไซน์เว็บให้สวยงามทันสมัยโดยที่เราเขียนโค้ดนิดเดียว หรือการจัด layout (แบบ) หน้าเว็บเราง่ายๆ โดยไม่ต้องเขียนโค้ด CSS เยอะ

4.GitHub

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

5.Auto Close Tag

เขียนแค่ tag เปิดก็พอ ไม่ต้องเขียน tag ปิด ลง Auto Close Tag ไว้ให้ editor ทำการปิด tag ให้เรา จะช่วยลดเวลาในการเขียนโค้ด

6.Auto Rename Tag

Auto Rename Tag เป็น Extension ที่ช่วยให้ผมสามารถแก้ไขชื่อ Tag แล้วตัวปิด Tag จะเปลี่ยนไปตามชื่อ Tag ที่แก้ไขด้วย ช่วยเพิ่มความสะดวกในการเขียนโค้ด

7.Live server

Live Server จะเป็นหน้าจอที่ 2 ช่วยแสดงผลลัพธ์ของโปรแกรมใน Code Editor แบบสดๆ ไม่ต้องนั่งสลับจอ หรือ Refresh ให้เสียเวลา เท่านี้การเขียนโค้ดก็จะง่าย และเร็วขึ้นอีกหลายเท่า

8.Quokka.js

Quokka จะช่วยในการแก้ไขจุดบกพร่อง และทดสอบโค้ด Javascript ให้โดยอัตโนมัติ พร้อมทั้งแสดงผลลัพธ์ให้ดู ทำให้ไม่ต้องเสียเวลาไปดีบั๊กภายหลัง

9.vscode-icons

‘VS Code Icons’ จะมาช่วยแยกประเภทของไฟล์ต่าง ๆ ในโปรเจคด้วย Icon ที่เป็นสัญลักษณ์ ที่ทำให้ง่ายสำหรับการค้นหาจึงช่วยประหยัดเวลา

10.Import Cost

extension ที่จะคอยแสดงขนาดไฟล์ของ package ที่เรา import เข้ามา โดยจะแสดงให้เห็นทันทีว่า package ตัวไหนมีขนาดไฟล์เท่าไหร่