【Visual Studio Code入門】インストールしたらまずはコレ！オススメのテーマ/フォントと拡張機能

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。

今回は、これからプログラミングを始める方に向けて、Microsoftがリリースしている、開発業界では知らない人がいないと言っても過言ではない程メジャーなソースコードエディタ、「Visual Studio Code」をより便利に、そしてよりスタイリッシュに使えるテーマ/フォントと拡張機能をお伝えします。コーディングを始める前に、ぜひ試してみてください。

テーマ

Visual Studio Code(以下、VSCode)には、ソフトウェアのシンタックスハイライト(ソースコードを構文に合わせて色付けしてくれる機能)やレイアウトの部分の配色を、テーマをインストールすることで、自由に変更できます。

VSCodeには白基調のライトテーマと黒基調のダークテーマがあり、私は目に優しいダークテーマが好みです。

沢山のテーマがVSCodeには存在しているのですが、私が試した様々な配色テーマの内、これだ！！と気に入りそれ以降ずっと利用している配色テーマを1つ、ご紹介します。

Community Material Theme Darker High Contrast

いくつかのテーマがまとめて入っている、Community Material Themeに入ってる、暗め&ハイコントラストのテーマです。Community Material Themeはレイアウトの境界がハッキリしていないものがデフォルトなのですが、こちらはハッキリしていて、かつ黒基調のシンプルイズベストな見やすいテーマです。シンタックスハイライトの色も分かりやすく、開発を行いやすくしてくれます。是非、インストールしてみてください。（見た目ってモチベーションアップにも繋がると思っています。）

インストール方法は、左上に縦に並んでいるアイコンバーから拡張機能タブを開き、こちらを検索、インストールし、自動で出てきたメニューから選択すると適用されます。

フォント

ソースコードを記述するにあたり、フォントは開発効率に影響する点もあります。

プログラミングには「等幅フォント」という、すべての文字が等しい幅で構成されているフォントが適しています。幅が等しいため、ブロック単位やHTMLのタグ内でインデントを付けても、縦の位置がすべて同じになるため、コードの可読性が上がり、編集がしやすくなります。また、スタイリッシュな文字なものを利用すれば、文字そのものも読みやすくなります。

この記事では、3つおすすめのフォントをご紹介します。

Source Han Code JP

Source Han Code JPはクリエイター向けソフトウェアで有名なAdobeが2015年にリリースしたプログラミング向け等幅フォントです。

日本語フォント「源ノ角ゴシック」と英数字フォント「Source Code Pro」がベースのフォントです。

半角文字と全角文字のサイズの比が2:3に設定されており、日本語と英語が混在する環境でも自然なサイズ感覚で表示されるのが特徴です。

1やI(アイ)、l(エル)、0(ゼロ)やO(オー)の判別もしやすく、コードの可読性、記述のしやすさに大きく寄与しています。

また、文字の太さが7種類あり、お使いのディスプレイや好みに合わせて自由に変更可能です。

私はVSCodeにおいてはLight、サイズ13.5pxを使用しております。(フルHDディスプレイ)

こちらからダウンロードできます。すべてのフォントサイズがまとめて入っているSourceHanCodeJP.ttcをダウンロードし、開いて[インストール]のボタンをクリックすることでインストールできます。MacOSの方は、Source code (zip)から.otfファイルを利用しましょう。

HackGen35

HackGen35は、プログラミング向け英字フォント「Hack」と源ノ角ゴシックの印象を柔らかくした日本語フォント、「源柔ゴシック」を合体したフォントです。

tawara氏という方が制作しております。

モダンなデザインなのに丸っこくてどこかかわいさのある、こちらも見やすいフォントです。

HackGenには半角1:全角2と半角3:全角5の比率のフォントバリエーションが存在します。私は3:5のHackGen35をターミナルソフトで利用しています。

VSCodeにはソースコードとターミナルのフォントをそれぞれ別で設定できるのですが、私はターミナルのフォントにこちらを利用しております。

こちらのリンクからダウンロードできます。Zipファイルを解凍してお好みのフォントをインストールしてご利用ください。

各バリエーションの説明はこちらからご覧いただけます。

PlemolJP35

PlemolJPは、HackGenを制作したtawara氏が制作した、IBMが2021年にリリースした日本語フォント、「IBM Plex Sans JP」と2018年リリースの等幅英字フォント、「IBM Plex Mono」を合体したフォントです。

IBM Plex由来の非常にスタイリッシュで美しい、様々な業界で評価の高い文字スタイルを日本語混在のプログラミングに最適な形で実装されたフォントです。私は日本語フォントが特に美しいと感じました。

全角スペースを可視化したり、英数字へのフォントヒンティング(Windowsでフォントを見やすくする技術)を行ったり、作者独自のこだわりも反映された、完成度の高いフォントです。

太さも8種類用意されており、好み/環境に最適な物を選ぶことができます。（画像はPlemolJP35 Regular）

こちらから詳細の説明の確認とダウンロードが行えます。

フォントの設定方法

フォントはVSCodeの設定を開き、↑の画像でマークされている内容を検索ボックスに入力し、変更したいフォントを手入力します。その際、環境に合わせてサイズも変更するとより効果的です。

以上がおすすめフォントの紹介でした。続いては、おすすめの拡張機能の紹介です。

拡張機能

VSCodeには、拡張機能といって、開発を便利に進めるのに役立つ機能や、特定の言語/フレームワーク/サービスを利用するためにインストールが必須のものがあり、導入することで、VSCode上での開発をスムーズに進める事の出来る利点があります。今回は、便利に開発を進められる機能をご紹介します。

vscode-icons

こちらは機能、というより見た目の操作ですが、フォルダ名、拡張子から、非常に多くの種類のアイコンを表示してくれます。

HTML CSS Support

CSSでクラス名を適用している際、HTMLのclass属性を入力するときにサジェスト(候補)を表示し、選択すると自動で補完してくれる拡張機能です。

indent-rainbow

ソースコードにおいて、タグや括弧で囲ったブロックの中でのインデントを、着色してくれる拡張機能です。

これがあると今自分はどこのコードブロックを触っているのかが視覚的に理解できるので、重宝しています。

Code Spell Checker

ソースコード内のスペルチェックを行い、スペルミスと思われる個所のコードに、青色の波下線を表示してくれます。

上記のコードにおいては問題がないため無視していますが、タイプミスによるエラーの軽減に役立ちます。

Auto Rename Tag

Auto Rename Tagは、既に入力をし終えたHTML等のタグの片方の名前を変更するだけで、もう片方(閉じタグ)も自動で同じ内容に変更してくれます。

面倒なカーソル移動、閉じタグのリネームが不要なため、HTMLの記述効率が格段に上がります。

open in browser

open in browserは、VSCodeで開いているHTMLファイルで、Alt+Bを押すとOSの規定に設定されているブラウザを自動で起動し、HTMLファイルを表示してくれる拡張機能です。

作成したコードの検証に役立ちます。

以上が拡張機能のご紹介でした。

最後に

VSCodeには他にも沢山の拡張機能やテーマが存在します。ぜひ、こちらだけでなく、ご自身にあった物を探してみて下さい。

蛇足ですが、Webアプリケーションフレームワーク、ASP.NET Core MVCの初心者向けチュートリアルを含んだ記事を4本立てで作成しました。

よろしければこちらもご覧ください。

【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？初心者向けに特徴とできることを解説！

【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを追加する方法

【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！

【ASP.NET Core MVC入門】④Modelを使わずにサイト間でデータを受け渡す方法を解説！

About サイオステクノロジーの中の人 5 Articles

サイオステクノロジーで働く中の人です。

Twitter YouTube