FiraCodeiScript for Italic Fonts in VSCode

README.md

Setup FiraCodeiScript for Italic Fonts in VSCode

Enhance your coding experience in Visual Studio Code by using FiraCodeiScript, a font that adds elegant italic styles to your code.

What is FiraCodeiScript?

FiraCodeiScript is a variant of the FiraCode font that introduces script-style italics for certain code elements, making your code more visually appealing.

How to Install FiraCodeiScript

1. Download the Font: Visit the FiraCodeiScript GitHub repository and download the font files.
2. Install the Font: Extract the downloaded files and install the font by double-clicking on each font file and following the on-screen instructions.

Setting Up VSCode to Use FiraCodeiScript

After installing the font, configure VSCode to use it:

1. Open VSCode Settings: Press Ctrl + , to open the settings.

2. Modify Font Family:

   • Click on the {} icon in the top-right corner to open the settings in JSON format.
   • Add or modify the following line:

     "editor.fontFamily": "Fira Code iScript",

   • Save the changes and restart VSCode. If the font doesn't appear, try restarting your system to ensure the font is properly loaded.

3. Adjust Font Size (Optional):

   • In the same JSON settings file, you might want to increase the font size for better readability:

     "editor.fontSize": 16,

   • Save the changes.

Enhancing Code Appearance with Customizations

To further customize your code's appearance, you can specify which elements should be italicized or bolded:

1. Open the Scope Inspector:

   • Press Ctrl + Shift + P to open the command palette.
   • Type Developer: Inspect Editor Tokens and Scopes and select it.
   • Click on the code element you want to inspect; VSCode will display its scope name.

2. Update VSCode Settings:

   • In your settings.json, add the following configuration to customize font styles:

     "editor.tokenColorCustomizations": {
       "[*Light*]": {
         "textMateRules": [
           {
             "scope": "ref.matchtext",
             "settings": {
               "foreground": "#000"
             }
           }
         ]
       },
       "[*Dark*]": {
         "textMateRules": [
           {
             "scope": "ref.matchtext",
             "settings": {
               "foreground": "#fff"
             }
           }
         ]
       },
       "textMateRules": [
         {
           "name": "envKeys",
           "scope": "string.quoted.single.ini,constant.numeric.ini,string.quoted.double.ini",
           "settings": {
             "foreground": "#19354900"
           }
         },
         {
           "scope": [
             "comment",
             "storage.modifier",
             "entity.other.attribute-name",
             "fenced_code.block.language.markdown",
             "storage.type.function.solidity",
             "storage.type.function",
             "keyword"
           ],
           "settings": {
             "fontStyle": "italic"
           }
         },
         {
           "scope": [
             "storage.type.class",
             "constant",
             "support.class.builtin.js"
           ],
           "settings": {
             "fontStyle": "bold"
           }
         },
         {
           "scope": [
             "entity.name.section.markdown"
           ],
           "settings": {
             "fontStyle": "italic bold"
           }
         },
         {
           "scope": [
             "invalid",
             "keyword.operator",
             "constant.numeric.css",
             "keyword.other.unit.px.css",
             "constant.numeric.decimal.js",
             "constant.numeric.json",
             "comment.block",
             "entity.other.attribute-name.class.css"
           ],
           "settings": {
             "fontStyle": ""
           }
         }
       ]
     }

   • Adjust the scope names as needed based on your preferences.

By following these steps, you can personalize your VSCode environment with FiraCodeiScript, enhancing readability and aesthetics.