Skip to content

Instantly share code, notes, and snippets.

@justinbchau
Forked from mohokh67/vscode-settings.md
Last active December 2, 2020 05:02
Show Gist options
  • Save justinbchau/f842622755b282eed14c5e5164152de0 to your computer and use it in GitHub Desktop.
Save justinbchau/f842622755b282eed14c5e5164152de0 to your computer and use it in GitHub Desktop.
Install italic and customizable font for vscode

Manual steps:

  • Download and install Victor Mono font
  • Update VSCode setting as bellow:
    • font size, line height and font weight are optional and you can update them as you prefer
{
    "editor.fontSize": 16,
    "editor.lineHeight": 24,
    "editor.fontWeight": "600",
    
    "editor.fontFamily": "Victor Mono",
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "scope": "emphasis",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "strong",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "entity.other.attribute-name",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "markup.underline",
          "settings": {
            "fontStyle": "underline"
          }
        },
        {
          "scope": "markup.bold",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "markup.heading",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "markup.italic",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "name": "String interpolation",
          "scope": [
            "punctuation.definition.template-expression.begin",
            "punctuation.definition.template-expression.end",
            "punctuation.section.embedded"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "name": "this.self",
          "scope": "variable.language",
          "settings": {
            "fontStyle": "italic",
            "foreground": "#ff5874"
          }
        },
        {
          "name": "@Decorator",
          "scope": ["meta.decorator punctuation.decorator"],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": ["punctuation.definition.comment", "comment"],
          "settings": {
            // "foreground": "#ff5874",
            "fontStyle": "italic"
          }
        },
        {
          "scope": [
            //following will be in italic =FlottFlott
            "entity.name.type.class", //class names
            "keyword", //import, export, return…
            "constant", //String, Number, Boolean…, this, super
            "storage.modifier", //static keyword
            "storage.type",
            "storage.type.class.js", //class keyword
          ],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": [
            //following will be excluded from italics VSCode has some defaults for italics
            "invalid",
            "keyword.operator",
            "constant.numeric.css",
            "keyword.other.unit.px.css",
            "constant.numeric.decimal.js",
            "constant.numeric.json"
          ],
          "settings": {
            "fontStyle": ""
          }
        }
      ]
    }
  }
@zengjiapei3000
Copy link

thanks for your code, it help me 😍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment