Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the VSCODE extension/theme/symbolset used to display formatted/actually arrows in arrow functions syntax

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

like image 934
Vatsal Mistry Avatar asked Jan 06 '20 19:01

Vatsal Mistry


People also ask

How do I get the arrow function in VS Code?

Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for Arrow Function Snippets and click on [Install] button.

What do the Red Arrows in VS Code mean?

It means a line has been deleted from the previous version of the file (based on git). Follow this answer to receive notifications.

How do you display code in VS Code?

You can also override the default UI language by explicitly setting the VS Code display language using the Configure Display Language command. Press Ctrl+Shift+P to bring up the Command Palette then start typing "display" to filter and display the Configure Display Language command.

What is the use of extensions in VS Code?

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code.


3 Answers

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

like image 121
Ethan Ge Avatar answered Oct 14 '22 06:10

Ethan Ge


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
like image 21
Javano Collins Avatar answered Oct 14 '22 05:10

Javano Collins


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

like image 6
SunnyMonster Avatar answered Oct 14 '22 07:10

SunnyMonster