•   22.05.2024
#Software #Sublime Text #Visual Studio Code

Chọn bộ Font chữ làm đẹp editor tạo cảm hứng cho lập trình viên

1 phút đọc

Bài viết sau đây mình sẽ giới thiệu một số Font chữ để hiển thị cho Text editor. Text editor là một công cụ vô cùng quan trọng và thường xuyên được sử dụng nhất khi làm việc.
Không phải lúc nào bạn cũng sẽ cần tới IDE, đôi lúc bạn chỉ cần xem nhanh, hoặc chỉnh sửa nhanh một file thì text editor chính là lựa chọn.

Text editor mình thường sử dụng là: Sublime Text 3 & Visual Studio Code.

Text editor tốt cần đi kèm với một bộ font tốt, nhằm để hạn chế nhìn nhầm các ký tự:
- Dễ dàng phân biệt các ký tự: Il1i, 0Oo, CG. Có nhiều font monospace hiển thị các ký tự trên rất giống nhau, khiến cho việc code khó khăn, debug mất thời gian. Một số font monospace khá phổ biến Courier New, Noto Mono, Droid Sans Mono...
- Các ký tự đặc biệt cho cú pháp phải rõ, dễ đọc: () [] {} =+-<>:;,."'
- Và đối với tiếng Việt, thì font chữ cũng cần có hỗ trợ tiếng Việt Unicode để hiện thị các chuỗi văn bản, ghi chú bằng tiếng Việt.

Sau đây là một số bộ font tốt sẽ giúp bạn tránh những sai sót không đáng có và nâng cao hiệu suất làm việc:

1. Source Code Pro

Source Code Pro là một kiểu chữ monospace sans serif được tạo ra bởi Paul D. Hunt cho Adobe Systems. Đây là bộ font chữ mã nguồn mở của hãng Adobe.

Download font: https://fonts.google.com/specimen/Source+Code+Pro#glyphs
Source github: https://github.com/adobe-fonts/source-code-pro

Code:

font-family: 'Source Code Pro', monospace;

2. Monaco

Là Font chạy mặc định trên macOS và đã có mặt với tất cả các phiên bản trước của hệ điều hành Mac. Các ký tự khác nhau dễ nhìn và rất khó nhầm lẫn giữa 0 và O, hoặc 1, |, I

Code:

font-family: 'monaco-regular', sans-serif;

Source Github: https://github.com/todylu/monaco.ttf
Source: https://www.dafontfree.net/monaco-regular/f137518.htm

3. Fira Code, Roboto Mono, monospace

Ligatures (chữ ghép) có thể giúp cho code dễ đọc hơn, chứ không phải code ít hơn. Trong Javascript, các phép so sánh == và === và các phép đảo ngược của nó != và !== Fira Code sẽ thay thế chúng bằng các dấu thanh ngang như =, ≠, ≡ ≢ ... và nhiều ký tự khác nữa (>=, <=, || ...). Xem thêm hình phía dưới.

Cá nhân mình thấy chúng dễ dàng phân biệt nhau. Tuy nhiên mình chắc chắn rằng nó không dành cho hầu hết tất cả mọi người, lâu lâu vẫn còn xuất nhiều tranh cãi trên các diễn đàn.

Vì Fira Code không có các ký tự tiếng Việt unicode, nên để khắc phục việc này, bạn cần sử dụng thêm một font khác làm fallback đó là Roboto Mono.

Sau khi cài đặt vào settings của VScode để bật ligature, font Fira Code và Roboto Mono.

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

Source Github: https://github.com/tonsky/FiraCode#alternatives
Download font: https://news.ycombinator.com/item?id=19805053

4. Consolas

Font này không miễn phí nhưng có sẵn trong Windows hoặc được cài theo bộ Microsoft Office.

5. Roboto Mono


Font Roboto Mono của bộ Roboto, là font mặc định cho HĐH Android và material design.
Font này mình hay dùng để làm font mặc định cho Terminal, để soạn blog vì chữ to tròn rõ ràng.

https://github.com/google/fonts/tree/main/apache/robotomono

Nguồn:
https://news.ycombinator.com/item?id=19805053
 


Hashtags: