VS Code Customisations

This post will discuss What is VS Code?, VS Code Customisations, Personal Choices & Customisations.

What is VS Code?

Firstly lets start with What is VS Code?.

VS Code is a code editor which is Free to use, as well as being built on Open Source Software. There are an extended amount of customisation options, which include Themes and Plugins / Extensions.

VS Code - Customisations

VS Code itself has a variety of options that can be used to customise the editor, such as Icon Packs, Premade Dark & Light Styled Themes, Programming languge extensions, Linters, Formatters, Debuggers

Personal Choices & Customisations - Theme, Font, Favourite Extensions

Theme Customisations

Below are pretty much the standard extensions from VS Code that are installed:

VS Code Editor Theme - 1984 - Cyberpunk

Sync Settings Between VS Code Installations on All Devices (requires inital configuration on each device first for settings to sync automatically) - Settings Sync

VS Code Icon Pack - Material Icon Pack

Project Management Tool / Folder List for Each Project on each Device - Project Manager

Font

Recently I decided to look at font customisations for VS Code specifically, and came across one called FireCode. Personally I like the font, as well as the symbol updates that are provided as part of this specific font via ligatures.

Below are the specific VS Code Editor changes that I have applied, to both the Editor and the Terminal of VS Code. These changes provide a uniform look to VS Code as a whole which I really do enjoy.

Font Installation

Firstly you will need to install Firacode using the instructions found on their Installation Guide and choose the relevant instructions based on the OS that you are currently using.

Note: The font will need to installed on all the OS’s that you plan on using VS Code. Other wise the changes below WILL NOT APPLY CORRECTLY!!

VS Code - Applying Changes

To apply these, you will need to open the Command Pallet, and search for the following > Preferences: Open User Settings (JSON).

VS Code command Pallet

This will open in a new pane within VS Code itself, and will have all your own specific settings that you have configured within VS Code. Now scroll to the bottom of the list and add in the following, making sure to keep the existing spacing / formatting as the rest of the settings.

    "editor.fontFamily": "'Fira code'",
    "editor.fontLigatures": true, // enable symbols changes to ones given on documentation.
    "editor.fontWeight": "500", // how thick the font appears onto the editor.
    "editor.detectIndentation": true, // required to override the tab index from 4 to 2, set below
    "editor.tabSize": 2, // overrides tab indent to 2
    "editor.insertSpaces": true, // insert spaces instead of tabs, requires 'editor.detectIndentation: true'
    "terminal.integrated.fontFamily": "'Fira code'",
    "terminal.integrated.fontSize": 12, // terminal font size.
    "terminal.integrated.fontWeight": "500", // how thick the font appears onto the terminal.

Supported Font weights

Next save the settings.json file and close and re-open VS Code, which should apply the settings above to both the Editor Window / Windows and Terminal / Terminals.