CleanMyMac

如何使用 FiraCode 提升 Visual Studio Code 的美觀與可讀性

Feature image for 如何使用 FiraCode 提升 Visual Studio Code 的美觀與可讀性

如果您有過任何編碼經驗，一定知道一個好的程式碼編輯器有多重要。在眾多選項中，Visual Studio Code 以其效能、功能範圍和可定制性脫穎而出。

但除了功能性之外，您有沒有考慮過它的美學層面？沒錯，程式碼編輯器的外觀會大大影響使用體驗。這就是 FiraCode 這款免費等寬字體的重要性——它帶有程式設計連字功能，能讓程式碼更美觀且易讀。

什麼是 FiraCode

Fira Code 是一款免費且開源的等寬字體，專為程式碼編輯器和開發環境而設計。其中最引人注目的特點是它使用了程式設計連字（ligatures）功能。

連字是將多個字元組合在一起，渲染為單一的字形，以提高可讀性。例如，Fira Code 會將 != 這兩個單獨的字元顯示為一個連在一起的字形（≠），使其更易於閱讀和理解。

這款字體是 Mozilla 為其 Firefox OS 開發的 Fira Mono 字體的擴充版本。

Fira Code 在 Fira Mono 的基礎上增加了常見的程式設計多字元組合的連字功能。它在開發者中非常受歡迎，並且在許多程式碼編輯器中都得到支援，包括 Visual Studio Code、Atom 和 Sublime Text。

接下來，讓我們來看看如何在 Visual Studio Code 中設定使用 Fira Code。

安裝 FiraCode 字型

在 macOS 使用 Homebrew 安裝非常簡單。

brew tap homebrew/cask-fonts
brew install --cask font-fira-code

VS Code 設定方式

在 Visual Studio Code 中設定 Fira Code 有兩種方式。

使用視覺設定編輯器

  1. 開啟設定：
    • 從 VS Code 的選單中，導航至 偏好設定 > 設定。
    • 或者，使用鍵盤快捷鍵 ⌘+, (macOS)。
  2. 導航到字體設定：
    • 在搜尋設定欄位中輸入 font，這樣可以快速找到相關設定。
    • 在 "Commonly Used"（常用設定）下，找到 Font Family 設定。
  3. 啟用 Fira Code：
    • 在 "Font Family" 的輸入框中，在最前面輸入 Fira Code。
    • 啟用 Font Ligatures（字體連字）選項。

手動編輯 settings.json

視覺設定編輯器其實就是在修改 settings.json 檔案。

開啟 settings.json，修改字體設定如下：

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

另外還可以設定字型粗細如下：

"editor.fontWeight": "300", // Light
"editor.fontWeight": "400", // Regular
"editor.fontWeight": "450", // Retina（僅適用於 FiraCode-VF.ttf）
"editor.fontWeight": "500", // Medium
"editor.fontWeight": "600"  // Bold

上圖為 PHP 程式碼範例，可以看到連字效果讓程式碼更加美觀易讀。

小結

無論您是一位經驗豐富的開發者，花幾個小時深入複雜的演算法，還是一名剛開始涉足程式設計世界的初學者，Fira Code 都能為您帶來更好的程式碼閱讀體驗。它不僅可以讓您的程式碼更易讀，還能讓程式碼看起來更美觀。說實話，誰不想要一個令人愉悅的工作空間呢？