Is there a way to italicize comments in Visual Studio Code?

Question

I'm using Visual Studio Code version 1.11.2. I need to be able to see italicized comments in any language file, or at least JavaScript, Python, C, and C++. Is there a general setting for that or is there a programmatic way I can achieve that at the moment?

Answer 1

Thanks for pointing me in the right direction Victor. Putting this in my settings file (Visual Studio Code 1.42.1) did the trick:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "comment",
      "settings": {
        "fontStyle": "italic"
      }
    }
  ]
}

You can see selector scopes by pressing ctrl/cmd + shift + p, and looking for Developer: Inspect Editor Tokens and Scopes.

You can apply settings to multiple scopes by providing an array:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "name": "Comment",
      "scope": [
        "comment",
        "comment.block",
        "comment.block.documentation",
        "comment.line",
        "comment.line.double-slash",
        "punctuation.definition.comment",
      ],
      "settings": {
        "fontStyle": "italic",
        // "fontStyle": "italic underline",
        // "fontStyle": "italic bold underline",
      }
    },
  ]
},

Related: How do I get Visual Studio Code to display italic fonts in formatted code?

Answer 2

Yes, there are ways to accomplish this.

This answer applies to Microsoft Windows (version 10.0.14393) and Visual Studio Code 1.14.2.

If you are using an installed theme from the Extension MarketPlace, their files are located at C:\Users\<YourUsername>\.vscode\extensions\.

Let's say you are using Kal.theme-glacier. The theme file is this:

C:\Users\<YourUsername>\.vscode\extensions\Kal.theme-glacier-0.0.1\themes\glacier.tmTheme

Edit the file in any text editor (Notepad++ recommended) Visual Studio Code should not be running while editing theme files or you may need to restart Visual Studio Code.

Find the key name Comment and change the FontStyle to italic. The final block of code should look like this:

<dict>
    <key>name</key>
    <string>Comment</string>
    <key>scope</key>
    <string>comment</string>
    <key>settings</key>
        <dict>
            <key>fontStyle</key>
            <string>italic</string>
            <key>foreground</key>
            <string>#515c68</string>
        </dict>
</dict>

If you are using a default theme (not installed from the Extension MarketPlace), then the location is here:

C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-<name>.

Let's say you are using Light+ (default light) theme.

The file you want to look at first is C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-defaults\themes\light_plus.json

You will find there's no Comment key in here but you'll notice "include": "./light_vs.json" Then this is actual file you want to edit. Final block in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-defaults\themes\light_vs.jsonshould look like this:

{
    "scope": "comment",
    "settings": {
        "foreground": "#009000",
        "fontStyle": "italic"
    }
},

Answer 3

A more complete answer is posted on the Visual Studio Code GitHub issue tracker: Disable Italic Option Feature Request #32579 (Themes)

For example:

punctuation.definition.comment to disable italic on the characters that creating comments (like: // and others).

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                "comment",
                "punctuation.definition.comment",
                "variable.language"
            ],
            "settings": {
                "fontStyle": ""
            }
        }
    ]
}

Answer 4

You can check out Optimizations in Syntax Highlighting.

It mentions nothing about comments being an eligible scope for theming Visual Studio Code.