最近、仕事でVisualStudioCodeを使い始めました。
今までは、Bracketsという
Adobe社のものを使ってましたが、
VisualStudioCodeは、
標準でEmmetが使えるらしい！
という事で、評価を兼ねて使い始めた訳ですが、
なかなか使い勝手が良いですね。
ただ、標準のフォントだと一部の文字が化けるし、
そもそも、あまり見やすいとは言えないんですね。。
という訳で、
無料のプログラミング開発用フォントとして評判高い、
Source Han Code JPに変えて使っています。
設定する際に少しハマったので
導入方法を記載しておきます。
１．ダウンロード
まずは、以下のサイトからフォントをダウンロードしましょう。
https://github.com/adobe-fonts/source-han-code-jp
画面を下にスクロールしていくと、
Download the fontsという項目がありますので、
Latest releaseをクリックしましょう。
以下の画面が開くので、
「Source code (zip)」をクリックします。
ダウンロードが始まるので、しばしご歓談を。
２．インストール
ダウンロードした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です）
３．VisualStudioCodeのフォントを変更
Visual Studio Codeを起動し、
上部メニュー「File」→「Preferences」→「User Settings」と開きます。
始めて開いた時は以下のように、
中味の無い状態で表示されるかと思います。
|
1 2 3 4 |
// Place your settings in this file to overwrite the default settings { } |
{ }の中に次ぎの文字を入力します。
|
1 |
"editor.fontFamily": "源ノ角ゴシック Code JP" |
適用後のファイルは以下のようになります。
|
1 2 3 4 |
// Place your settings in this file to overwrite the default settings { "editor.fontFamily": "源ノ角ゴシック Code JP" } |
入力後に保存すれば、
リアルタイムでフォントが切り替わります。
もし適用されない場合は、
Visual Studio Codeを再起動しましょう。
僕の環境だと、
初回だけはリアルタイムで適用されず、
何度も何度もフォント名を変更して保存を
繰り返すハメになりました。
2回目からはリアルタイムに反映されましたが、
もしかすると、初めて使うフォントだと、
再起動が必要になるのかもしれません。
尚、フォントサイズを変えたい場合は、
以下の一文を追加すればOKです。
|
1 |
"editor.fontSize": 15 |
15の部分がフォントサイズになります。
フォントを変えるだけでも、
開発効率がアップしますよ！
是非お試しあれ。
