แนะนำ Extension สำหรับ Visual Studio Code (VS Code)

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

  1. HTML Snippets ไว้สร้าง HTML แบบรวดเร็ว เช่นพิมพ์แท็ก <img เคาะ Enter มันก็สร้างขึ้นมาให้ ไม่ต้องพิมพ์ทั้งหมดเป็นต้น
  2. Laravel Blade Snippets ทำงานคล้ายกับ “HTML Snippets” แต่จะมีคำสั่งเฉพาะ Blade Template ด้วย เช่น ถ้าพิมพ์ “b:section” จะมี Auto Complete แสดงมาให้เลือกเป็น @section…@endsection ได้เลย
  3. Laravel 5 snippets ทำงานคล้ายกับ “HTML Snippets” เช่นกัน เช่น พิมพ์ 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=”/”>) เป็นต้น
  6. PHP IntelliSense – Crane คล้ายกับ “Path Intellisense” คือพิมพ์ / มันจะหา class หรือ function ต่างๆ มาให้ หากกด Ctrl+ Click ที่ชื่อ function หรือ class มันจะพาไปยังไฟล์ที่เก็บนั้นให้
  7. Indenticator ตัวนี้ไว้ดูการย่อหน้า หรือปีกกาเปิดปิด if else , loop, class หรือ function ต่าง เพื่อให้รู้ว่าเป็นของ Block ไหนกันแน่
  8. GitLens อันนี้ชอบมากใครใช้ Git ลงเถอะ ความสามารถอย่างเช่น Cursor วางไว้บรรทัดไหนจะมีข้อมูล Git แสดง บอกว่าใคร Commit ไปเวลาเท่าไร หรือคลิกเข้าไปดู Commit History ก็ได้ มีอีกเยอะแยะมากมายไปลองใช้ดูครับ
  9. Align จัดเรียง Code ให้สวยงาม
  10. Live Server ไว้จำลอง Server ภายในเครื่อง
  11. Prettier – Code formatter ไว้กด Save แล้วจะจัด Format ให้อัตโนมัติ (ต้องเข้าไปใน Setting แล้วเพิ่มค่าใน User Setting  “editor.formatOnSave”: true)
  12. Bookmarks ไว้สำหรับบันทึกตำแหน่งของ Code เพื่อให้หา Code ได้ง่ายขึ้น
  13. Vscode-icons ไว้สำหรับแสดง Icon ไฟล์ใน Explorer เพื่อให้เราดูง่าย (เมื่อติดตั้งแล้ว MacOSให้เข้าไปที่เมนู Code > Preferences > File Icon Theme > VSCode Icons จากนั้น Apply ใช้งานได้เลย)
  14. Live Sass Compiler ไว้สำหรับ Compiler ไฟล์ Sass ไปเป็น Css

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

(ตั้ม) ศิริชัย ธีรภัทรสกุล เป็นเว็บโปรแกรมเมอร์, บล็อกเกอร์, และเจ้าของกิจการ ชอบถ่ายรูป อ่านหนังสือ และออกกำลังกาย “จงมีความกล้าที่จะลงมือทำ และอยู่กับปัจจุบัน ณ ขณะ (จงโฟกัส)"

Post a Comment