【Visual Studio Code】VSコードをもっと使いやすくする3つの初期設定

アイキャッチ04

こんにちは。ヒロユキです。

僕は、エディタ選びに迷ってる方に「Visual Studio Code」をおすすめしています。

理由は「利用者が多い」こと。

すこし単純な理由だと思われるかもしれません。けれど利用者が多いということは、それだけ情報が出回っているということになります。

なので、わからないことや知りたいことの情報収集がしやすいというメリットがあります。

今回は、VSコードを利用するにあたって最初に戸惑う「日本語表示」「外観の変更」「フォントの変更」について解説します。

Visual Studio Codeの初期設定

小松田くん

VSコードをインストールしたんですけど、黒い画面に英語がズラって並んでて…。これ、日本語にできたりしますか?

尾地ヒロユキ

OK!できるよ!黒い外観もカッコいいけど少し威圧感があるよね。見やすいのに変えてみようか!

僕も普段から「VSコード(!)」を利用しています。つみきのーとで解説している画面も、VSコードの編集画面です。インストールして一緒に学んでいきましょう。

Visual Studio Code(VSコード)

Microsoft社が開発したテキストエディタ。プログラミングコードを書くための補助機能が搭載されていて、多くの人が利用している最もポピュラーなエディタ。

VSコードのインストール

次のリンクから「Visual Studio Code(VS Codeエディタ)」をダウンロードします。

Visual Studio Code

vsコードの解説1

1.「今すぐダウンロード」をクリックする。

vsコードの解説2

2.自分の使っているOS(!)を選んでダウンロード開始。ダウンロードしたファイルを選択すると、インストールが開始されます。

OS(オペレーティングシステム)

基本ソフトウェアのこと。PCは、基本ソフトウェア(OS)と応用ソフトウェア(アプリケーション)の組み合わせで動く。

VSコードの日本語表示

VSコードを初めて開くと、表示が英語になっています。

英語が読める人はこのままでも良いんですが…。やっぱり、日本語のほうがいいですよね?

vsコードの解説3

これを日本語の表示にするには、VSコードの「拡張機能」をインストールします。

新しいバージョンだと、画面右下に「日本語表示」に変更できるポップアップが出てきます。

vsコードの解説4

ポップアップが出てこない場合は、拡張機能を検索します。

vsコードの解説5
  1. メニューサイドバーの四角が集まったアイコンを選択。
  2. 検索ボックスで「Japanese」を検索。
  3. 「Japanese Language Pack for VS Code」をインストール。

検索がうまくできない場合は、下記のリンクからインストールできます。

Japanese Language Pack

拡張機能をインストールしたあと、VSコードを再起動すると表示が日本語に変わります。

VSコードの外観変更

VSコードの外観(テーマ)の変更方法は、WindowsとMacで少し違います。

Macの場合
  1. 画面左上の「Code」をクリック。
  2. 「基本設定」をクリック。
  3. 「配色テーマ」を選択。
vsコードの解説6
Windowsの場合
  1. 画面左上の「ファイル」をクリック。
  2. 「ユーザー設定」をクリック。
  3. 「配色テーマ」を選択。
vsコードの解説8

「配色テーマ」には、色んな種類があります。

僕は柔らかい色合いが好きなので「Solarized Light」を使ってます。

vsコードの解説9

自分の見やすいと思うものを選んでみましょう。

VSコードのフォント変更

プログラミング用のフォント

プログラミング用として、よく使われているフォントがあります。

そのフォントは「Ricty Diminished(!)」!!

Ricty Diminished

プログラミング用として使われているフォント。判別しづらい数字や、アルファベットの表記がわかりやすい。最大の特徴はバグの原因になる「全角空白の可視化」である。

HTMLやCSSなどのコードでは、全角空白が紛れ込むと表示がうまくできません。

例えば、通常のフォントをつかってコードを書いてみます。↓

\全角空白を探せ/
vsコードの解説10
尾地ヒロユキ

どこかに2箇所「全角空白」が紛れ込んでるぞ。どこだかわかるかな?

これが「Ricty Diminished」だと、こうなります。↓

正解!!
vsコードの解説11
小松田くん

これは、わかりやすいですね!打ち間違いにすぐ気が付きます!

このようにフォントの設定を変えるだけで、小さなミスが減って作業効率が上がります。

すこし面倒ですが必ず設定しておきたいフォントですね。

フォントの設定方法

まずは、下記のリンクからフォントをダウンロードします。↓

Ricty Diminished

vsコードの解説12
リンク先の画面
尾地ヒロユキ

ダウンロードが完了したらファイルを開いてインストールを忘れず

次に、VSコードでフォントを設定します。

外観と同じようにWindowsとMacで若干の違いがあります。別々に見ていきましょう。

Macの場合
  1. 画面左上の「Code」をクリック。
  2. 「基本設定」をクリック。
  3. 「設定」を選択。
  4. 設定画面の「FontFamily」に入力。

入力フォント名⇒ RictyDiminished

尾地ヒロユキ

フォント名の入力は、コピペすれば間違いないぞ。

vsコードの解説13
Windowsの場合
  1. 画面左上の「ファイル」をクリック。
  2. 「ユーザー設定」をクリック。
  3. 「設定」を選択。
  4. 設定画面の「FontFamily」に入力。

入力フォント名⇒ RictyDiminished

尾地ヒロユキ

フォント名の入力は、コピペすれば間違いないぞ。

vsコードの解説14

これでフォントの設定完了です。きちんと設定が反映されているか、編集画面で確認しましょう。

全角空白が可視化できていれば成功です。

Visual Studio Codeの初期設定 まとめ

VSコードの基本設定
  1. VSコードのダウンロード
    Visual Studio Code
  2. VSコードのインストール
  3. 日本語表示に変更
    Japanese Language Pack
  4. 外観(テーマ)の変更
  5. フォントを変更
    Ricty Diminished

それじゃまた。ヒロユキでした!

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪