Visual Studio Code - Comment installer la police Fira Code ?

18 Jan 2020 — tips vscode webdev

Fira Code est très populaire comme dev font ou police pour développeurs si tu préfères. C'est une police Monospace avec programming ligatures.

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster.
Fira Code vs Fira Mono

Fira Code vs Fira Mono

Bien, maintenant nous allons voir comment l'installer dans notre IDE préféré VS Code.

Installer Fira Code

L'installation est vraiment facile et rapide. Ici je vais t'expliquer comment le faire sur MAC. Pour Windows et autres, je t'invite à aller voir le wiki de l'éditeur.

$ brew tap caskroom/fonts

$ brew cask install font-fira-code

Activer Fira Code dans VS Code

  • Dans VS Code, aller dans Code -> Préférences -> Settings.
Ouvrir les préférences

Ouvrir les préférences

  • Modifier la Font Family en tapant Fira Code et choisir une Font Size qui te convient (13px dans mon cas).
Modifier les préférences par l'UI

Modifier les préférences par l'UI

  • Pour activer Font Ligatures il faut cliquer sur Edit in settings.json
Activation ligatures

Activation ligatures

Bien entendu, si tu préfères modifier directement le fichier settings.json, tu peux ajouter les trois lignes comme indiqué ci-dessus.

"editor.fontFamily": "Fira Code",
"editor.fontSize": 14,
"editor.fontLigatures": true,
  • Maintenant tu peux ouvrir un fichier Javascript ou autre et mater le nouveau look n' feel.

Avant Fira Code

Avant - Sans utilisation de Fira Code

Avant - Sans utilisation de Fira Code

Après activation de Fira Code

Après - Activation de Fira Code

Après - Activation de Fira Code

Avoue que le résultat est bien meilleur non ? Si tu es d'accord fais le moi savoir.