วิธีเปลี่ยนสีเน้นคำที่เลือกใน Visual Studio Code

แนะนำวิธีปรับแต่งสี Highlight ของคำที่เลือกใน Visual Studio Code ให้แสดงผลชัดเจนขึ้น โดยใช้ workbench.colorCustomizations ใน Settings

ศิริชัย ธีรภัทรสกุล (ตั้ม)อ่าน 2 นาที14 กันยายน 2560

เพิ่งเริ่มใช้ Visual Studio Code ได้ไม่นาน ก็มีสิ่งที่ต้องการเล็กน้อย เพราะอาจจะเคยชินใน Sublime นั่นคือเวลาเรานำเมาส์ไปชี้ที่คำไหน มันก็จะทำการไฮไลท์ (Highlight) ให้เรา ซึ่งใน Sublime จะเห็นชัดว่ามีคำไหนบ้าง

แต่พอมาใช้ Visual Studio Code เราได้ Theme ที่ใช่แล้วแต่สีการเน้นคำมันค่อนข้างจมหรือกลืนไปกับพื้นหลัง มองไม่ค่อยชัด

ด้วยเหตุนี้จึงต้องใช้การตั้งค่าเปลี่ยนสีไฮไลท์ใหม่ใน Visual Studio Code มาดูวิธีกันเลยดังนี้ครับ

วิธีเปลี่ยนสี Highlight

ให้เข้าไปที่เมนู Settings (Cmd + , บน Mac หรือ Ctrl + , บน Windows)
จะแสดงแท็บ User Settings และให้ดูหน้าต่างด้านขวาจะมีให้เราตั้งค่าของตัวเองได้เป็น JSON
ให้เราเพิ่มค่าดังนี้:

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#6891E2",
    "editor.selectionHighlightBackground": "#4B5476"
}

editor.selectionBackground — กำหนดสีไฮไลท์เมื่อเราเลือกคำนั้น
editor.selectionHighlightBackground — กำหนดสีไฮไลท์ทุกคำที่เหมือนกับที่เราเลือก

เมื่อเพิ่มค่าแล้ว พอเราเลือกคำก็จะแสดงไฮไลท์จากสีที่เรากำหนดไว้

ในส่วน Settings นี้ก็เปลี่ยนอะไรได้หลายอย่างนะครับ อันนี้ก็ลองไปปรับแต่งกันดู และหวังว่าบทความนี้คงเป็นประโยชน์เล็กๆน้อยๆ สำหรับการใช้งาน Visual Studio Code นะครับ