💡 前言

繼昨天套用質感主題與檔案圖示後，今天我們要來微調程式碼編輯器中最核心的要素——字型 (Font) 與 連字效果 (Font Ligatures)。

許多人剛安裝 VS Code 時，使用的是系統預設的等寬字型。然而，專為程式開發設計的字型不僅字型結構更清晰（例如能輕易區分 0 與 O、1 與 l），還支援強大的 Font Ligatures（字型連字） 功能，能將 <=, =>, ===, != 等多個字元符號自動合併為極具美感的單一圖形符號，大幅提升閱讀舒適度！

🎯 本篇重點

1. 什麼是程式開發字型與 Font Ligatures（連字）？
2. 兩款頂級開源程式字型推薦（Fira Code & JetBrains Mono）
3. 字型安裝與 VS Code 設定步驟
4. settings.json 語法直接套用

🔤 1. 頂級程式字型推薦

最受工程師喜愛且免費開源的兩款字型：

1. Fira Code（連字始祖）
   • 特色：針對程式語言符號做極致優化的經典字型。
   • 亮點：箭頭 ->、=>、不等號 != 與三等號 === 的連字呈現非常直覺流暢。
2. JetBrains Mono（強烈推薦）
   • 特色：由知名的 JetBrains 團隊專為程式員打造。
   • 亮點：字母高度較高，提升了長時間閱讀的舒適度，連字效果精緻而不誇張。

📥 2. 安裝字型步驟

在 VS Code 設定之前，必須先將字型安裝到作業系統中：

1. 前往 GitHub 下載字型包：
   • Fira Code GitHub 下載
   • JetBrains Mono 官網/GitHub 下載
2. 解壓縮下載的檔案，找到 ttf 或 otf 資料夾。
3. 安裝字型：
   • Windows：全選字型檔 -> 按右鍵選擇 「為所有使用者安裝」 或 「安裝」。
   • macOS：雙擊字型檔 -> 點擊 「安裝字型 (Install Font)」。

⚠️ 注意：字型安裝完成後，請重啟 VS Code 以確保字型能被正確載入。

⚙️ 3. 在 VS Code 中啟用字型與連字效果

方法 A：使用 GUI 設定介面

1. 按下快捷鍵 Ctrl + ,（Mac 為 Cmd + ,）開啟設定。
2. 搜尋 Font Family：在輸入框最前方加入 'JetBrains Mono', 'Fira Code', （注意名稱要用單引號包覆）。
3. 搜尋 Font Ligatures：點擊 「在 settings.json 中編輯」，將其設定為 true。

方法 B：直接編輯 settings.json（最快）

1. 按下 F1 輸入 Open User Settings (JSON)（開啟使用者設定 JSON）。
2. 在 JSON 檔案中加入以下設定：

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontSize": 15,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6
}

✨ 4. 設定前後對比視覺體驗

啟用連字效果後，你在輸入程式碼時會看到驚豔的變化：

• != 會自動變為斜線不等號 ≠
• == 與 === 會合併為長等號
• => 與 -> 會自動變為美觀的箭頭 ⇒ 與 →
• // 註解開頭符號會變得更為緊湊好看