51

I have come through many tutorials and screenshots of JS Code in Visual Studio Code editor consisting of formatted arrows seen for arrow functions.

Which extension/theme/symbol set is required to get that like in the screenshot?

VSCode Editor

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Vatsal Mistry
  • 511
  • 1
  • 4
  • 3
  • 1
    You are looking for a font that supports ligatures, like Fira Code among others. See, e.g., https://stackoverflow.com/questions/58965575/vscode-update-to-stylistic-sets-using-font-ligatures-with-fira-code – Mark Jan 06 '20 at 20:08

8 Answers8

48

What you are looking for is a font designed for coding called

Fira Code

It's one of the most popular fonts among programmers

It will turn => into that arrow shape you saw and do other stuff

Fira Code on Github

There are instructions on how to use in vs code

Ethan Ge
  • 481
  • 3
  • 2
27

Install the FiraCode font from https://github.com/tonsky/FiraCode/releases

  1. Install the fonts
  2. Go into VsCode settings and search font
  3. In the Text Editor tab, replace the font with "Fira Code" (Windows) and "FiraCode" (Mac) OR

Add this in the settings.json:

"editor.fontFamily": "Fira Code Medium, monospace",
"editor.fontLigatures": true,
"terminal.integrated.fontFamily": "monospace",
"editor.fontSize": 13
Jackal
  • 3,359
  • 4
  • 33
  • 78
Javano Collins
  • 271
  • 4
  • 7
9

You have to also set editor.fontLigatures to true when using fonts with font ligatures.

SunnyMonster
  • 500
  • 5
  • 14
5

Two Options

Ctrl+P > search & edit for settings.json > add below

 "editor.fontFamily": "Fira Code",
 "editor.fontLigatures": true,
 "terminal.integrated.fontFamily": "Fira Code",
 "editor.fontSize": 12

OR

  1. Download Google Fire Code Font Family
  2. Open VsCode > settings > add Fira Code in Font Family input

Note: If needed, restart VsCode

All the best

Aamer
  • 417
  • 3
  • 9
  • I had everything working nicely with the fira font but couldn't get the arrows to dress up. This `fontLigatures` property did the trick. Thanks! – silencedogood Oct 25 '22 at 19:25
2

install font : Fira Code (https://github.com/tonsky/FiraCode/releases)

or

install font : cascadia-code (https://github.com/microsoft/cascadia-code/releases)

Robert Lugg
  • 1,090
  • 2
  • 12
  • 40
Sofiyan Ben_Z
  • 21
  • 3
0

You can install One Dark Pro extension which gives you very similar experience.

Apart from this I use

  • Beautify
  • ES7 React/Redux/GraphQL/React-Native
  • Prettier
Arpit Bhatia
  • 173
  • 1
  • 8
  • 1
    I installed One Dark Pro but it didn't change that arrow icon with the icon they're showing. What could be the reason? – Zain Sadaqat Dec 15 '21 at 14:19
0

Manage -> Setting -> open json

"editor.fontLigatures": true,
 "editor.fontFamily": "'cascadia code',Consolas, 'Courier New', monospace",

font Link: https://github.com/microsoft/cascadia-code/releases/latest

asit
  • 1
  • 1
0

VSCode tutorial:

Open settings.json, then put this in the json:

  "editor.fontFamily": "Fira Code Regular",
  "editor.fontLigatures": true
Joao-3
  • 109
  • 1
  • 3