Search code examples
sublimetext3visual-studio-code

How to make my vscode font slant like sublime?

I use the same font(Consolas) in VScode and sublime. But it looks different in the same place:enter image description here

enter image description here

Here are my sublime settings:

{
    "auto_complete_selector": "source,text",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "font_face": "Consolas",
    "font_size": 12,
    "ignored_packages":
    [
    ],
    "theme": "Default.sublime-theme"
}

Here are my vscode settings:

    "materialTheme.accent": "Blue",
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontWeight": 520,
    "editor.codeLensFontSize": 11,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "debug.console.fontFamily": "Cascadia Mono",
    "python.showStartPage": false,
    "workbench.editorAssociations": [
        {
            "viewType": "jupyter.notebook.ipynb",
            "filenamePattern": "*.ipynb"
        }
    ],
    "explorer.confirmDelete": false,
    "todo-tree.tree.showScanModeButton": true,
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
       "comments": "#7ea9eb"

My question is: How to make my vscode font slant like sublime?

Solution

  • According to the VS Code documentation, you can customize your theme color by using the editor.tokenColorCustomizations rule in your user settings:

    1. Open your settings.json and add the following rule first (replace YOUR THEME NAME HERE with the name of your color theme):

      "editor.tokenColorCustomizations": {
   "[YOUR THEME NAME HERE]": {
      "textMateRules": []
   }
}

    2. Open a Python file of your choice. Then, open Command Palette with Ctrl+Shift+P and run "Developer: Inspect Editor Tokens and Scopes"

    3. Click on the keyword you wish make it italic. For example, we click on the class keyword to view its TextMate scopes. Copy the first TextMate scope ID as highlighted:

      Textmate scope example

    4. Go back to your settings.json. Inside the textMateRules array, insert a new object with the scope property being the TextMate scope ID you just copied.

      "editor.tokenColorCustomizations": {
   "[YOUR THEME NAME HERE]": {
      "textMateRules": [
        {
          "scope": "storage.type.class.python",
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
   }
}

    5. Save your settings.json and you should see the class keyboard in italics

      Class being italic

    Note

    You can append more objects in the textMateRules array to make the font italic for more keywords. For example:

    "editor.tokenColorCustomizations": {
  "[YOUR THEME NAME HERE]": {
    "textMateRules": [
      {
        "scope": "variable.parameter.function.language.special.self.python",
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": "storage.type.class.python",
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  }
},