こんにちは。ヒロユキです。
僕は、エディタ選びに迷ってる方に「Visual Studio Code」をおすすめしています。
理由は「利用者が多い」こと。
すこし単純な理由だと思われるかもしれません。けれど利用者が多いということは、それだけ情報が出回っているということになります。
なので、わからないことや知りたいことの情報収集がしやすいというメリットがあります。
今回は、VSコードを利用するにあたって最初に戸惑う「日本語表示」「外観の変更」「フォントの変更」について解説します。
この記事に書いてること
Visual Studio Codeの初期設定
OK！できるよ！黒い外観もカッコいいけど少し威圧感があるよね。見やすいのに変えてみようか！
僕も普段から「VSコード(!)」を利用しています。つみきのーとで解説している画面も、VSコードの編集画面です。インストールして一緒に学んでいきましょう。
Visual Studio Code（VSコード）
Microsoft社が開発したテキストエディタ。プログラミングコードを書くための補助機能が搭載されていて、多くの人が利用している最もポピュラーなエディタ。
VSコードのインストール
次のリンクから「Visual Studio Code（VS Codeエディタ）」をダウンロードします。
１.「今すぐダウンロード」をクリックする。
２.自分の使っているOS(!)を選んでダウンロード開始。ダウンロードしたファイルを選択すると、インストールが開始されます。
OS（オペレーティングシステム）
基本ソフトウェアのこと。PCは、基本ソフトウェア（OS）と応用ソフトウェア（アプリケーション）の組み合わせで動く。
VSコードの日本語表示
VSコードを初めて開くと、表示が英語になっています。
英語が読める人はこのままでも良いんですが…。やっぱり、日本語のほうがいいですよね？
これを日本語の表示にするには、VSコードの「拡張機能」をインストールします。
新しいバージョンだと、画面右下に「日本語表示」に変更できるポップアップが出てきます。
ポップアップが出てこない場合は、拡張機能を検索します。
検索がうまくできない場合は、下記のリンクからインストールできます。
拡張機能をインストールしたあと、VSコードを再起動すると表示が日本語に変わります。
VSコードの外観変更
VSコードの外観（テーマ）の変更方法は、WindowsとMacで少し違います。
「配色テーマ」には、色んな種類があります。
僕は柔らかい色合いが好きなので「Solarized Light」を使ってます。
自分の見やすいと思うものを選んでみましょう。
VSコードのフォント変更
プログラミング用のフォント
プログラミング用として、よく使われているフォントがあります。
そのフォントは「Ricty Diminished(!)」!！
Ricty Diminished
プログラミング用として使われているフォント。判別しづらい数字や、アルファベットの表記がわかりやすい。最大の特徴はバグの原因になる「全角空白の可視化」である。
HTMLやCSSなどのコードでは、全角空白が紛れ込むと表示がうまくできません。
例えば、通常のフォントをつかってコードを書いてみます。↓
どこかに2箇所「全角空白」が紛れ込んでるぞ。どこだかわかるかな？
これが「Ricty Diminished」だと、こうなります。↓
これは、わかりやすいですね！打ち間違いにすぐ気が付きます！
このようにフォントの設定を変えるだけで、小さなミスが減って作業効率が上がります。
すこし面倒ですが必ず設定しておきたいフォントですね。
フォントの設定方法
まずは、下記のリンクからフォントをダウンロードします。↓
ダウンロードが完了したらファイルを開いてインストールを忘れず。
次に、VSコードでフォントを設定します。
外観と同じようにWindowsとMacで若干の違いがあります。別々に見ていきましょう。
入力フォント名⇒ RictyDiminished
フォント名の入力は、コピペすれば間違いないぞ。
入力フォント名⇒ RictyDiminished
フォント名の入力は、コピペすれば間違いないぞ。
これでフォントの設定完了です。きちんと設定が反映されているか、編集画面で確認しましょう。
全角空白が可視化できていれば成功です。
Visual Studio Codeの初期設定 まとめ
それじゃまた。ヒロユキでした！
VSコードをインストールしたんですけど、黒い画面に英語がズラって並んでて…。これ、日本語にできたりしますか？