แนะนำ font สำหรับเขียน code: Fira Code

Published on August 10th, 2017

By Armno P.

โดยทั่วไปแล้วพวกเราเหล่า developer ใช้ font ประเภท monospace ในการเขียน code ซึ่งแต่ละคนก็มีความชอบแตกต่างกันไป ผมเองก็ลองใช้มาหลายตัว ตอนนี้มาจบที่ Fira Code ครับ

Fira Code ถูกพัฒนามาจาก Fira Mono ที่เพิ่มการแสดงผลอักษระพิเศษที่ใช้ในการเขียน code เข้ามา (พวกวงเล็บ เครื่องหมายมากกว่า น้อยกว่า เท่ากับ ฯลฯ) แบบในรูปข้างล่างนี้ (ยืมรูปมาจาก GitHub repo) จุดประสงค์เพื่อทำให้แยกแยะเครื่องหมายที่คล้ายๆ กันได้ดีขึ้น

ที่เห็นได้ชัดเจนก็น่าจะเป็นเครื่องหมาย === !== หรือลูกศรต่างๆ ที่มีเส้นเชื่อมเข้ามา

ในตอนแรกผมเห็นแล้วยังไม่ถูกใจเท่าไหร่ เราจะมองเห็นเครื่องหมายต่างๆ เปลี่ยนไปจากเดิม กลัวจะมีปัญหากับการอ่าน code แต่พอลองใช้ดู กลับกลายเป็นข้อดี เพราะลดการพิมพ์ผิดไปได้มาก เช่น => ถ้าพิมพ์ผิดเป็น =< อาจจะมองผ่านๆ ไม่เห็น แต่ Fira Code แสดงออกมาได้ชัดเจนกว่าเดิม

รูปจาก Roboto Mono

รูปจาก Fira Code

ส่วนเรื่องการอ่าน code พอเริ่มคุ้นเคยแล้ว ก็ไม่ได้มีปัญหาอย่างที่คิด สมองเราจะจำได้ของมันเอง ด้วยเครื่องหมายต่างๆ ที่ชัดเจนขึ้น ก็อ่านง่ายกว่าเดิมครับ

ติดตั้งและใช้งาน

ดาวน์โหลด Fira Code ได้จาก GitHub ได้เลย วิธีติดตั้งก็เหมือนลง font ทั่วไป ครับ (ใน Mac: double click แล้วกด Install Font ลงใน Fontbook)

VSCode

เปิด Settings ด้วย ⌘ + p แล้วใส่ค่า editor.fontFamily เป็น Fira Code กับ editor.fontLigatures เป็น true

{
  ...
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  ...
}

iTerm2

iTerm2 เวอร์ชั่นล่าสุด (Stable Release: 3.0) นั้นยังไม่ support font ligatures ก็เลยต้องไปดาวน์โหลด beta version (Test Release: 3.1) มาใช้ก่อน จากนั้นก็เปลี่ยน font ใน Preferences ได้เลยครับ

Vim ใน iTerm ก็ใช้ได้เหมือนกัน อาจจะเพี้ยนๆ บ้างนิดหน่อย แต่ไม่ค่อยเจอ (บรรทัดสุดท้าย)

ส่วน Editor ตัวอื่นๆ ดูได้จาก repo readme ได้ครับ มีทั้งที่ support และไม่ support เลือกใช้ได้ตามใจชอบเลย นอกจาก Fira Code แล้วก็ยังมีอีกหลายตัวที่ support ligatures ลองเล่นดูได้ครับ