Skip to content

Instantly share code, notes, and snippets.

@ricardo-dlc
Forked from justinbchau/vscode-settings.md
Created October 5, 2020 13:21
Show Gist options
  • Save ricardo-dlc/94160db67849de69b95ceebfd09b5ba7 to your computer and use it in GitHub Desktop.
Save ricardo-dlc/94160db67849de69b95ceebfd09b5ba7 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": ""
          }
        }
      ]
    }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment