20 Plugins ที่คุณควรมีใน VSCode เพื่อเพิ่มประสิทธิภาพในการพัฒนา

20 Plugins ที่คุณควรมีใน VSCode เพื่อเพิ่มประสิทธิภาพในการพัฒนา

1. ESLint

ESLint เป็นปลั๊กอินที่ช่วยตรวจจับและแก้ไขข้อผิดพลาดในโค้ด JavaScript และ TypeScript โดยช่วยให้โค้ดของคุณเป็นระเบียบและปฏิบัติตามมาตรฐานการเขียน ลดความผิดพลาดที่อาจเกิดขึ้นระหว่างการพัฒนา

2. Prettier

Prettier ช่วยจัดระเบียบโค้ดให้อ่านง่าย โดยจัดรูปแบบโค้ดโดยอัตโนมัติ ไม่ว่าคุณจะเขียน JavaScript, CSS, HTML หรือภาษาอื่น ๆ เพียงบันทึกไฟล์ ทุกอย่างจะถูกจัดเรียงอย่างเรียบร้อย

3. GitLens

GitLens ช่วยให้คุณสามารถดูการเปลี่ยนแปลงของไฟล์ใน repository ได้อย่างละเอียด สามารถเห็นได้ว่าใครเปลี่ยนแปลงบรรทัดไหน เมื่อไร รวมถึงประวัติการ commit ทำให้การใช้ Git ใน VSCode มีประสิทธิภาพมากขึ้น

4. Live Server

Live Server ให้คุณดูการเปลี่ยนแปลงของโค้ดแบบเรียลไทม์ เพียงแค่บันทึกไฟล์หน้าเว็บจะถูกรีเฟรชอัตโนมัติ เหมาะสำหรับการพัฒนาเว็บแบบ front-end

5. Docker

Docker ช่วยให้คุณสามารถจัดการ container และ images ภายใน VSCode โดยไม่ต้องออกไปใช้ command line สะดวกสำหรับนักพัฒนาที่ใช้ Docker ในการจัดการ environment

6. Path Intellisense

Path Intellisense ช่วยแนะนำเส้นทางของไฟล์เมื่อคุณทำการ import หรือ require โดยจะ autocomplete เส้นทางของไฟล์หรือโฟลเดอร์ ช่วยลดความผิดพลาดในการพิมพ์และเพิ่มความเร็วในการพัฒนา

7. Settings Sync

Settings Sync ช่วยให้คุณซิงค์การตั้งค่าและปลั๊กอินของ VSCode ข้ามหลายอุปกรณ์ เพียงแค่เข้าสู่ระบบด้วยบัญชี GitHub ทุกอย่างจะถูกซิงค์ให้ตรงกัน

8. IntelliCode

IntelliCode เป็น AI ที่ช่วยแนะนำโค้ดอัจฉริยะโดยเรียนรู้จากโค้ดที่คุณเขียนและโปรเจ็กต์อื่น ๆ ที่คล้ายคลึงกัน ช่วยให้การเขียนโค้ดเร็วขึ้นและแม่นยำยิ่งขึ้น

9. Rainbow Brackets

Rainbow Brackets ช่วยไฮไลต์วงเล็บในโค้ดที่ซ้อนกันหลายชั้นด้วยสีที่แตกต่างกัน ทำให้อ่านและจัดการบล็อกโค้ดได้ง่ายขึ้น

10. Code Spell Checker

Code Spell Checker ช่วยตรวจสอบการสะกดคำในโค้ดของคุณ รวมถึงใน comments และ strings เพื่อป้องกันความผิดพลาดในการสะกดคำ

11. Auto Rename Tag

Auto Rename Tag ทำงานได้ดีสำหรับการพัฒนาเว็บ เมื่อคุณแก้ไขชื่อแท็ก HTML หรือ XML มันจะช่วยแก้ไขชื่อแท็กปิด (closing tag) ให้ตรงกับชื่อแท็กเปิด (opening tag) โดยอัตโนมัติ ช่วยลดข้อผิดพลาดในการเขียนโค้ด

12. Import Cost

Import Cost จะแสดงขนาดของ package ที่คุณ import ในโค้ด ช่วยให้คุณรู้ทันทีว่าการ import library ขนาดใหญ่มีผลต่อขนาดของไฟล์โค้ดอย่างไร ทำให้คุณตัดสินใจได้ว่าจะใช้ library นั้นหรือไม่

13. Tabnine

Tabnine ใช้ AI ในการแนะนำโค้ดอัจฉริยะ มันจะเรียนรู้จากโค้ดที่คุณเขียน และแนะนำโค้ดที่คุณต้องการต่อไปอย่างแม่นยำและรวดเร็ว ลดเวลาในการพิมพ์ลงอย่างมาก

14. Project Manager

Project Manager ช่วยให้คุณจัดการโปรเจ็กต์หลาย ๆ โปรเจ็กต์ได้ง่ายขึ้น ไม่ต้องเปิดโฟลเดอร์ด้วยตนเองทุกครั้ง คุณสามารถสลับไปมาระหว่างโปรเจ็กต์ใน VSCode ได้อย่างรวดเร็ว

15. Debugger for Chrome

Debugger for Chrome ช่วยให้คุณสามารถ debug โค้ด JavaScript โดยตรงจาก Chrome ภายใน VSCode คุณสามารถตั้ง breakpoints และดูค่าตัวแปรในขณะที่เบราว์เซอร์กำลังทำงาน

16. Markdown All in One

Markdown All in One เป็นเครื่องมือที่ช่วยให้การเขียน Markdown ง่ายและสะดวกขึ้น ไม่ว่าจะเป็นการจัด format การแสดงผล preview หรือการสร้างตารางเนื้อหา (Table of Contents)

17. Codeium: AI Coding

Codeium เป็นอีกหนึ่ง AI ที่ช่วยในการเขียนโค้ด มันสามารถเดาโค้ดที่คุณต้องการเขียนต่อได้จากสิ่งที่คุณพิมพ์ไว้ ช่วยลดเวลาการพิมพ์และเพิ่มความแม่นยำ

18. Peacock

Peacock ช่วยเปลี่ยนสีธีมของ workspace ใน VSCode ตามโปรเจ็กต์ที่คุณกำลังทำอยู่ ทำให้คุณไม่สับสนเมื่อทำงานกับหลายโปรเจ็กต์ในเวลาเดียวกัน

19. Auto Close Tag

Auto Close Tag ช่วยปิดแท็ก HTML หรือ XML โดยอัตโนมัติเมื่อคุณพิมพ์แท็กเปิด มันจะช่วยลดข้อผิดพลาดและทำให้การเขียนโค้ดเร็วขึ้น

20. Jest

Jest เป็นเครื่องมือที่ช่วยในการเขียน unit tests สำหรับ JavaScript และ TypeScript มันจะช่วยให้คุณเขียนและทดสอบโค้ดได้อย่างรวดเร็วและมีประสิทธิภาพ

1. ESLint

ESLint เป็นปลั๊กอินที่ช่วยตรวจสอบโค้ด JavaScript และ TypeScript เพื่อค้นหาข้อผิดพลาดหรือการละเมิดกฎระเบียบการเขียนโค้ดโดยอัตโนมัติ มันสามารถช่วยให้โค้ดของคุณเป็นระเบียบ ปราศจากข้อผิดพลาด และเป็นไปตามมาตรฐานที่คุณกำหนดได้ ซึ่งช่วยลดปัญหาที่อาจเกิดขึ้นในโค้ดเบสของคุณ

2. Prettier

Prettier เป็นตัวช่วยจัดระเบียบโค้ดให้ดูสวยงามและเป็นระเบียบอัตโนมัติ คุณไม่จำเป็นต้องจัดบรรทัดหรือใส่เว้นวรรคด้วยตัวเอง ทุกอย่างจะถูกจัดเรียงให้เรียบร้อยเมื่อคุณบันทึกไฟล์ การตั้งค่ายังสามารถกำหนดได้ตามสไตล์ที่คุณชอบ เช่น เว้นวรรค 2 หรือ 4 ช่อง เป็นต้น

3. GitLens

GitLens ทำให้การใช้ Git ภายใน VSCode ง่ายขึ้นอย่างมาก คุณสามารถเห็นการเปลี่ยนแปลงของไฟล์ย้อนหลัง เช่น ใครเป็นคนแก้ไขบรรทัดไหน และการเปลี่ยนแปลงนั้นเกิดขึ้นเมื่อใด รวมถึงประวัติ commit และข้อมูลเชิงลึกอื่น ๆ เกี่ยวกับ repository ของคุณ

4. Live Server

Live Server ช่วยให้คุณสามารถดูการเปลี่ยนแปลงของโค้ดบนเว็บเบราว์เซอร์แบบเรียลไทม์ เพียงแค่คุณบันทึกไฟล์ HTML, CSS หรือ JavaScript หน้าเว็บของคุณจะถูกรีเฟรชอัตโนมัติ ช่วยลดเวลาที่คุณต้องทำงานด้วยตนเอง และทำให้การพัฒนาเว็บไวขึ้นมาก

5. Docker

Docker เป็นปลั๊กอินที่ช่วยให้คุณจัดการ container, images, และ networks ภายใน Docker ได้อย่างสะดวกสบาย คุณสามารถเปิด ปิด และติดตามสถานะของ containers ทั้งหมดของคุณโดยไม่ต้องออกจาก VSCode ซึ่งเหมาะมากสำหรับ DevOps และนักพัฒนา

6. Bracket Pair Colorizer

Bracket Pair Colorizer ช่วยให้การอ่านโค้ดที่มีวงเล็บซ้อนกันหลายชั้นง่ายขึ้น โดยจะทำการไฮไลต์วงเล็บที่จับคู่กันด้วยสีที่แตกต่างกัน ทำให้คุณมองเห็นจุดเริ่มและจุดสิ้นสุดของบล็อกโค้ดได้ง่ายและชัดเจน

7. Path Intellisense

Path Intellisense เป็นปลั๊กอินที่ช่วยแนะนำเส้นทางของไฟล์และโฟลเดอร์เมื่อคุณทำการ import หรือ require โค้ด ซึ่งจะช่วยลดเวลาการพิมพ์และลดข้อผิดพลาดจากการพิมพ์ชื่อไฟล์หรือโฟลเดอร์ผิด

8. Settings Sync

Settings Sync ให้คุณสามารถซิงค์การตั้งค่าของ VSCode ข้ามหลายเครื่องได้อย่างง่ายดาย ไม่ว่าคุณจะใช้งาน VSCode บนคอมพิวเตอร์หลายเครื่องหรือแพลตฟอร์มหลายแพลตฟอร์ม การตั้งค่า โค้ด snippets และ extensions ทั้งหมดจะถูกซิงค์ไว้ด้วยกัน

9. IntelliCode

IntelliCode เป็น AI ที่ช่วยแนะนำโค้ดให้คุณได้อย่างชาญฉลาดตามสไตล์การเขียนโค้ดของคุณและจากการเรียนรู้โค้ดเบสของโครงการอื่น ๆ ที่คล้ายคลึงกัน ปลั๊กอินนี้จะช่วยให้คุณเขียนโค้ดได้เร็วขึ้นและแม่นยำขึ้น

10. Rainbow Brackets

Rainbow Brackets ทำงานคล้าย ๆ กับ Bracket Pair Colorizer แต่เน้นการแยกวงเล็บด้วยสีสันที่หลากหลาย โดยจะทำให้คุณสามารถแยกแยะและจัดการกับวงเล็บที่ซ้อนกันเยอะ ๆ ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น

11. Code Spell Checker

Code Spell Checker เป็นปลั๊กอินที่ช่วยตรวจสอบการสะกดคำในโค้ดของคุณ ไม่ว่าจะเป็นใน comments หรือใน strings มันจะช่วยป้องกันการสะกดคำผิดที่อาจส่งผลต่อความเข้าใจของผู้อ่านหรือทำให้โค้ดผิดพลาดโดยไม่ได้ตั้งใจ

12. Tabnine

Tabnine เป็นปลั๊กอินที่ใช้ AI เพื่อช่วยในการเขียนโค้ดด้วยการแนะนำคำที่คุณต้องการพิมพ์ Tabnine จะเรียนรู้จากโค้ดที่คุณเขียนและแนะนำสิ่งที่มันคิดว่าคุณต้องการ ซึ่งช่วยประหยัดเวลาและทำให้การเขียนโค้ดเร็วขึ้นมาก

13. Peacock

Peacock เป็นปลั๊กอินที่ช่วยให้คุณเปลี่ยนสีของ VSCode workspace ตามโปรเจ็กต์ที่คุณกำลังทำงานอยู่ มันจะช่วยให้คุณไม่สับสนเมื่อทำงานกับหลายโปรเจ็กต์พร้อมกัน เพราะคุณสามารถระบุสีให้โปรเจ็กต์แต่ละโปรเจ็กต์แตกต่างกันได้

14. Debugger for Chrome

Debugger for Chrome ช่วยให้คุณสามารถ debug โค้ด JavaScript บน Chrome โดยตรงจาก VSCode คุณสามารถตั้ง breakpoints, ตรวจสอบค่าตัวแปร, และดูขั้นตอนการทำงานของโค้ดในขณะที่เบราว์เซอร์ทำงานได้อย่างง่ายดาย

15. Markdown All in One

Markdown All in One เป็นปลั๊กอินที่ทำให้การเขียน Markdown ใน VSCode ง่ายและสะดวกมากขึ้น มันมีฟีเจอร์ต่าง ๆ เช่น การแสดง preview ของ Markdown การสร้าง TOC (Table of Contents) อัตโนมัติ และการจัดการ format ของ Markdown ที่ครบครันในตัวเดียว

Read more

การทำ Data Migration และ Seeder: คู่มือสำหรับ Developer

การทำ Data Migration และ Seeder: คู่มือสำหรับ Developer

ถ้าพูดถึงการพัฒนาแอปพลิเคชันที่เชื่อมต่อกับ Database หนึ่งในความยุ่งยากที่สุดคือการจัดการ Database structure ที่เปลี่ยนไปตามฟีเจอร์ใหม่ๆ ที่เพิ่มเข้ามา เช่น เพิ่มตาราง (Table) เปลี่ยนชนิดข้อมูล (Data type) หรือลบฟิลด์ (Field) ออกไป และแน่นอนว่

By maimem
เช็ค Internet จากเว็บ: ทำยังไงให้รู้ว่าออกเน็ตได้จริง?

เช็ค Internet จากเว็บ: ทำยังไงให้รู้ว่าออกเน็ตได้จริง?

เคยเจอไหมครับ เวลาใช้งานเว็บไซต์แล้วอยู่ดี ๆ ก็โหลดข้อมูลไม่ได้ หรือ API เงียบหายไม่มีการตอบกลับ? หลายครั้งเรามักสงสัยว่า "ตกลงปัญหาอยู่ที่ตัวเรา เซิร์ฟเวอร์ หรือ Internet กันแน่?" วันนี้ผมจะมาเล่าเรื่อง "การตรวจสอบสถานะการเชื่อมต่

By maimem
Rust Series #2 - รู้จัก Cargo: ผู้ช่วยส่วนตัวของโปรเจกต์ Rust!

Rust Series #2 - รู้จัก Cargo: ผู้ช่วยส่วนตัวของโปรเจกต์ Rust!

ถ้าคุณเริ่มต้นเขียน Rust แล้วรู้สึกว่า “เฮ้ย! Rust เจ๋งแหะ” ก็ขอแสดงความยินดีครับ คุณเพิ่งเจอเพื่อนแท้ในโลกโปรแกรมมิ่ง! แต่เดี๋ยวก่อน... ถ้าต้องเขียนโค้ดโปรเจกต์ใหญ่ ๆ บริหารไลบรารี ดูแลไฟล์ต่าง ๆ หรือทดสอบโค้ดทุกวั

By maimem
ซ่อน Credential ใน AWS CodeBuild ให้ปลอดภัยด้วย Parameter Store

ซ่อน Credential ใน AWS CodeBuild ให้ปลอดภัยด้วย Parameter Store

ทำไมต้องซ่อน Credential? ในโลกของ DevOps และ Cloud Computing การจัดการ Credential (ข้อมูลรับรอง เช่น API Keys, Passwords, หรือ Secrets ต่างๆ) เป็นเรื่องที่สำคัญอย่างยิ่ง เพราะ Credential เปรียบเสมือนกุญแจที่เปิดประตูไปสู่ทรัพยากรสำคัญในระบบ เช่น ฐานข้อมูล

By maimem