แนะนำ Plugins พื้นฐานสำหรับ VS Code

ณ ตอนนี้หากพูดถึง editor ที่กำลังมาแรงเลย อันดับแรก ๆ ก็คงต้องเป็น VS Code จากทาง Microsoft นี่แหละครับ เพราะเป็น opensource editor ที่รวมความเจ๋ง ของ editor อื่น ๆ มาไว้รวมกัน และที่สำคัญคือให้ใช้ฟรีด้วยครับ

และด้วยความเป็น editor ยุคใหม่จึงเปิด Marketplace ให้นักพัฒนาทั่วโลกผลิต Plugins หรือ Extensions ดี ๆ มาให้เราใช้กันอีกด้วย สำหรับบทความนี้ขอรวบรวม Plugins ที่ตัวผมเองใช้บ่อย ๆ มาให้ครับ หากต้องการติดตั้งก็แค่คลิกที่ไอคอน Extensions แล้ว Search หา Extenstions ที่เราต้องการได้เลยครับ

vscode-icons

ของ Roberto Huertas

ปลั๊กอินนี้จะแสดงไอคอนให้ตรงกับชื่อโฟลเดอร์และชนิดของไฟล์ให้เราดูง่าย ๆ ครับ

Rainbow Brackets

ของ 2gua

ปลั๊กอินตัวนี้ไม่มีอะไรมาก คือช่วยแยกสีวงเล็บให้ดูง่ายๆ ครับ เวลาเขียน functions ที่ชับซ้อนมาก ๆ เจ้านี้จะมีความสำคัญมากเลยครับ

VSCode Faker

ของ Budi Irawan

ตัวช่วยสุ่มคำตามประเภทที่เราต้องการ เช่น ชื่อ, ที่อยู่, เบอร์โทร, อีเมล, Lorem เป็นต้น และแต่ละประเภทจะมีตัวเลือกย่อยๆ ให้อีก ใช้งานด้วยคีย์ลัด cmd+shift+p และพิมพ์ faker : …

Prettier — Code formatter

ของ Esben Petersen

เป็นตัวจัด code อัตโนมัติ รองรับทั้ง JavaScript และ CSS ใช้คีย์ลัด cmd+shift+p แล้วพิมพ์คำสั่ง Format Document

Color Info

ของ Matt Bierner

ไว้สำหรับเลือกสี หรือดูรหัสสีเช่น rgb, hsl, hex, cmyk และอื่นๆ วิธีใช้ง่ายมากแค่เอาเมาส์ไปชี้ที่รหัสสีนั้นมันก็จะแสดงข้อมูลรหัสสีที่มีให้เราดูแล้ว

Icon Fonts

ของ idleberg

ตัวช่วยดึงชื่อ class ของไอคอนที่เราต้องการ รองรับชุดไอคอนดัง ๆ หลายตัวเลย เช่น Font Awesome, Ionicons, Glyphicons, and Material Design Icons.

minify

ของ HookyQR

ใช้สำหรับลดขนาดไฟล์โดยการ export ออกมาเป็น .min เพื่อช่วยลดขนาด bandwidth ของเว็บเราครับ ใช้ได้ทั้งไฟล์ JavaScript และ CSS ครับ

change-case

ของ wmaurer

เคยมั้ยที่เวลาเราต้องการจะเปลี่ยนชื่อตัวแปลจาก foo_bar เป็น fooBar ปลั๊กอินตัวนี้คือทางออกครับ เราสามารถเปลี่ยนชื่อตัวแปลได้หลายแบบเลย เช่น constant, camel, snake

ใครมีตัวไหนแนะนำเพิ่มเติมคอมเม้นท์ไว้ด้านล่างนะครับ :)

Originally published at ideagital.com.