บล็อกนี้เพื่อบันทึกไว้เก็บ Extension ต่างๆ ของ Visual Studio Code (VS Code) ที่ช่วยให้เขียน Code ได้ง่ายขึ้น มีดังนี้ครับ
-
HTML Snippets — ไว้สร้าง HTML แบบรวดเร็ว เช่น พิมพ์แท็ก
<imgเคาะ Enter มันก็สร้างขึ้นมาให้ ไม่ต้องพิมพ์ทั้งหมด -
Laravel Blade Snippets — สำหรับช่วยพิมพ์คำสั่งเฉพาะ Blade Template เร็วขึ้น เช่น ถ้าพิมพ์ "b:section" จะมี Auto Complete แสดงมาให้เลือกเป็น
@section…@endsectionได้เลย -
Laravel snippets — สำหรับช่วยพิมพ์คำสั่งหรือ Syntax ต่างๆ ของ Laravel เร็วขึ้น เช่น พิมพ์
Auth::,Config::และSession::มันก็จะมี Auto Complete แสดงขึ้นมาให้เลือก -
ES7 React/Redux/GraphQL/React-Native snippets — ทำงานคล้ายกับ Snippets ด้านบน แต่อันนี้สำหรับ React ครับ
-
Path Intellisense — ใช้สำหรับดึงชื่อ directory หรือ path file ครั้งที่พิมพ์
/มันจะมีชื่อ folder และไฟล์ต่างๆ แสดงขึ้นมา และหากกด Ctrl + Click ที่ชื่อ function หรือ class มันจะพาไปยังไฟล์ที่เก็บนั้นให้ -
Indenticator — ตัวนี้ไว้ดูการย่อหน้า หรือปีกกาเปิดปิด if else, loop, class หรือ function ต่าง เพื่อให้รู้ว่าเป็นของ Block ไหนกันแน่
-
GitLens — อันนี้ชอบมากใครใช้ Git ลงเถอะ ความสามารถอย่างเช่น Cursor วางไว้บรรทัดไหนจะมีข้อมูล Git แสดง บอกว่าใคร Commit ไปเมื่อเวลาเท่าไร หรือคลิกเข้าไปดู Commit History ก็ได้
-
Live Server — ไว้จำลอง Server ภายในเครื่อง
-
Prettier – Code formatter — ไว้กด Save แล้วจะจัด Format ให้อัตโนมัติ (ต้องเข้าไปใน Setting แล้วเพิ่มค่า
"editor.formatOnSave": true) -
Bookmarks — ไว้สำหรับบันทึกตำแหน่งของ Code เพื่อให้หา Code ได้ง่ายขึ้น
-
Vscode-icons — ไว้สำหรับแสดง Icon ไฟล์ใน Explorer เพื่อให้เราดูง่าย (เมื่อติดตั้งแล้ว macOS ให้เข้าไปที่เมนู Code > Preferences > File Icon Theme > VSCode Icons จากนั้น Apply ใช้งานได้เลย)
-
Live Sass Compiler — ไว้สำหรับ Compiler ไฟล์ Sass ไปเป็น CSS
-
html to JSX — สำหรับแปลง HTML เป็น JSX แค่ลากคลุมแล้วคลิกขวา
-
Polacode — สำหรับทำโค้ดเป็น screenshots เป็นรูปสวยๆ
-
REST Client — สำหรับทดสอบส่ง HTTP request กับ API
-
Git History — สำหรับดูหรือค้นหาประวัติ Git ว่าเราทำอะไรไปบ้าง
-
.gitignore Generator — สำหรับช่วยสร้าง gitignore โดยเลือกสร้างตามประเภทของโปรเจ็คได้ เช่น React, Vue.js เป็นต้น
-
Indent Rainbow — ทำไฮไลน์สีให้กับ indent ทำให้มองแยกได้ง่ายขึ้น แนะนำให้เปิด indent dots ที่เป็นเส้นจุดไข่ปลาด้วย จะได้ดูง่ายขึ้น (View > Toggle Render Whitespace)
-
Tailwind CSS IntelliSense — อำนวยความสะดวกในการใช้ Tailwind CSS โดยจะมี autocomplete, syntax highlighting และ Linting
-
Bracket Pair Colorizer — สำหรับแสดงสีคู่ของวงเล็บเช่น
()[]{}เพื่อให้อ่าน code ง่าย -
Laravel Goto Controller — สำหรับคลิกที่ชื่อ Controller ที่เราเรียกจะวิ่งไปเปิดไฟล์ Controller นั้นๆ (Windows: Alt + click, Mac: Command + click)
-
Laravel Goto View — สำหรับคลิกที่ชื่อ View ที่เราเรียกจะวิ่งไปเปิดไฟล์ View นั้นๆ
-
DotENV — แสดง syntax highlighting ให้กับไฟล์
.envเพื่อให้ดูง่ายขึ้น -
Thunder Client — สำหรับทดสอบ API ลักษณะเดียวกับ Postman
-
Auto Rename Tag — สำหรับเวลาเปลี่ยนชื่อ Tag ของ HTML/XML โดยพิมพ์แก้ที่เดียวมันจะเปลี่ยน Tag เปิด/ปิดให้อัตโนมัติ
-
Turbo Console Log — สำหรับ Debug ค่าออก Console Log ใน Javascript โดยไม่ต้องเสียเวลาพิมพ์เอง
ทั้งหมดทั้งมวลผมเกริ่นเฉพาะ Extension ที่ใช้งานส่วนตัวหลักเท่านั้น ซึ่งแต่ละตัวยังมีความสามารถต่างๆ อีกมากมาย วิธีการใช้งานและรายละเอียดอื่นๆ ลองเข้าไปอ่านดูในแต่ละ Extension ที่ลิงค์ไว้นะครับ
ถ้ามีตัวไหนที่ผมใช้ดูแล้วมีประโยชน์ใช้งานได้จริงจะมาอัพเดทที่นี่อีกครั้ง