❄️Top Extension Visual Studio Code

สำหรับคนที่เป็น DevOps Developer พัฒนาแอพพลิเคชั่น ผมก็จะมาแนะนำ Extension Visual Code ที่จำเป็นต่อการแอพพลิเคชั่นและได้รับความนิยม ซึ่งผู้พัฒนาจำเป็นจะต้องรู้จักและมีติดเว็บเอาไว้ ซึ่งผมก็ใช้อยู่ในปัจจุบัน

Basic Extension

  • Auto Close Tag : ใช้สำหรับสร้าง Close Tag โดยปกติหลังจากที่ทำการสร้าง Open Tag มันจะทำการสร้าง Close Tag ให้โดยอัตโนมัติ หากเผลอลบ Tag เราสามารนำ Cursor ไปวางแล้วกด Alt + . เพื่อทำการสร้าง Close Tag ได้อย่างรวดเร็ว

  • Auto Import : ใช้สำหรับการทำ Import Library ของ Node Module ในภาษา Typescript อย่าง Angular โดยอัตโนมัติ

  • Auto Rename Tag : ใช้สำหรับแก้ไข Rename Tag ทั้ง Open Tag และ Close Tag พร้อมกันได้อย่างรวดเร็ว และช่วยป้องกันความผิดพลาดอันเกิดจาก Rename Tag ที่ Open Tag แล้วแต่ลืม Rename Tag ที่ Close Tag นั่นเอง

  • Bracket Pair Colorizer : ใช้สำหรับแสดง Bracket Pair ในการเขียนโปรแกรมให้อยู่ในรูปแบบของ Color เพื่อลดความผิดพลาดในการเขียนโปรแกรม และทำให้มอง Code ได้ง่ายขึ้น

  • CSV to Table : ใช้สำหรับแสดง CSV File ให้อยู่ในรูปแบบของ ASCII Format ทำให้เราสามารถเปิดดูข้อมูลได้อย่างรวดเร็ว ซึ่งสะดวกมากสำหรับเหล่า Data Science ในการเปิดดู Dataset ต่าง ๆ

  • Docker : ใช้สำหรับจัดการ Container บน Docker

  • GlassIt-VSC : ใช้สำหรับแสดง VS Code ให้เป็น Transparent Mode ทำให้สามารถเขียนโปรแกรมโดยดู Document ไปพร้อมกัน หรือ ดูผลลัพธ์ของ Application ไปพร้อมกัน

  • GitLens — Git supercharged : ให้สำหรับแสดง

  • Highlight Matching Tag : ใช้สำหรับแสดง Matching Tag ในการเขียนภาษาที่มี Open Tag และ Close Tag อย่าง HTML เพื่อป้องกันการเขียนโปรแกรมแล้วลืม Close Tag

  • htmltagwrap : ใช้สำหรับการทำ HTML Tag ได้ทั้ง Single Selection and Multiple Selection โดย Default จะเป็น Tag <p> ด้วยการกด Alt + W

  • Import Cost : ใช้สำหรับแสดง Size ของ Package ที่ถูก Import เข้ามาใน Component ทำให้เราสามารถตรวจพบปัญหาของการโหลด Component ได้แต่เนิ่น ๆ

  • Live Server : ใช้สำหรับรัน Project บน Local Development Server สำหรับ Static & Dynamic Pages ที่มาพร้อมกับ Live Reload นอกจากนี้ยัง Support Feature ต่าง ๆ อย่างเช่น HTTPS, CORS

  • Live Share : ใช้สำหรับ Programming Collaborative แบบ Real-Time ที่ใช้ในการ Develop ไม่ว่าจะเป็น Co-Debug, Share Project, Share Server, Share Terminal และ Voice Call นอกจากนี้ยังสามารถนำไปประยุกต์ใช้กับ Education

  • Paste JSON as Code : ใช้สำหรับการทำ Generate Models and Serializers จาก JSON, Schema และ GraphQL ในภาษา Programming Language ต่าง ๆ

  • SQLTools – Database tools : ใช้สำหรับจัดการ Connection Database, Bookmark, Query History ซึ่งรองรับ Database Driver หลายตัว ไม่ว่าจะเป็น AWS, Cassandra, MariaDB, MSSQL, MySQL, OracleDB, PostgreSQL, SAPHana และ SQLite

  • SSH FS : ใช้สำหรับการทำ Remote Workspace เพื่อเรียก File System ผ่าน SSH ทำให้สามารถ เพิ่มลบแก้ไข File and Folder ที่อยู่ใน File System ได้ทั้งหมด ตาม Permission ของ Account

  • Trailing Spaces : ใช้สำหรับแสดง Trailing Space เพื่อทำการ Delete ได้อย่างรวดเร็ว

  • vscode-author-generator : ใช้สำหรับการทำ Generate Author Info ขึ้นมาอย่างรวดเร็ว ซึ่งเราสามารถกำหนดค่าได้ใน Preference -> Setting

  • vscode-faker : ใช้สำหรับการทำ Generate Data ขึ้นมาอย่างรวดเร็ว ไม่ว่าจะเป็น Address, Commerce, Company, Database, Date, Finance, Hacker, Image, Internet, Lorem. Name, Phone, Random, System

  • vscode-icons : ใช้สำหรับแสดง Icon บน VS Code ตามนามสกุลไฟล์ที่อยู่ในโฟลเดอร์ ทำให้เราเขียนโปรแกรมได้ง่ายขึ้น และช่วยลดความผิดพลาดในการเขียนโปรแกรม

  • Material Icon Theme : ใช้สำหรับแสดง Icon บน VS Code ตามนามสกุลไฟล์ที่อยู่ในโฟลเดอร์ สวยกว่าและครอบคลุมกว่าตัวบน แนะนำให้ใช้ตัวนี้แทน

  • Settings Sync : ใช้สำหรับสำรอง Setting & Extension ต่าง ๆ ทำให้เราสามารถทำการ Backup & Restore การตั้งค่าทั้งหมด รวมถึง Extension ต่าง ๆ โดยไม่ต้องทำการติดตั้ง Extension ใหม่ที่ละตัว

  • vscode-spotify : ใช้สำหรับเข้าถึง Spotify เพื่อใช้ในการฟังเพลง โดยการใช้งานบน Windows จะไม่สามารถเล่นได้เลย แต่จะเรียกใช้งาน Web Player ผ่าน API

  • WakaTime : ใช้สำหรับแสดง Activity Time ในการ Programming บน VS Code ที่จะถูก Tracking โดยอัตโนมัติ ซึ่งเราสามารถนำไปประยุกต์ใช้กับ Work at Home

  • Coddx : ใช้สำหรับสร้าง Task Board เพื่อใช้ในการจัดการ Task ต่าง ๆ ซึ่งสามารถจัดการได้แบบ Interactive หรือจะเขียนเป็นไฟล์ TODO.md โดยใช้ Format ของ GitHub Flavored Markdown ( GFM )

  • REST Client : ใช้สำหรับส่ง HTTP Request เพื่อแสดงค่า Response ซึ่งสามารถส่งค่า HTTP Request ได้ทั้ง GET และ POST เหมือนกับการใช้งานผ่าน Postman

  • Microsoft Edge Tools : ใช้สำหรับการทำ Debug Website เพื่อใช้ในการแก้ไขปัญหาในการพัฒนาเว็บทางฝั่ง Front-End โดยจะทำการเรียกใช้ DevTools ของทาง Microsoft Edge ซึ่งสามารถใช้งานได้เหมือนการ Inspect Element บน Web Browser

  • CodeQL : ใช้สำหรับการทำ Automate Code Analysis เพื่อค้นหาช่องโหว่ด้านความปลอดภัย Security Vulnerability

  • SonarLint : ใช้สำหรับตรวจสอบ Bugs and Security Vulnerabilities เพื่อค้นหาข้อผิดพลาดของโปรแกรม และ ช่องโหว่ด้านความปลอดภัย

Option Extension

Last updated

Was this helpful?