🖋️

VSCodeでitalic表示を無効にする方法

2021/06/28に公開

VS Code

tech

こんにちは。

今回は VSCode で italic 表示を無効にする方法を先人の知恵とともにを紹介します。

やり方

まずは先人の知恵を借りましょう。今回の問題を解決したい時に調べるとおそらく全員が出会う以下のサイトで紹介されている方法に沿って VSCode の settings.json に設定を追加します。

一応、こちらの記事にも設定の追加方法を載せておきます。

settings.jsonの開き方
1.F1キーを押してコマンドパレットを表示
2.検索欄にopen settingsと入力して以下を選択

3.開かれたsettings.jsonに以下のコードを追加して保存

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

設定が終わると大体の italic 表示が無効になっていると思います。

ただ、使用している Color Theme によってはまだitalic表示が残っているものもあると思うので、次は自分で上の設定を拡張していきたいと思います。

設定の拡張

設定の拡張と言っても、やることは簡単です。

例えば、以下のように残ってしまった italic 表示を無効にしたいと思います。

手順

1.F1キーを押してコマンドパレットを表示
2.検索欄に >inspect editor と入力して以下を選択

すると下の画像のようにカーソルが乗っている変数や予約語についての情報が表示されるようになります。

foreground の項目で一番上にある文字をコピーする
画像だと以下の部分をコピーします。

4.コピーした文字を settings.json に追加する。
以下の場所に追加します。

settings.json


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

最後に保存すると、無事 italic 表示が無効になりました。

もっと手っ取り早くやる方法は？

上の方法だとコードを書いてる途中、italic 表示と出会うたびにちまちま設定を追加する必要があります。ただ、それは面倒なので、使用している Color Theme で italic 表示に設定されている項目を調べて追加していきたいと思います。

1.使用している Color Theme の GitHub リポジトリを開く
リポジトリの開き方はいくつか方法があると思いますが、VSCode の Extension のページから飛ぶのが簡単だと思います。Repository をクリックするとページへ飛べます。

2.ソースコードからテーマの設定ファイルを探す
これは人によってファイル構成が違うので何とも言えませんが、themes というフォルダの中に .json か .js ファイルがあり、それが設定ファイルになっていると思います。

3.設定ファイルの中から italic の設定をしている部分を探す
ファイルを開いたら Command (Control) + F で italic と検索すれば "fontStyle": "italic" というような表記が見つかると思います。例えば以下のような感じです。

theme-settings.json

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

これが何を意味しているのか簡単に説明すると、「コメントの色は#000000 で、フォントスタイルは italic」という意味です。

そして、ここで重要なのは "scope": "comment" です。この部分でコードの中の変数なのか予約語なのかコメントなのかという種類を指定しているので、この "comment" の部分をコピーして上で紹介した手順 4 と同じ場所に追加します。"scope:" はリストにして複数の要素をまとめて設定できるので、リスト形式で書かれている場合もありますが、そのときは要素を 1 つずつコピペしていきます。

結局は手動でちまちま設定を追加させていくので労力はあまり変わりませんが、コードを書きながらいつ現れるか分からない italic 表示に怯える必要はとても少なくなると思います。

以上で、VSCode で italic 表示を無効にする方法の紹介を終わります。ありがとうございました👋

GitHubで編集を提案

やり方

設定の拡張

手順

もっと手っ取り早くやる方法は？

Discussion