แต่ง VS Code ให้น่าใช้ (ภาคฟ้อนต์)

Multiple fonts in VS Code

VS Code with Fira Code

ภาคต่อสำหรับการแต่งฟ้อนต์ใน VS Code แบบใช้งานจริง ที่นี่

ถ้ากล่าวถึงการใช้งาน VS Code สิ่งที่ไม่สามารถหลีกเลี่ยงได้คือการเขียนโค้ด ซึ่งการเลือกใช้ฟ้อนต์มาแสดงผลนั้นก็จะแตกต่างกันไปตามความชื่นชอบของแต่ละคน

Fira Code + Victor Mono

เมื่อได้เห็นตัวอย่างโค้ดของคนอื่นที่มีการฟ้อนต์มากกว่า 1 ฟ้อนต์ใน VS Code ทำให้ได้ลองค้นหาวิธีปรับแต่งใน Google เพื่อมาปรับ VS Code ของเราให้น่าใช้มากยิ่งขึ้นดูบ้าง

การปรับแต่งการแสดงผลให้สวยงาม ไม่ได้มีผลต่อประสิทธิภาพการทำงานแต่อย่างใด เพียงแต่เพิ่มความ Cool ตอนโชว์เพื่อนเท่านั้น

รอช้าอยู่ใย

เปิด VS Code ขึ้นมาแล้วติดตั้ง extension ที่ชื่อว่า Custom CSS and JS Loader

Custom CSS and JS Loader extension

ตัวอย่างในบทความนี้จะมีการใช้ฟ้อนต์ด้วยกัน 2 ฟ้อนต์ คือ

1. Fira Code
2. Victor Mono

กำหนดค่าใน settings.json

Example config in settings.json

1. editor.fontFamily เป็นการกำหนด default font ที่ใช้งาน
2. vscode_custom_css.imports เป็นการกำหนด path ของ custom CSS ที่เราได้จะกำหนดค่าให้ใหม่

!!! Important

Windows : รูปแบบการกำหนด path เป็นดังนี้

file:///C:/Users/Karn/Documents/vscode_styles.css

MacOS และ Linux รูปแบบการกำหนด path เป็นดังนี้

file:///Users/Karn/Documents/vscode_styles.css

Custom Styles

หลังจากที่ได้กำหนด path ของไฟล์เรียบร้อยแล้ว ทีนี้ก็มาสร้างไฟล์ vscode_styles.css โดยกำหนด styles ที่จะให้มีการแสดงโดยใช้ฟ้อนต์ Victor Mono ตามโค้ดด้านล่าง

.mtk3,
.mtk4,
.mtk13,
.mtk16 {
   margin-left: 1px;
   font-family: “Victor Mono”;
}

🧨 สำหรับ css classnameจะแตกต่างกันออกไปขึ้นอยู่กับว่าเราใช้ theme อะไร ต้องตามไปดูที่ด้านล่างนะครับว่าเราจะรู้ได้ยังไงว่าจะกำหนด css classname ชื่ออะไร

Enable Extension

เปิดใช้งาน extension โดยกดปุ่ม F1 และพิมพ์คำสั่ง Enable Custom CSS and JS

!!! Important

Windows : การเปิด/ปิดการใช้งาน Custom CSS and JS Loader นั้นจะต้องใช้สิทธิ Administrator

MacOS และ Linux สามารถกำหนดสิทธิให้กับผู้ใช้งานได้ โดยใช้คำสั่งต่อไปนี้

sudo chown -R $(whoami) <Path To Code>

<Path To Code>

MacOS: /Applications/Visual Studio Code.app/Contents/MacOS/Electron
Linux: /usr/share/code

Restart VS Code

เมื่อติดตั้ง และกำหนดค่าต่างๆ เรียบร้อยก็ถึงเวลาทดสอบการแสดงผล โดยการรีสตาร์ท VS Code และเปิดโค้ดของเราขึ้นมา จากนั้นจะเห็นว่าโค้ดของเรามีการแสดงผลโดยใช้ทั้งฟ้อนต์ Fira Code และ Victor Mono อย่างที่ต้องการ

ทดสอบการแสดงผลฟ้อนต์ หลังจากติดตั้งเรียบร้อย

กรณีที่มีการแก้ไข vscode_styles.css เราจะต้องทำการ reload สไตล์ใหม่อีกรอบโดยกดปุ่ม F1 และพิมพ์คำสั่ง Reload Custom CSS and JS

หา CSS Class ที่จะปรับเปลี่ยนฟ้อนต์

จาก CSS ข้างต้นจะเห็นว่ามีการกำหนด CSS ของ .mtk3, .mtk4, .mtk13, .mtk16 แล้วจะรู้ได้อย่างไรว่าแต่ละ class มันคือ tag ส่วนไหนบ้าง ซึ่งวิธีการที่จะรู้ได้นั้นก็ง่ายเพียงนิดเดียวก็คือ เปิด Development Tools ขึ้นมา

ทั้งนี้เราสามารถทำการเปิด Development Tools โดยเข้าไปที่เมนู Help → Toggle Development Tools

เปิด Development Tools และหา CSS Class ที่ใช้

เอ๊ะ [Unsupported] บน Title Bar

สิ่งหนึ่งที่แปลกๆ ไปหลังเปิดใช้ Custom CSS and JS Loader ก็คือจะมีข้อความ [Unsupported] ปรากฏขึ้นมาที่ Title Bar ของ VS Code ตลอดเวลา (ดูแล้วมันชั่งน่ารำคาญจริงๆ)

ทั้งนี้สาเหตุที่ข้อความดังกล่าวปรากฏขึ้นมาน่าจะมาจากที่ extension ได้มีการแก้ไขไฟล์บางส่วนใน VS Code เมื่อมีการกำหนดสไตล์เพิ่มเติมเข้าไป ทำให้ checksum ที่ออกมาไม่ถูกต้อง

แต่ไม่ต้องกังวลแต่อย่างใด เราสามารถนำข้อความ [Unsupported] ออกจาก Title Bar ได้ เพียงแค่ทำการติดตั้ง extension ที่ชื่อ Fix VSCode Checksums และรันคำสั่ง Fix Checksums: Apply เพื่อให้มีการคำนวณค่า checksum ใหม่

จากนั้นทำการรีสตาร์ท VS Code อีกครั้ง ข้อความ [Unsupported] ก็จะหายไปไม่ให้เรารำคาญอีกต่อไป

— Hack A Bit (Deprecated) — 💣

VSCode ในเวอร์ชันใหม่ๆ จะจัดการไอคอนนี้ให้วางอยู่ในตำแหน่งที่สวยงามอยู่แล้ว จึงไม่จำเป็นต้อง เพิ่มเติม css นี้เข้าไป

เมื่อมีการเปิดใช้งาน Custom CSS and JS Loader สิ่งที่จะปรากฏเพิ่มขึ้นมาบน status bar ของเราก็คือ custom css indicator ซึ่งเราสามารถที่จะทำการซ่อน icon ดังกล่าวได้โดย CSS Style เข้าไปในไฟล์ vscode_styles.css ดังนี้

/* HACK */
.statusbar-item.right.__CUSTOM_CSS_JS_INDICATOR_CLS .octicon.octicon-paintcan {
  display: none;
}

References:

• https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
• https://medium.com/@rzvdaniel_71068/customize-visual-studio-code-for-multiple-fonts-and-styles-96f83562af58
• https://github.com/be5invis/vscode-custom-css/issues/15](https://github.com/be5invis/vscode-custom-css/issues/15
• https://gist.github.com/divyanshu013/4211f3b52350d634f395ab826ae5e947