2025-06-22

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

光輝咖碼311 mins
Selective Focus Photography of Hustle and Bust Text

如果您有過任何編碼經驗，您一定知道一個好的程式碼編輯器有多重要。在眾多選項中，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。

現在來設定使用看看。

安裝 FiraCode 字型

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

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

VS Code 設定方式

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

1. 使用視覺設定編輯器

  1. 打開設定：
    • 從 VS Code 的菜單中，導航至 偏好設定 > 設定。
    • 或者，使用鍵盤快捷鍵 ⌘+, (macOS)。
  2. 導航到字體設定：
    • 在 Search Settings 中輸入 font，這樣找設定比較快。
    • 在 “Commonly Used” 下，找到 Font Family 設定。
  3. 啟用 Fira Code：
    • 在 “Font Family” 的輸入框中，最前面輸入 Fira Code。
    • 啟用 Font Ligatures。

2. 手動編輯 settings.json

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

打開 settings.json，修改 font family 如下

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

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

"editor.fontWeight": "300" // Light
"editor.fontWeight": "400" // Regular
"editor.fontWeight": "450" // Retina !! Only works with FiraCode-VF.ttf    "editor.fontWeight": "500" // Medium
"editor.fontWeight": "600" // Bold
PHP 程式範例

小結

無論您是一位經驗豐富的開發者，花幾個小時深入複雜的算法，還是一名剛開始涉足程式設計世界的初學者，FiraCode 都有東西可以提供。它不僅可以使您的代碼易讀，而且還可以使其美觀。說實話，誰不想要一個令人愉悅的工作空間呢？

31 thoughts on “如何使用 FiraCode 提升 Visual Studio Code 的美觀與可讀性”

  2. An interesting discussion is definitely worth comment.

    There’s no doubt that that you need to publish more about this issue, it may not be a
    taboo matter but generally people don’t talk about such subjects.
    To the next! Best wishes!!

    回覆

  5. I’m now not certain where you are getting your information, but good topic.
    I must spend some time learning more or figuring out more.
    Thanks for great information I used to be looking for
    this info for my mission.

    回覆

  6. I don’t even understand how I stopped up here, but I
    assumed this publish was good. I do not know who you might
    be however definitely you are going to a famous blogger for those who are not already.
    Cheers!

    回覆

  7. Amazing blog! Do you have any recommendations for aspiring writers?
    I’m planning to start my own site soon but I’m a little lost
    on everything. Would you advise starting with a free platform like
    Wordpress or go for a paid option? There are so many choices out
    there that I’m totally overwhelmed .. Any tips?

    Kudos!

    回覆

  9. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective.
    A lot of times it’s tough to get that “perfect balance”
    between usability and appearance. I must say you have
    done a great job with this. Additionally, the blog loads very quick for me on Opera.
    Superb Blog!

    回覆

  11. Hello there, just became alert to your blog through Google, and found that it’s really informative.
    I am gonna watch out for brussels. I will appreciate if you continue
    this in future. Many people will be benefited
    from your writing. Cheers!

    回覆

  12. Wow, incredible blog format! How lengthy have you been blogging for?

    you made blogging look easy. The full look of your web site is great, as neatly as the content!

    回覆

  13. Hi there just wanted to give you a quick heads up. The text in your article seem to be running off
    the screen in Ie. I’m not sure if this is a format issue or something to do with internet browser compatibility but I
    figured I’d post to let you know. The design look great though!
    Hope you get the issue resolved soon. Cheers

    回覆

  15. hi!,I really like your writing so much! percentage we communicate extra approximately your post
    on AOL? I require a specialist on this house to resolve my problem.
    May be that is you! Looking forward to look you.

    回覆

  18. Thanks for your personal marvelous posting!
    I seriously enjoyed reading it, you may be a great author.I will be sure
    to bookmark your blog and will come back in the foreseeable future.
    I want to encourage you continue your great work,
    have a nice morning!

    my blog – bankomat near me

    回覆

  19. Great goods from you, man. I have have in mind your stuff previous to and you’re simply extremely fantastic.
    I really like what you’ve acquired right here, really like what you’re saying and the way
    by which you are saying it. You are making it entertaining and you continue to care for to stay it smart.

    I can’t wait to read much more from you. That is really a terrific website.

    Feel free to surf to my web page – briansclub shut down today

    回覆

  28. I don’t know whether it’s just me or if everybody else encountering
    issues with your website. It looks like some of the written text in your posts are running off the
    screen. Can somebody else please provide feedback
    and let me know if this is happening to them as well? This may be a problem with
    my internet browser because I’ve had this happen previously.
    Thank you

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Post