Vscode: [themes] Disable Italic Option Feature Request

[Zx-EvM]

• VSCode Version: 1.15.0
• OS Version: Windows 10 Version 1703 Build 15063.540

Steps to Reproduce:

1.
2.

Reproduces without extensions: Yes/No

Sometimes authors of themes use italic for comments, language keywords and for other things. In some cases that's looks not so good (as example what I mean you can read my issue/feature-request on Material Theme https://github.com/equinusocio/vsc-material-theme/issues/81). Of course we can change this in theme source code manually but it will be great to have Disable Italic Option in vscode config file.

For example in Sublime Text 3 we have no_italic font option to disable italic at all:

"font_options":
[
    "no_italic"
],

Related issue: https://github.com/Microsoft/vscode/issues/25895

Fira Code don't have Italic too.

[tinymins]

+1

[alexdima]

@aeschli

Would this be something doable via user settings? (since those rules get appended to the theme rules anyways?)

[Korvox]

I ran into this issue with the Atom One theme, and adding the following setting worked for me:

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

So for anyone that wants "normal" font styling on comments, just drop that in your settings.

[Zx-EvM]

@Korvox thanks. That's helpful for me:

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

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

[mohouyizme]

It's not a dynamic way but add those lines to your vs code settings:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        "comment",
        "comment.block",
        "comment.block.documentation",
        "comment.line",
        "constant",
        "constant.character",
        "constant.character.escape",
        "constant.numeric",
        "constant.numeric.integer",
        "constant.numeric.float",
        "constant.numeric.hex",
        "constant.numeric.octal",
        "constant.other",
        "constant.regexp",
        "constant.rgb-value",
        "emphasis",
        "entity",
        "entity.name",
        "entity.name.class",
        "entity.name.function",
        "entity.name.method",
        "entity.name.section",
        "entity.name.selector",
        "entity.name.tag",
        "entity.name.type",
        "entity.other",
        "entity.other.attribute-name",
        "entity.other.inherited-class",
        "invalid",
        "invalid.deprecated",
        "invalid.illegal",
        "keyword",
        "keyword.control",
        "keyword.operator",
        "keyword.operator.new",
        "keyword.operator.assignment",
        "keyword.operator.arithmetic",
        "keyword.operator.logical",
        "keyword.other",
        "markup",
        "markup.bold",
        "markup.changed",
        "markup.deleted",
        "markup.heading",
        "markup.inline.raw",
        "markup.inserted",
        "markup.italic",
        "markup.list",
        "markup.list.numbered",
        "markup.list.unnumbered",
        "markup.other",
        "markup.quote",
        "markup.raw",
        "markup.underline",
        "markup.underline.link",
        "meta",
        "meta.block",
        "meta.cast",
        "meta.class",
        "meta.function",
        "meta.function-call",
        "meta.preprocessor",
        "meta.return-type",
        "meta.selector",
        "meta.tag",
        "meta.type.annotation",
        "meta.type",
        "punctuation.definition.string.begin",
        "punctuation.definition.string.end",
        "punctuation.separator",
        "punctuation.separator.continuation",
        "punctuation.terminator",
        "storage",
        "storage.modifier",
        "storage.type",
        "string",
        "string.interpolated",
        "string.other",
        "string.quoted",
        "string.quoted.double",
        "string.quoted.other",
        "string.quoted.single",
        "string.quoted.triple",
        "string.regexp",
        "string.unquoted",
        "strong",
        "support",
        "support.class",
        "support.constant",
        "support.function",
        "support.other",
        "support.type",
        "support.type.property-name",
        "support.variable",
        "variable",
        "variable.language",
        "variable.name",
        "variable.other",
        "variable.other.readwrite",
        "variable.parameter"
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

[hrvoj3e]

Just like to add some references for others who want to override specific language or theme style setting.

• TextMate grammar intro
  
  
  
  • https://manual.macromates.com/en/language_grammars
  
  
• Excellent extension for pinpointing which TextMate scope (or scope hierarchy) to use
  
  
  
  • https://marketplace.visualstudio.com/items?itemName=siegebell.scope-info
  
  

@mohouyizme covered a lot of scopes but I wanted to override language specific only and not use all of them atm.

[gibbok]

@mohouyizme Great snippet!

In your configurations all italics are disabled expect when importing a "module", example the word "data" in the following snippet for a .tsx file is still in italic.

import { data as scrapReasons } from './testData
-----------^^-- italic

What is the right configuration to set that font to "normal" style too? Thanks!

[mohouyizme]

@gibbok
I know it's not the best way to do things but add this line to the list above Microsoft/vscode#32579 (comment)

"meta.import variable.other.readwrite"

[mohouyizme]

Here is a simple way to find the scopes to add them to this list:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
         // Add scopes name to this array
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

First focus your mouse on the italic or bold word:

Then open the Command Palette

Search for: "Developer: Inspect TM Scopes"

It will appear a popup contains some information about the scope

Add the highlighted part to the scope array mentioned above

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
         "meta.import variable.other.readwrite",
         "other scopes ..."
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

Finally you can find me on twitter: @mohouyizme

[ayaorei]

@mohouyizme so do i just paste the code on the user settings? or do i need to put fontstyle?
I know iam big noob...

[kelset]

@ayaorei yes, basically you can simply copy any variation of @mohouyizme's snippet into your User Preferences and you are good to go :)

[ayaorei]

@mohouyizme @kelset thank you so much. it work.

[if-jds]

This popped up yesterday in Material Theme after an upgrade to 1.31.1. All of the sudden every class in my SCSS files became italicized. Instead of slowly losing my mind throughout the day, this post helped me write this settings block:

    "editor.tokenColorCustomizations": {
        "textMateRules": [{
            "scope": [
                "entity.other.attribute-name",
            ],                
            "settings":{
                "fontStyle": ""
            }
        }]
    }

That's the scope if you're running into weird italicized classes!

[gdmachado]

On the spirit of doing it the hacky way, a better solution I found is, instead of adding every single scope to editor.tokenColorCustomizations, you can use the vscode-custom-css extension, and then set this in your custom css file:

.mtki {
    font-style: normal;
}

It will apply to every single scope if that's what you're looking for.

[kiwi0fruit]

Is there a way to only prevent terrible auto-slant but have italics when the font has them? For example in cases when the main font has italics but fallback CJK font does not?

[SNikalaichyk]

+1

[theAkito]

Interesting and sad at the same time, how so many workarounds accumulated over time and yet no real fix seems to be implemented in the software, itself, even after roughly 3 years. :/

[fuadnafiz98]

Maybe should make a extension that overwrite the settings.json 😞

[TheBossProSniper]

Hey guys,

I have disabled it in the settings.json however, it still hasn't worked:

{
    "[dart]": {
        "editor.trimAutoWhitespace": false,
        "editor.autoClosingBrackets": "always",
        "diffEditor.ignoreTrimWhitespace": true,
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "editor.fontFamily": "Cascadia Code",
    "window.zoomLevel": 1.5,
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.fontSize": 15,
    "terminal.integrated.cursorStyle": "line",
    "explorer.confirmDelete": false,
    "files.autoSaveDelay": 300,
    "editor.fontLigatures": true,
    "git.enableSmartCommit": true,
    "[json]": {
        "editor.quickSuggestions": {
            "strings": true
        },
        "editor.suggest.insertMode": "replace"
    },
    "editor.fontSize": 20,
    "editor.minimap.enabled": false,
    "python.pythonPath": "/usr/local/opt/[email protected]/bin/python3.8",
    "editor.suggestSelection": "first",
    "python.languageServer": "Microsoft",
    "kite.showWelcomeNotificationOnStartup": false,
    "python.linting.enabled": true,
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
    "explorer.confirmDragAndDrop": false,
    "dart.previewBazelWorkspaceCustomScripts": true,
    "dart.previewFlutterUiGuides": true,
    "dart.previewFlutterUiGuidesCustomTracking": true,
    "scm.inputFontFamily": "defaultSF Mono",
    "python.dataScience.askForKernelRestart": false,
    "files.autoSave": "afterDelay",
    "python.dataScience.alwaysTrustNotebooks": true,
    "cSpell.userWords": [
        "sqlite"
    ],
    "git.confirmSync": false,
    "editor.fontWeight": "300",
    "editor.tokenColorCustomizations": {
        "scope": [
            "comment",
            "comment.block",
            "comment.block.documentation",
            "comment.line",
            "constant",
            "constant.character",
            "constant.character.escape",
            "constant.numeric",
            "constant.numeric.integer",
            "constant.numeric.float",
            "constant.numeric.hex",
            "constant.numeric.octal",
            "constant.other",
            "constant.regexp",
            "constant.rgb-value",
            "emphasis",
            "entity",
            "entity.name",
            "entity.name.class",
            "entity.name.function",
            "entity.name.method",
            "entity.name.section",
            "entity.name.selector",
            "entity.name.tag",
            "entity.name.type",
            "entity.other",
            "entity.other.attribute-name",
            "entity.other.inherited-class",
            "invalid",
            "invalid.deprecated",
            "invalid.illegal",
            "keyword",
            "keyword.control",
            "keyword.operator",
            "keyword.operator.new",
            "keyword.operator.assignment",
            "keyword.operator.arithmetic",
            "keyword.operator.logical",
            "keyword.other",
            "markup",
            "markup.bold",
            "markup.changed",
            "markup.deleted",
            "markup.heading",
            "markup.inline.raw",
            "markup.inserted",
            "markup.italic",
            "markup.list",
            "markup.list.numbered",
            "markup.list.unnumbered",
            "markup.other",
            "markup.quote",
            "markup.raw",
            "markup.underline",
            "markup.underline.link",
            "meta",
            "meta.block",
            "meta.cast",
            "meta.class",
            "meta.function",
            "meta.function-call",
            "meta.preprocessor",
            "meta.return-type",
            "meta.selector",
            "meta.tag",
            "meta.type.annotation",
            "meta.type",
            "punctuation.definition.string.begin",
            "punctuation.definition.string.end",
            "punctuation.separator",
            "punctuation.separator.continuation",
            "punctuation.terminator",
            "storage",
            "storage.modifier",
            "storage.type",
            "string",
            "string.interpolated",
            "string.other",
            "string.quoted",
            "string.quoted.double",
            "string.quoted.other",
            "string.quoted.single",
            "string.quoted.triple",
            "string.regexp",
            "string.unquoted",
            "strong",
            "support",
            "support.class",
            "support.constant",
            "support.function",
            "support.other",
            "support.type",
            "support.type.property-name",
            "support.variable",
            "variable",
            "variable.language",
            "variable.name",
            "variable.other",
            "variable.other.readwrite",
            "variable.parameter",
            "source.dart",
          ],
          "settings": {
            "fontStyle": ""
          }
    },
    "workbench.colorTheme": "Dracula"
}

However,

When I go back to my editor:

Here is what to developer token option tells me:

I appreciate your help. Thanks!

[fuadnafiz98]

don't know working fine for me with same settings.json :|

[mrillusi0n]

I'm sorry, why hasn't this been fixed yet?

[mohouyizme]

@mrillusi0n I'm not sure if it's a problem in the first place, the font styles mainly come with themes, you may open an issue or even contribute to your favorite theme and add a variant that comes without font styles, or you can use the snippet above.

[mrillusi0n]

Yes, sorry about that. Now that I think about it, if the devs kept on adding every feature that was requested... 😵
BLOAAATSSS.