Not compatible with VS code version 1.10.2

[zyqxd]

This extension is not compatible with VS code version 1.10.2. It may be the same issue as PR #8, as the only time I can get this to work is to install 1.8.

Sample CSS that would've worked in 1.8.

.editor-container .storage.type.function.arrow,
.editor-container .keyword.operator {
    font-family: 'Fira Code' !important;
}

[be5invis]

@JamDeezy Simply, click the "don't show again" on the "Your install is corrupted" message.
This extension modifies VSCode itself in order to make it able to load your custom CSS and JS.

[made-aryadinata]

@JamDeezy , the CSS is not working because those classes do not exist anymore.
They are replaced by mtk classes.

This is working for me (tried in javascript file only):

.editor-container .mtk13 {
    font-family: 'Fira Code' !important;
}

[zyqxd]

@made-aryadinata the .mtk13 class isn't working for me.

Is there any documentation on how they changed these classes? I'd like to target specific keyword for this font.

[made-aryadinata]

@JamDeezy use inspect element in Help > Toggle Developer Tools to see the class.

[zyqxd]

@made-aryadinata thank you! .mtk14 was the class I used for .keyword.operator and .storage.type.function.arrow

[teknologist]

The classes change and they don't scope correctly. For example, if "const" and "=>" have the same class... Changing themes and reloading VSCode also changed th.mkt12 to .mkt7

I don't think those mkt classes are a reliable identifier to use ligatures on specific keywords...

Waiting for a solution...

[jkchuynh829]

VSCode .mtk classes are generated from parsing the .tmTheme file. Inspect your TM scopes to find out what you need to edit in the .tmTheme file. For me, this meant adding an extra <dict> block that modifies my storage.type.function scope (for arrow functions). I changed the color slightly so that VSCode will create a new .mtk class for that scope, inspect with your VSCode Developer Tools to determine what that new class is. Specify that in your custom css file, and you should be good!

const and => both are fall under the storage.type scope, so you have to further specify storage.type.function to grab just the arrow function and VSCode will generate different classes for each.

[teknologist]

@jkchuynh829 Thanks! works like a charm !

[formspoint]

const and => both are fall under the storage.type scope, so you have to further specify storage.type.function to grab just the arrow function and VSCode will generate different classes for each.

Is there some docs somewhere detailing information like this?

[wecarrasco-applaudo]

The arrow function in vscode has the class mtk11, so the css should go like this:

.mtk11 {
  font-family: "Fira Code" !important;
}

[isabelacmor]

Another route (which I had to take) was to add a textMateRule in my user settings:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "storage.type.function.arrow",
        "settings": {
          "foreground": "#5fb3b3" // setting this color here overrides the styles font back to the default Fira Code
        }
      }
    ]
  }

[u-l-y]

Thanks @isabelacmor your solution was the trick I need it to add specificity to the classes, just in case works for someone else, I was looking to add Fira Code ligatures only to comparison operators and arrow functions, so:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "storage.type.function.arrow",
      "settings": {
        "fontStyle": "underline"
      }
    },
    {
      "scope": "keyword.operator",
      "settings": {
        "fontStyle": "underline"
      }
    }
  ]
}

Thanks to the underline style I can then match the vsc class name for underline (mtku) with the ones I want (eg. mtk13 - it may be different for you and it may be change every time you restart vsc)

.mtk13.mtku,
.mtk5.mtku {
  font-family: 'Fira Code';
  text-decoration: none;
}

:)