การปรับแต่งหน้าตา VSCode ให้ใช้ง่ายขึ้น

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

เปลี่ยนสีสำหรับ VSCode Workspace

เราสามารถใช้ VSCode Extension ที่ชื่อ Peacock ในการเปลี่ยนสีของ Workspace ให้เป็นสีต่างๆแยกตามหน้าของ VSCode ได้ เหมาะสำหรับคนที่ต้องเปิด VSCoe ในหลายๆโปรเจ็คพร้อมกันก็จะช่วยให้แยกแยะโปรเจ็คต่างๆได้ง่ายขึ้น
Image: github

เปลี่ยนสีพื้นหลังของ Active Tab

ใน Theme โดยเฉพาะที่เป็น Dark mode สีพื้นหลังของ Active Tab หรือ Tab ที่เรากำลังใช้งานอยู่อาจจะมองค่อนข้างยาก โดยเฉพาะคนที่อายุมากหน่อย เราสามารถปรับแต่งสีตรงนี้ให้เด่นขึ้นได้ (โดยไม่ต้องติดตั้ง extension เพิ่ม) ด้วยขั้นตอนดังนี้

ไปที่ command pallet ด้วยการกดปุ่ม CMD/CTRL + SHIFT + P แล้วเลือก Open Settings (JSON) จากนั้นก็ให้เพิ่มโค้ดด้านล่างนี้เข้าไป

"workbench.colorCustomizations": {
        "tab.activeBackground": "#525252",
    }

จากนั้น สีฉากหลังของ Tab ที่กำลังใช้งานก็จะเด่นขึ้นตามรูปครับ (เปลี่ยนสีได้ตามต้องการ)

เน้นสีบรรทัดที่กำลังทำงานอยู่

ปกติ cursor จะกระพริบตรงบรรทัดที่กำลังทำงานอยู่ แต่บางครั้งถ้าทำงานกับ code ที่หน้าจอดู cursor ค่อนข้างยาก Extension ที่ชื่อ Highlight Line ตัวนี้จะช่วยได้มาก โดยมันจะขีดเส้นใต้บรรทัดที่เรากำลังทำงานอยู่ ทำให้เราเห็นบรรทัดที่กำลังทำงานได้ชัดเจนขึ้น
Image: visualstudio marketplace

เลือกใช้ Theme ที่เหมาะสม

(update 4 May, 2021)

เรื่องของธีมอาจเป็นความชอบหรือความสบายตาส่วนบุคคล แต่โพสต์นี้จะขอแนะนำธีมนึงให้ลองใช้ ชื่อว่า SynthWave ‘ 84 ซึ่งจุดเด่นของมัน นอกจากจะได้สีสันย้อนยุคไปยุค 80 แล้ว ธีมนี้ยังสามารถเปิดใช้งานการทำ syntax highlight แบบเรืองแสงหรือ Neon ได้ ลองดูตามรูปด้านล่างได้ครับ หากสนใจก็ลองหามาติดตั้งกันได้ครับ https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

ส่งท้าย

Visual Studio Code เป็น IDE ยอดนิยมที่สามารถขยายความสามารถได้ด้วยการติดตั้ง Extension เพิ่มเติม หากเราเลือกใช้ Extension ที่เหมาะสมก็จะทำให้เราใช้งานโปรแกรมนี้ได้อย่างมีประสิทธิภาพมากขึ้น