3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

VSCode Themeのすゝめ + Themeでイタリック体になった字体を通常に戻す方法

Last updated at Posted at 2023-07-21

VSCode Themeとは

VSCodeでコーディングをする上で見た目って結構重要ですよね。
VSCode Extensionsには、そういう方々のために、VSCode全体の色味や、シンタックスハイライトの色合いをテーマという単位で変更してくれる拡張機能が大量に存在します。
言語や他のIDEに似せるためのものや、季節や景色、アニメのキャラクターなど、様々なテーマに沿ったものがあるので、ぜひインストールしてみてほしいです!

こちらのサイトでテーマを一覧で見ることができ、気に入ったものをそのままVSCodeでインストールできるのでお勧めです!
VS Code Themes
image.png

ちなみに、複数インストールしたテーマを変更したい場合は、VSCodeの設定で、Workbench: Color Themeと検索すると一番上に出てくる項目のドロップダウンから変更するだけです。
気分転換に変えてみたり、家で作業する時とオフィスで作業する時で変えてみるのもいいかもしれませんね!
image.png

イタリック体問題

このVSCode Theme、すごくいい拡張機能なのですが、作成している方が海外の方が多いからなのかわかりませんが、一部言語のシンタックスや、予約語をイタリック体にしたものがあります。
特に、おしゃれ系やかわいい系に多い印象を受けました。(確かにくるんとしてて流体系の文字なので使われている理由もよくわかりますが...)
しかし、我々日本人にはあまり馴染みのない字体だと思います。

これはQiitaというテーマを適用した際のJavaそソースコードですが、型宣言やアノテーションがイタリック体になっているのがわかると思います。
image.png

これぐらいならまだましな方ですが、コメントアウトや、変数がイタリック体になっているテーマもあり、プログラミングをする上で、少しネックになってしまいそうだったので、設定ファイルを弄って、イタリック体を通常の字体に変更する方法も書いておきます。

イタリック体→通常の字体への変更方法

そこまで難しいことはしなくて大丈夫です。

まずは、該当するテーマの拡張機能フォルダを開きます。

VSCodeの拡張機能はWindowsであれば、
C:\Users\ユーザー名\.vscode\extensions
に格納されています。(Macは触ったことないので、わからないです...)

このフォルダを開けたら、Ctrl+Fでフォルダ内検索を行い、該当する拡張機能を探しましょう!
image.png

設定ファイルを開く

該当のフォルダを開くことができたら、設定ファイルを探します!
設定ファイルは基本的にjsonファイルで書かれているので、それっぽいjsonファイルを探します。
探すといっても、基本的には、themesというフォルダに入っているようなので、まずはそこを探してみてください。
themesフォルダを見ると、おそらく1つだけでjsonファイルが置かれているはずなので、それを開きましょう。
image.png

設定ファイルを変更する

jsonファイルを開くと、何に何色を使って字体はどうするか、というのがたくさん書いてあります。
image.png

感がいい人は理解できたと思いますが、この字体はどうするか(fontStyle)がイタリック体(italic)になっているものを変更してあげればいいだけです。

ここでも、Ctrl+Fで検索を開いて、italicと入力してあげれば、どこでイタリック体が適用されているのかが一目瞭然です。
image.png

このitalicを空にしちゃえばOKです!

 "fontStyle": "italic",

        ↓

 "fontStyle": "",

変更をする際に1つだけトラップがあって、このまま置換しちゃいたくなるところですが、実はitalicというワードはfontStyle以外にも書かれている場合があるんですよね...(多分元々イタリック体のところをどうするか、というニュアンスでした)

そのため、一括置換はせずに1つずつ置換するか、1度fontStyle以外にitalicが適用されていないか確認してから一括置換するなどの方法を取るようにしましょう。

それが終わったら、ファイルを保存して、一度VSCodeを終了しましょう。

再度VSCodeを起動すると、先ほどイタリック体だったところが通常の字体になっているはずです。
image.png

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?