แนะนำ Extension สำหรับ Visual Studio Code (VS Code)
บล็อกนี้เพื่อบันทึกไว้เก็บ 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:: and Session:: มันก็จะมี Auto Complete แสดงขึ้นมาให้เลือก
- ES7 React/Redux/GraphQL/React-Native snippets ทำงานคล้ายกับ “Snippets ด้านบนที่เกริ่นมา แต่อันนี้สำหรับ React ครับ
- Path Intellisense ใช้สำหรับดึงชื่อ directory หรือ path file ครั้งที่พิมพ์ / มันจะมีชื่อ folder และไฟล์ ต่างๆ แสดงขึ้นมา เช่น จะดึงรูปก็ใช้ src ในแท็ก img (<img src=”/”>) เป็นต้น และหากกด 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 แล้วเพิ่มค่าใน User 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 นั้นๆ (Windows: Alt หรือ Ctrl + click, Mac: Command + click)
- DotENV แสดง syntax highlighting ให้กับไฟล์ .env เพื่อให้ดูง่ายขึ้น
- Thunder Client สำหรับทดสอบ API ลักษณะเดียวกับ Postman
- Auto Rename Tag สำหรับเวลาเปลี่ยนชื่อ Tag ของ HTML/XML โดยพิมพ์แก้ที่เดียวมันจะเปลี่ยน Tag เปิด/ปิดให้อัตโนมัติ
- Turbo Console Log สำหรับ Debug ค่าออก Console Log ใน Javascript โดยไม่ต้องเสียเวลาพิมพ์เอง
ทั้งหมดทั้งมวลผมเกริ่นเฉพาะ Extension ที่ใช้งานส่วนตัวหลักเท่านั้น ซึ่งแต่ละตัวยังมีความสามารถต่างๆ อีกมากมาย วิธีการใช้งานและรายละเอียดอื่นๆ ลองเข้าไปอ่านดูในแต่ละ Extension ที่ลิงค์ไว้นะครับ ถ้ามีตัวไหนที่ผมใช้ดูแล้วมีประโยชน์ใช้งานได้จริงจะมาอัพเดทที่นี่อีกครั้ง