VisualStudioCodeに開発用フォントを適用する方法

最近、仕事でVisualStudioCodeを使い始めました。

今までは、Bracketsという
Adobe社のものを使ってましたが、

VisualStudioCodeは、
標準でEmmetが使えるらしい!

という事で、評価を兼ねて使い始めた訳ですが、
なかなか使い勝手が良いですね。

 

ただ、標準のフォントだと一部の文字が化けるし、
そもそも、あまり見やすいとは言えないんですね。。

という訳で、
無料のプログラミング開発用フォントとして評判高い、
Source Han Code JPに変えて使っています。

設定する際に少しハマったので
導入方法を記載しておきます。

スポンサード リンク

1.ダウンロード

まずは、以下のサイトからフォントをダウンロードしましょう。

https://github.com/adobe-fonts/source-han-code-jp

画面を下にスクロールしていくと、
Download the fontsという項目がありますので、
Latest releaseをクリックしましょう。

download1

以下の画面が開くので、
「Source code (zip)」をクリックします。

download2

ダウンロードが始まるので、しばしご歓談を。

2.インストール

ダウンロードしたzipファイルを
解凍すると以下のフォルダが出来上がります。

  • OTC
  • OTF

OS X 10.8以降であれば、
OTCフォルダのフォントを
インストールすれば良いらしいですが、

今回はWindows環境だったので、
OTFフォルダを使います。

OTFフォルダの中には、
SourceHanCodeJPフォルダがあり、
更にその中に、7つのファイルがあります。

  • SourceHanCodeJP-Bold.otf
  • SourceHanCodeJP-ExtraLight.otf
  • SourceHanCodeJP-Heavy.otf
  • SourceHanCodeJP-Light.otf
  • SourceHanCodeJP-Medium.otf
  • SourceHanCodeJP-Normal.otf
  • SourceHanCodeJP-Regular.otf

これらを順番に、
全てインストールしていきましょう。

 

インストール方法は、
ファイルをダブルクリックし、

以下のウィンドウが開かれたら、
「インストール」をクリックします。
(すぐに終わるのでウィンドウは閉じてOKです)

install

3.VisualStudioCodeのフォントを変更

Visual Studio Codeを起動し、
上部メニュー「File」→「Preferences」→「User Settings」と開きます。

始めて開いた時は以下のように、
中味の無い状態で表示されるかと思います。

{ }の中に次ぎの文字を入力します。

 

適用後のファイルは以下のようになります。

入力後に保存すれば、
リアルタイムでフォントが切り替わります。

もし適用されない場合は、
Visual Studio Codeを再起動しましょう。

スポンサード リンク

僕の環境だと、
初回だけはリアルタイムで適用されず、

何度も何度もフォント名を変更して保存を
繰り返すハメになりました。

2回目からはリアルタイムに反映されましたが、
もしかすると、初めて使うフォントだと、
再起動が必要になるのかもしれません。

尚、フォントサイズを変えたい場合は、
以下の一文を追加すればOKです。

15の部分がフォントサイズになります。

フォントを変えるだけでも、
開発効率がアップしますよ!

是非お試しあれ。