แนะนำ Extensions สำหรับ Visual Studio Code

Sirichai Teerapattarasakul

Sirichai Teerapattarasakul / January 20, 2023

3 min read

รวม Extensions ส่วนเสริมของโปรแกรม Visual Studio Code (VSCode) ที่น่าใช้งาน ช่วยให้สามารถเขียนโค้ดได้ง่ายขึ้นและเร็วขึ้นมากกว่าเดิม ตามรายการดังนี้

Docker

  • Docker สำหรับอำนวยความสะดวกในการจัดการ Docker

Git

  • Gitmoji ไว้ใส่ Emoji ใน git commit ได้
  • GitLens เพิ่มความสามารถในการใช้ Git เช่น เอา Cursor วางไว้บรรทัดไหนจะมีข้อมูล Git แสดง บอกว่าใคร Commit ไปเวลาเท่าไร หรือคลิกเข้าไปดู Commit History ก็ได้ มีอีกเยอะแยะมากมายไปลองใช้ดูครับ
  • Git Graph แสดงการใช้งาน Git ในรูปแบบกราฟเส้นเพื่อให้ดูง่ายขึ้นมองเห็นภาพรวมในลักษณะเป็น GUI เช่นเห็นว่ามี Branch การ Commit หรือทำอะไรไปบ้าง
  • Git History สำหรับดูหรือค้นหาประวัติ Git ว่าเราทำอะไรไปบ้าง
  • .gitignore Generator สำหรับช่วยสร้าง gitignore โดยเลือกสร้างตามประเภทของโปรเจ็คได้ เช่น react, vue.js เป็นต้น

Laravel

  • Laravel Blade Snippets สำหรับช่วยพิมพ์คำสั่งเฉพาะ Blade Template เร็วขึ้น เช่น ถ้าพิมพ์ b:section จะมี Auto Complete แสดงมาให้เลือกเป็น @section…@endsection ได้เลย
  • Laravel snippetsสำหรับช่วยพิมพ์คำสั่ง หรือ Syntax ต่างๆของ Laravel เร็วขึ้น เช่นกัน เช่น พิมพ์ Auth::, Config:: and Session:: มันก็จะมี Auto Complete แสดงขึ้นมาให้เลือก
  • Laravel Goto Controller สำหรับคลิกที่ชื่อ Controller ที่เราเรียกจะวิ่งไปเปิดไฟล์ Controller นั้นๆ Windows: Alt + click, Mac: Command + click
  • Laravel Goto View สำหรับคลิกที่ชื่อ View ที่เราเรียกจะวิ่งไปเปิดไฟล์ View นั้นๆ Windows: Alt หรือ Ctrl + click, Mac: Command + click
  • Laravel Blade formatter ช่วยจัด format ให้กับ Blade Template

HTML / CSS / Javascript

  • HTML Snippetsไว้สร้าง HTML แบบรวดเร็ว เช่น พิมพ์แท็ก <img เคาะ Enter มันก็สร้างขึ้นมาให้ ไม่ต้องพิมพ์ทั้งหมดเป็นต้น
  • Auto Rename Tag สำหรับเวลาเปลี่ยนชื่อ Tag ของ HTML/XML โดยพิมพ์แก้ที่เดียวมันจะเปลี่ยน Tag เปิด/ปิดให้อัตโนมัติ
  • JavaScript (ES6) code snippets Code Snippets สำหรับ JavaScript (ES6)
  • ES7 React/Redux/GraphQL/React-Native snippets ทำงานคล้ายกับ “Snippets ด้านบนที่เกริ่นมา แต่อันนี้สำหรับ React ครับ
  • Live Sass Compilerไว้สำหรับ Compiler ไฟล์ Sass ไปเป็น Css
  • html to JSX สำหรับแปลง HTML เป็น JSX แค่ลากคลุมแล้วคลิกขวา
  • Tailwind CSS IntelliSense อำนวยความสะดวกในการใช้  Tailwind CSS โดยจะมี autocomplete, syntax highlighting และ Linting
  • Turbo Console Logสำหรับ Debug ค่าออก Console Log ใน Javascript โดยไม่ต้องเสียเวลาพิมพ์เอง
  • Bootstrap 5 & Font Awesome Snippets Code Snippets สำหรับ Bootstrap 5

API

  • REST Client สำหรับทดสอบส่ง HTTP request กับ API
  • Thunder Client สำหรับทดสอบ API ลักษณะเดียวกับ Postman

Coding

  • Indenticator ตัวนี้ไว้ดูการย่อหน้า หรือปีกกาเปิดปิด if else , loop, class หรือ function ต่าง เพื่อให้รู้ว่าเป็นของ Block ไหนกันแน่
  • Live Server ไว้จำลอง Server ภายในเครื่อง
  • Prettier – Code formatter ไว้กด Save แล้วจะจัด Format ให้อัตโนมัติ (ต้องเข้าไปใน Setting แล้วเพิ่มค่าใน User Setting  _“editor.formatOnSave”: true_)
  • indent-rainbow ทำไฮไลน์สีให้กับ indent ทำให้มองแยกได้ง่ายขึ้น แนะนำให้เปิด  indent dots ที่เป็นเส้นจุดไข่ปลาด้วย จะได้ดูง่ายขึ้นเข้าไปที่เมนู View >  toggle render whitespace (อยู่ด้านล่าง)
  • Bracket Pair Colorizer สำหรับแสดงสีคู่ของวงเล็บเช่น () [] {} เพื่อให้อ่าน code ง่าย
  • DotENV แสดง syntax highlighting ให้กับไฟล์ .env เพื่อให้ดูง่ายขึ้น
  • Path Intellisense ใช้สำหรับดึงชื่อ directory หรือ path file ครั้งที่พิมพ์ / มันจะมีชื่อ folder และไฟล์ ต่างๆ แสดงขึ้นมา เช่น จะดึงรูปก็ใช้ src ในแท็ก img  <img src=”/”> เป็นต้น และหากกด Ctrl+ Click ที่ชื่อ function หรือ class มันจะพาไปยังไฟล์ที่เก็บนั้นให้
  • Bookmarks ไว้สำหรับบันทึกตำแหน่งของ Code เพื่อให้หา Code ได้ง่ายขึ้น
  • Vscode-icons ไว้สำหรับแสดง Icon ไฟล์ใน Explorer เพื่อให้เราดูง่าย (เมื่อติดตั้งแล้ว MacOSให้เข้าไปที่เมนู Code > Preferences > File Icon Theme > VSCode Icons จากนั้น Apply ใช้งานได้เลย)
  • GitHub Copilot, Codeium, TabNine, Tabby AI ผู้ช่วยในการเขียนโปรแกรม
  • Error Lens แสดงข้อความการวิเคราะห์ข้อผิดพลาด (Error) ที่บรรทัด Code ให้เห็นชัดเจนขึ้น

Database

MongoDB for VS Code ช่วยจัดการ MongoDB MySQL ช่วยจัดการ MySQL

Utilities

  • Draw.io Integration ช่วยการออกแบบ diagram หรือ Flowchart ต่างๆ
  • Polacode สำหรับทำโค้ดเป็น screenshots เป็นรูปสวยๆ
  • MDX Preview สำหรับช่วย Preview ในการเขียน Markdown
  • Rainbow CSV สำหรับช่วย Preview ไฟล์ CSV โดยจะเปลี่ยนสีข้อมูลในคอลัมน์ให้แตกต่างกันเพื่อดูง่ายขึ้น หรือนำเมาส์ไปไว้ที่ข้อมูลจะแสดงชื่อคอลัมน์ (กรณีตั้งชื่อไว้แถวบนสุด)
  • Excel Viewer สำหรับแสดงไฟล์ CSV ในรูปแบบตาราง รวมถึงสามารถแก้ไขข้อมูลได้
  • Peacock เปลี่ยนสีธีม Workspace ตามโปรเจ็กต์ช่วยให้ไม่สับสนทำหลายโปรเจ็กต์พร้อมกัน