Angular — แชร์ Extension ที่คิดว่ามีประโยชน์กันหน่อย

จากที่พี่แอมป์ Tanawat Tassana โพสถามเรื่อง extension ของการพัฒนา Angular เลยอยากเขี่ยบล็อกเพื่อแชร์บ้าง ส่วนตัวผมใช้แต่ vscode ดังนั้นก็จะมีแต่ของ vscode ล้วนๆนะครับ

วิธี install extension ของ vscode

ง่ายสุดก็เลือกเมนู extensions ใน vscode เอาชื่อไป search กด install -> reload ก็โอเคแล้วครับ

เมนูซ้ายมือล่างสุดไอคอนรูปสี่เหลี่ยม

Extension ไหนบ้างที่น่าสนใจ ?

1. Material Icon Theme — เปลี่ยนไอคอนให้เป็นสีสดใส

จากไอคอนไฟล์จืดๆ

กลายเป็นไอคอนที่มีสีสันและสัญญลักษณ์ตามชนิดไฟล์

2. Typescript Hero — ตัวช่วยอิมพอร์ทคลาสต่างๆโดนไม่ต้องพิมพ์เอง

สามารถกด shortcut หรือที่หลอดไฟเพื่อให้มันเดาให้ได้เลย

เดาให้ระหว่างพิมพ์ด้วย

Organize imports (sort and remove unused) อันนี้ละทีเด็ด

3. TSLint — ตัวช่วยเตือนเรื่องมาตราฐานของโค้ดให้เป็นไปตามที่ควรจะเป็น

อย่าลืม ; นะจ๊ะ

4. Bracket Pair Colorizer — ตัวช่วยหาคู่ปีกาว่าคู่มันอยู่ไหน

ไม่มีหลงปีกกาแล้ว

5. Angular Language Service

มาถึงตัวสุดท้าย ผมยกให้มันเป็นตัวพ่อเลย เพราะมันสามารถช่วยเตือนและสามารถลิงก์จาก template ไปที่ component.ts เราได้เลยสะดวกมากๆ

ถ้า template หาตัวแปรหรือฟังก์ชั่นไม่เจอ เตือนให้ได้เลย

แถม อีกซักนิดครับ (เพราะต้องแวะมาแก้พิมพ์ผิด ขอบคุณ ArM ( -/\-) )

ถ. EditorConfig for VS Code — เป็นตัวช่วยตบให้โค้ดเราเนียนๆ

เคาะเกิน ลืมว่าต้อง end with a newline ลงตัวนี้เซฟที่เดียวเนียบกริ๊บ

ถ2. background — เพิ่มความมุ๊งมิ๊งในการทำงาน

มีคนแอบดูเราโค้ดอยู่ ><~

สรุป

ตัว vscode เองยังมี extension ที่น่าสนใจอีกหลายตัวครับ (หลายตัวผมยังใช้ไม่เป็น :P) ส่วนใครที่แรมเหลือผมแนะนำชุด Happy meal (Angular Essentials extension pack for VS Code) ของคุณ John Papa ครับ ตัวเดียวมันจะลาก extension ที่คุณ John Papa คิดว่าดีมาให้อัตโนมัติเลย สะดวกและครบเครื่องดีเลยทีเดียว

จบครับ (-/\-)