บล็อกนี้เพื่อบันทึกไว้เก็บ Extension ต่างๆ ของ Visual Studio Code (VS Code) ที่ช่วยให้เขียน Code ได้ง่ายขึ้น มีดังนี้ ครับ

  1. HTML Snippets ไว้สร้าง HTML แบบรวดเร็ว เช่น พิมพ์แท็ก <img เคาะ Enter มันก็สร้างขึ้นมาให้ ไม่ต้องพิมพ์ทั้งหมดเป็นต้น
  2. Laravel Blade Snippets สำหรับช่วยพิมพ์คำสั่งเฉพาะ Blade Template เร็วขึ้น เช่น ถ้าพิมพ์ “b:section” จะมี Auto Complete แสดงมาให้เลือกเป็น @section…@endsection ได้เลย
  3. Laravel snippets สำหรับช่วยพิมพ์คำสั่ง หรือ Syntax ต่างๆของ Laravel เร็วขึ้น เช่นกัน เช่น พิมพ์ Auth::, Config:: and Session:: มันก็จะมี Auto Complete แสดงขึ้นมาให้เลือก
  4. ES7 React/Redux/GraphQL/React-Native snippets ทำงานคล้ายกับ “Snippets ด้านบนที่เกริ่นมา แต่อันนี้สำหรับ React ครับ
  5. Path Intellisense ใช้สำหรับดึงชื่อ directory หรือ path file ครั้งที่พิมพ์ / มันจะมีชื่อ folder และไฟล์ ต่างๆ แสดงขึ้นมา เช่น จะดึงรูปก็ใช้ src ในแท็ก img  (<img src=”/”>) เป็นต้น และหากกด Ctrl+ Click ที่ชื่อ function หรือ class มันจะพาไปยังไฟล์ที่เก็บนั้นให้
  6. Indenticator ตัวนี้ไว้ดูการย่อหน้า หรือปีกกาเปิดปิด if else , loop, class หรือ function ต่าง เพื่อให้รู้ว่าเป็นของ Block ไหนกันแน่
  7. GitLens อันนี้ชอบมากใครใช้ Git ลงเถอะ ความสามารถอย่างเช่น Cursor วางไว้บรรทัดไหนจะมีข้อมูล Git แสดง บอกว่าใคร Commit ไปเวลาเท่าไร หรือคลิกเข้าไปดู Commit History ก็ได้ มีอีกเยอะแยะมากมายไปลองใช้ดูครับ
  8. Live Server ไว้จำลอง Server ภายในเครื่อง
  9. Prettier – Code formatter ไว้กด Save แล้วจะจัด Format ให้อัตโนมัติ (ต้องเข้าไปใน Setting แล้วเพิ่มค่าใน User Setting  “editor.formatOnSave”: true)
  10. Bookmarks ไว้สำหรับบันทึกตำแหน่งของ Code เพื่อให้หา Code ได้ง่ายขึ้น
  11. Vscode-icons ไว้สำหรับแสดง Icon ไฟล์ใน Explorer เพื่อให้เราดูง่าย (เมื่อติดตั้งแล้ว MacOSให้เข้าไปที่เมนู Code > Preferences > File Icon Theme > VSCode Icons จากนั้น Apply ใช้งานได้เลย)
  12. Live Sass Compiler ไว้สำหรับ Compiler ไฟล์ Sass ไปเป็น Css
  13. html to JSX สำหรับแปลง HTML เป็น JSX แค่ลากคลุมแล้วคลิกขวา
  14. Polacode สำหรับทำโค้ดเป็น screenshots เป็นรูปสวยๆ
  15. REST Client สำหรับทดสอบส่ง HTTP request กับ API
  16. Git History สำหรับดูหรือค้นหาประวัติ Git ว่าเราทำอะไรไปบ้าง
  17. .gitignore Generator สำหรับช่วยสร้าง gitignore โดยเลือกสร้างตามประเภทของโปรเจ็คได้ เช่น react, vue.js เป็นต้น
  18. indent-rainbow ทำไฮไลน์สีให้กับ indent ทำให้มองแยกได้ง่ายขึ้น แนะนำให้เปิด  indent dots ที่เป็นเส้นจุดไข่ปลาด้วย จะได้ดูง่ายขึ้นเข้าไปที่เมนู View >  toggle render whitespace (อยู่ด้านล่าง)
  19. Tailwind CSS IntelliSense อำนวยความสะดวกในการใช้  Tailwind CSS โดยจะมี autocomplete, syntax highlighting และ Linting
  20. Bracket Pair Colorizer สำหรับแสดงสีคู่ของวงเล็บเช่น () [] {} เพื่อให้อ่าน code ง่าย
  21. Laravel Goto Controller สำหรับคลิกที่ชื่อ Controller ที่เราเรียกจะวิ่งไปเปิดไฟล์ Controller นั้นๆ (Windows: Alt + click, Mac: Command + click)
  22. Laravel Goto View สำหรับคลิกที่ชื่อ View ที่เราเรียกจะวิ่งไปเปิดไฟล์ View นั้นๆ (Windows: Alt หรือ Ctrl + click, Mac: Command + click)
  23. DotENV แสดง syntax highlighting ให้กับไฟล์ .env เพื่อให้ดูง่ายขึ้น
  24. Thunder Client สำหรับทดสอบ API ลักษณะเดียวกับ Postman
  25. Auto Rename Tag สำหรับเวลาเปลี่ยนชื่อ Tag ของ HTML/XML โดยพิมพ์แก้ที่เดียวมันจะเปลี่ยน Tag เปิด/ปิดให้อัตโนมัติ
  26. Turbo Console Log สำหรับ Debug ค่าออก Console Log ใน Javascript โดยไม่ต้องเสียเวลาพิมพ์เอง

ทั้งหมดทั้งมวลผมเกริ่นเฉพาะ Extension ที่ใช้งานส่วนตัวหลักเท่านั้น ซึ่งแต่ละตัวยังมีความสามารถต่างๆ อีกมากมาย วิธีการใช้งานและรายละเอียดอื่นๆ ลองเข้าไปอ่านดูในแต่ละ Extension ที่ลิงค์ไว้นะครับ ถ้ามีตัวไหนที่ผมใช้ดูแล้วมีประโยชน์ใช้งานได้จริงจะมาอัพเดทที่นี่อีกครั้ง

Author: ชื่อ ศิริชัย ธีรภัทรสกุล (ตั้ม) เป็นนักพัฒนาเว็บไซต์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ และเขียนบล็อก