แต่งหน้า VSCode แบบแอดว้านซ์ด้วย CSS
VSCode (Visual Studio Code) เป็นโปรแกรม Text Editor/IDE ที่ได้รับความนิยมมาก และมี Theme เยอะแยะมากมายให้เลือกใช้งาน เพราะระบบ Extensions ทำให้คนสร้าง Theme แบบ Opensource มาแจกจ่ายกันใน Marketplace ได้
ตัวโค้ดของ Theme ส่วนใหญ่จะเป็นแค่การปรับสีของ Background, Font หรือ Syntax ของโค้ดในภาษาต่างๆ
แต่เนื่องจาก VSCode นั้นสร้างด้วย Electron ที่เป็น Web-based และใช้ JavaScript/TypeScript, HTML และ CSS เลยมีคนหัวใสเขียน Extension ชื่อว่า Customize UI ขึ้นมา เพื่อที่จะปรับหน้าตาของ VSCode ทั้งโปรแกรมได้ด้วย CSS Hacks
เมื่อติดตั้งตัว Extension แล้วจะมีการให้ Enable Monkey Patch ให้กดตกลง และ Restart VSCode หนึ่งรอบ
หลังจากนั้นเรามาลองดูกัน ว่าตัว Customize UI นี้สามารถปรับแต่งอะไรได้บ้าง โดยทำการเปิด Settings ของ VSCode ขึ้นมาแล้วค้นหาว่า Customize UI
Customize Activity Bar คือการย้ายตัวไอคอนต่างๆ ที่ปกติจะอยู่ทางซ้ายมือ ให้ไปอยู่ด้านบนหรือล่างได้
Font: Monospace/Regular และ List Row Height คือการปรับ Font ของ UI (ปกติจะปรับได้เฉพาะในตัว Code Editor) และทำให้แต่ละแถวของ List สูงขึ้นหรือแคบลงได้
Title Bar (macOS) ทำให้ซ่อนตัว Traffic light frame ที่มีปุ่มปิดหรือย่อหน้าต่างได้
Stylesheet ตัวนี้ทีเด็ดที่สุด เพราะว่าเป็นการแก้ CSS ของ Editor โดยตรง แต่ว่าต้องมีความรู้ CSS มาบ้าง ถึงจะทำได้
การหา CSS Selector สามารถทำได้ด้วยการเปิด Dev Tools ของ VSCode เอง ด้วยการเปิด Command Palette (Cmd+Shift+P หรือ Ctrl+Shift+P) แล้วค้นหา Developer: Toggle Developer Tools
เมื่อเปิดขึ้นมาแล้วก็ทำการ Inspect Element แล้วทดลองแก้ Style หรือ Copy Path ออกมา
เมื่อได้หน้าตาเป็นที่พอใจแล้วให้ทำการเปิด Settings JSON Preferences: Settings (JSON) ขึ้นมาเพิ่มค่าใน "customizeUI.stylesheet"
เมื่อเซฟแล้วตัว VSCode จะมีการขอให้ Reload โปรแกรมหนึ่งครั้งเพื่อ Apply Stylesheet ของเรา เป็นอันเสร็จเรียบร้อย
หมายเหตุ: ถ้าตัว VSCode มีการอัพเดทเวอร์ชั่น จะมีการเตือนให้ Enable Monkey Patch ใหม่ทุกครั้ง
ตัว Customize UI ยังมี Setting อื่นๆ อีก วิธีใช้สามารถดูได้บน Github
แต่ถ้าหากไม่อยากเสียเวลาเยอะ ลอกการบ้านไปได้เลย ที่ Gist นี้ (VSCode Theme ใช้ SynthWave ‘84)
ใครมีทริค CSS เด็ดๆ หรือ VSCode Theme สวยๆ แชร์กันได้นะ 😃
หากชอบบทความแบบนี้ช่วยกด 👏👏👏 ให้กำลังใจได้นะครับ แล้วเจอกันใหม่บทความหน้า
