How to Disable Italics in VS Code

Hello.

In this article, I will introduce how to disable italic display in VSCode, along with some wisdom from those who came before.

Method

First, let's borrow some wisdom from our predecessors. When searching for a solution to this problem, you'll likely come across the following site. Following the method introduced there, we'll add settings to VSCode's settings.json.

https://qiita.com/k010c1232/items/fd196369c6729b4fbe10

For now, I'll also include how to add the settings in this article as well.

• How to open settings.json

1. Press the F1 key to display the command palette.
2. Type open settings in the search field and select the following:
   
3. Add the following code to the opened settings.json and save it:

settings.json

"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": ""
      }
    }
  ]
}

Once you have finished the setup, most italic displays should be disabled.

However, depending on the Color Theme you are using, some italic displays may still remain. Next, let's extend the settings above ourselves.

Extending the Settings

Even though I say "extending the settings," what you need to do is simple.

For example, let's disable the italic display that remained as shown below.

Procedure

1. Press the F1 key to display the command palette.
2. Type >inspect editor in the search field and select the following:
   

Then, information about the variables or reserved words where the cursor is placed will be displayed, as shown in the image below.

3. Copy the topmost string in the foreground item.
   In the image, copy the following part:
   

4. Add the copied string to settings.json.
   Add it to the following location:

settings.json

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        "comment",
        "comment.block",
        "comment.block.documentation",
	/* ... */
        "variable.other.property", // Added
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

After saving, the italic display is successfully disabled.

Is there a faster way?

The method above requires adding settings bit by bit every time you encounter an italic display while writing code. However, since that is tedious, I would like to look up the items set to italic in the Color Theme being used and add them.

1. Open the GitHub repository of the Color Theme you are using
   There are several ways to open the repository, but I think going from the VSCode Extension page is easiest. You can jump to the page by clicking Repository.

2. Look for the theme configuration file in the source code
   I can't say for sure because the file structure differs for everyone, but I think there will be a .json or .js file in a folder called themes that serves as the configuration file.

3. Find the part that sets italic in the configuration file
   Once you open the file, if you search for italic with Command (Control) + F, you should find a notation like "fontStyle": "italic". For example, it looks like this:

theme-settings.json

 "tokenColors": [
    {
      "name": "Comment",
      "scope": "comment",
      "settings": {
        "foreground": "#000000",
        "fontStyle": "italic"
      }
    },
    /* ... */
  ]

To briefly explain what this means, it means "the comment color is #000000 and the font style is italic."

And what's important here is "scope": "comment". Since this part specifies whether it's a variable, reserved word, or comment in the code, copy this "comment" part and add it to the same place as Step 4 introduced above. "scope" can be written as a list to set multiple elements at once, so it may be written in list format, in which case you copy and paste the elements one by one.

Ultimately, you're still manually adding settings bit by bit, so the effort doesn't change much, but the need to fear italic displays appearing out of nowhere while writing code will be greatly reduced.

That concludes the introduction on how to disable italic display in VSCode. Thank you very much! 👋