แต่งหน้า VSCode แบบแอดว้านซ์ด้วย CSS

Manassarn Manoonchai
3 min readMar 12, 2022

--

VSCode (Visual Studio Code) เป็นโปรแกรม Text Editor/IDE ที่ได้รับความนิยมมาก และมี Theme เยอะแยะมากมายให้เลือกใช้งาน เพราะระบบ Extensions ทำให้คนสร้าง Theme แบบ Opensource มาแจกจ่ายกันใน Marketplace ได้

VSCode มี Theme เยอะมาก

ตัวโค้ดของ Theme ส่วนใหญ่จะเป็นแค่การปรับสีของ Background, Font หรือ Syntax ของโค้ดในภาษาต่างๆ

Theme JSON setting

แต่เนื่องจาก VSCode นั้นสร้างด้วย Electron ที่เป็น Web-based และใช้ JavaScript/TypeScript, HTML และ CSS เลยมีคนหัวใสเขียน Extension ชื่อว่า Customize UI ขึ้นมา เพื่อที่จะปรับหน้าตาของ VSCode ทั้งโปรแกรมได้ด้วย CSS Hacks

Customize UI Extension

เมื่อติดตั้งตัว Extension แล้วจะมีการให้ Enable Monkey Patch ให้กดตกลง และ Restart VSCode หนึ่งรอบ

Enable Monkey Patch

หลังจากนั้นเรามาลองดูกัน ว่าตัว Customize UI นี้สามารถปรับแต่งอะไรได้บ้าง โดยทำการเปิด Settings ของ VSCode ขึ้นมาแล้วค้นหาว่า Customize UI

Customize UI Settings

Customize Activity Bar คือการย้ายตัวไอคอนต่างๆ ที่ปกติจะอยู่ทางซ้ายมือ ให้ไปอยู่ด้านบนหรือล่างได้

Activity Bar ไปอยู่ด้านบนแล้ว

Font: Monospace/Regular และ List Row Height คือการปรับ Font ของ UI (ปกติจะปรับได้เฉพาะในตัว Code Editor) และทำให้แต่ละแถวของ List สูงขึ้นหรือแคบลงได้

เปลี่ยน UI Font เป็น Fantasque Mono และความสูงของ File List เป็น 17px
Font เปลี่ยนและ List ชิดกันมากขึ้น

Title Bar (macOS) ทำให้ซ่อนตัว Traffic light frame ที่มีปุ่มปิดหรือย่อหน้าต่างได้

ตัวหน้าต่างจะไม่มี Title Bar ด้านบนแล้ว

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 ออกมา

Inspect Element เหมือนกับทำบน Web Browser

เมื่อได้หน้าตาเป็นที่พอใจแล้วให้ทำการเปิด 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 สวยๆ แชร์กันได้นะ 😃

หากชอบบทความแบบนี้ช่วยกด 👏👏👏 ให้กำลังใจได้นะครับ แล้วเจอกันใหม่บทความหน้า

--

--