# Visual Studio Codeの文字サイズやタブサイズの設定方法

URL: https://webrandum.net/vscode-settings-font-size-tab-size/
公開日: 2022-08-10
更新日: 2022-08-10
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

デフォルト状態のVisual Studio Codeでは、文字サイズがかなり小さいです。

![デフォルトのフォントサイズ](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-5.png)

俯瞰して見る分にはこの文字サイズがちょうどいいのかもしれませんが、1日中小さい文字を見続けているとかなり目が疲れます。

また、デフォルトではタブ1つあたりのスペースの数が4つに設定されてしまっているので、文字サイズを上げると1行に表示できる文字数が少なくなってしまいます。

今回はVisual Studio Codeで文字サイズの変更と、それと一緒にタブの設定方法についてまとめておきます。

## 文字サイズの変更

### デフォルトの文字サイズを変更する

Visual Studio Codeのメニューバーの［Code］→［基本設定］→［設定（command + ,）］を選択して設定画面を開いて検索窓に「font size」と入力します。

「Editor: Font Size」にフォントサイズをpx指定します。

![Visual Studio CodeのFont Sizeの設定](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_2-4.png)

デフォルトは12pxになっています。

自分の場合は「16px」にしています。

これで文字サイズが大きくなって見やすくなりました。

![フォントサイズ16pxのVisual Studio Code](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_3-4.png)

### 拡大・縮小を使用する

［表示］→［外観］→［拡大（command + =）］と［縮小（command + -）］で画面全体の拡大縮小ができます。

これでも文字サイズは大きくなりますが、設定画面から文字サイズを変更するのと違って、サイドバーやファイルタブ部分、下のアクティビティバーのサイズまで変わります。

![画面全体の拡大](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_4-2.png)

［表示］→［外観］→［ズームのリセット [⌘NumPad0]］で拡大率を100%に戻せます。

コーディング中は目に負担のないように少しフォントサイズは大きめにしておいて、全体を俯瞰して見たいときはズームアウトして確認。

確認が終わったら拡大率を戻してまた作業という風に使っています。

## タブ設定

Visual Studio Codeのメニューバーの［Code］→［基本設定］→［設定（command + ,）］を選択して設定画面を開いて検索窓に「tab size」と入力します。

あとは「Editor: Tab Size」に1つのタブに相当するスペースの数を設定します。

![Visual Studio Codeのタブの設定](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_5-2.png)

デフォルトは「4」になっていて、そのままだと画面を拡大したり文字サイズを大きくしたときに、すぐ横幅いっぱいになってしまうので「2」にしています。

また、個人的な感覚ですがコーディングはスペースの数は「2」の方がよく見かけます。