สำหรับคนที่เป็น DevOps Developer พัฒนาแอพพลิเคชั่น ผมก็จะมาแนะนำ Extension Visual Code ที่จำเป็นต่อการแอพพลิเคชั่นและได้รับความนิยม ซึ่งผู้พัฒนาจำเป็นจะต้องรู้จักและมีติดเว็บเอาไว้ ซึ่งผมก็ใช้อยู่ในปัจจุบัน
Basic Extension
- GlassIt-VSC : ใช้สำหรับแสดง VS Code ให้เป็น Transparent Mode ทำให้สามารถเขียนโปรแกรมโดยดู Document ไปพร้อมกัน หรือ ดูผลลัพธ์ของ Application ไปพร้อมกัน
- Trailing Spaces : ใช้สำหรับแสดง Trailing Space เพื่อทำการ Delete ได้อย่างรวดเร็ว
- 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
- Coddx : ใช้สำหรับสร้าง Task Board เพื่อใช้ในการจัดการ Task ต่าง ๆ ซึ่งสามารถจัดการได้แบบ Interactive หรือจะเขียนเป็นไฟล์ TODO.md โดยใช้ Format ของ GitHub Flavored Markdown ( GFM )
- 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 เพื่อค้นหาข้อผิดพลาดของโปรแกรม และ ช่องโหว่ด้านความปลอดภัย
- Graphite : ใช้สำหรับแสดง Stacked Pull Request แบบ Visualize Dependency Graphs ด้วยการ Drag & Drop และใช้สำหรับการสร้าง Branch ด้วยคลิกเดียว
Dev 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 ได้ง่ายขึ้น
- 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 ได้แต่เนิ่น ๆ
- Codeium : ใช้สำหรับเขียน Code ด้วย AI ทำให้สามารถเขียน Code ได้อย่างรวดเร็ว สามารถ Generate ได้หลายบรรทัด อีกทั้งยังรองรับได้หลายภาษา ไม่ว่าจะเป็น Python, Go, PHP, JAVA หรือจะใช้ Prompt Chat มาช่วย Generate ก็ได้
- MySQL : ใช้สำหรับเชื่อมต่อฐานข้อมูล MySQL แสดงข้อมูล Database, Table, Column สามารถเขียนและรันคำสั่ง Query ได้ในตัว
- Runme : ใช้สำหรับรันคำสั่ง CLI ผ่านทาง Markdown Document ไฟล์ เหมือนการรัน Python ผ่านทาง Jupyter Notebook ทำให้เราสามารถรันคำสั่งตาม Document ได้แบบ Step by Step
- Draw Folder Structure : ใช้สำหรับสร้าง Folder Structure แบบ Markdown เพื่อใช้ประกอบการอธิบายในเอกสาร Document ได้อย่างรวดเร็ว เพียงคลิกเดียวก็มาทั้ง Project
- gitignore : ใช้สำหรับสร้างไฟล์ .gitignore ซึ่งจะดึงจาก Repository ของ Github โดยตรง ซึ่งจะมีการอัพเดทอยู่ตลอด
- Markmap : ใช้สำหรับแสดง Mindmap จากไฟล์ Markdown
- Git Graph :
- Web Accessibility :
Generate Extension
- Paste JSON as Code : ใช้สำหรับการทำ Generate Models and Serializers จาก JSON, Schema และ GraphQL ในภาษา Programming Language ต่าง ๆ
- 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
Tools Extension
- CSV to Table : ใช้สำหรับแสดง CSV File ให้อยู่ในรูปแบบของ ASCII Format ทำให้เราสามารถเปิดดูข้อมูลได้อย่างรวดเร็ว ซึ่งสะดวกมากสำหรับเหล่า Data Science ในการเปิดดู Dataset ต่าง ๆ
- Docker : ใช้สำหรับจัดการ Container บน Docker
- 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
- 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
- WakaTime : ใช้สำหรับแสดง Activity Time ในการ Programming บน VS Code ที่จะถูก Tracking โดยอัตโนมัติ ซึ่งเราสามารถนำไปประยุกต์ใช้กับ Work at Home
- REST Client : ใช้สำหรับส่ง HTTP Request เพื่อแสดงค่า Response ซึ่งสามารถส่งค่า HTTP Request ได้ทั้ง GET และ POST เหมือนกับการใช้งานผ่าน Postman
- GitLens — Git supercharged : ใช้สำหรับแสดง Git Version Control ความสามารถประกอบไปด้วย Revision Navigation, Commit Graph, Visual File History, Interactive Rebase Editor, Git Command Palette
Option Extension
- npm Intellisense :
- Path Intellisense :
- Angular Files :
- Angular Language Service :
- Angular Snippets (Version 8) :
- angular2-switcher :
- JavaScript (ES6) code snippets :
- .NET Core Snippet Pack :
- C# Extensions :
- NuGet Package Manager :
- WilderMinds’ ASP.NET Core Snippets :
- Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets :
- Language PL/SQL :
- Even Better TOML :
- AWS Toolkit :
- Mojo Lang :
Leave a Reply