Visual Studio Code（以下、VSCode）は、世界中で人気の無料コードエディタです。
標準状態でも使いやすいですが、ユーザー設定をカスタマイズすることで、作業効率が大きく向上します。
たとえば、自動保存をオンにしたり、フォントサイズサイズを大きくして見やすくしたり、テーマの色を変更したり…など、作業スタイルに合わせた細かな調整ができます。
この記事では、初心者でも迷わず進められるように、VSCodeのユーザー設定の方法とオススメの設定をわかりやすく解説します。
この記事はこのような人におすすめ！
- VS Code をインストール済み、または使ってみたい初心者の方
- コーディング環境をもっと使いやすくしたい人
- 見た目や設定にこだわって、自分に合ったエディターにしたい人
VSCodeの「ユーザー設定」とは？
VSCodeには大きく分けて2種類の設定があります。
まずは、ユーザー設定から触るのがおすすめです。
ユーザー設定
VSCode全体に適用される設定。
テーマやフォントサイズ、自動保存の有無などを変更可能。
ワークスペース設定
特定のプロジェクトにのみ適用される設定。
プロジェクトごとに異なるルールを使いたいときに便利。
ユーザー設定を変更するには、以下の2つの方法があります。
設定画面（GUI）は、チェックボックスやプルダウンを使って直感的に操作ができ、簡単に設定が変更できます。
settings.jsonは直接コードを書き込むことで、より細かく高度な設定ができますが、書き方を間違えるとエラーになるので注意が必要です。
最初のうちは、設定画面から編集する方法がおすすめです。
環境を複数のPCで揃えたい ・ 詳細なカスタマイズをしたい方は、settings.jsonの設定を検討してみましょう！
ユーザー設定画面を開く方法
設定は、VS Code 画面右下の「歯車マーク」→「設定」をクリックすると「ユーザー設定」が開かれます。
「設定の検索」に設定したい内容を英語入力し、設定内容を編集してください。
おすすめのユーザー設定
Visual Studio Code は初期状態でも十分に使えますが、そのままだと「文字が小さくて読みにくい」「自分の好みに合わない配色で疲れてしまう」など、ちょっとした不便さを感じることがあります。
こうした「小さな違和感」を放置してしまうと、学習や作業が進むにつれて大きなストレスにつながってしまいます。
そこで役立つのが「ユーザー設定の変更」です。
フォントサイズやテーマカラーを自分好みに調整するだけで、作業のしやすさが格段にアップします。
特に初心者のうちは、環境を整えるだけでモチベーションを維持しやすくなるため、最初に触れておくことをおすすめします。
この章では、おすすめのユーザー設定を紹介していきます。
フォントサイズの変更（Font Size）
エディタの文字サイズを変更できます。
VS Codeの初期設定ではフォントサイズが小さめ（14px）なので、長時間の作業で目が疲れてきます。
筆者は「15px」に設定していますが、一般的には「16px～18px」くらいが見やすく、バランスが良いとされています。
自分のディスプレイや好みに合わせて調整してみてください。
14pxのイメージ
18pxのイメージ
マウスホイールでフォントサイズを拡大・縮小（Mouse Wheel Zoom）
Ctrlキー + マウスホイール回転でフォントサイズの拡大縮小ができるようになります。
一時的にフォントサイズを変えたい時などに、いちいち設定画面を開かなくても変更できるので便利です。
Editor: Mouse Wheel Zoomにチェックを入れるとオンになります。
自動保存（Auto Save）
ファイルの変更を自動で保存する機能です。保存忘れによるトラブルを防げます。
設定できる項目は4種類あります。
自動保存機能を使用する場合は、個人的に「afterDelay」が使いやすかったです。
| off | 自動保存機能を使用しない(デフォルト) |
| afterDelay | 最後に編集してから1秒後に自動保存 ※Auto Save Delayという項目から別途設定することで、好きな秒数に変更可能 |
| onFocusChange | 編集中のファイル以外の場所をクリックした時に自動保存 ※編集しているファイルとは別のファイルを開いた時などに保存されます |
| onWindowChange | VSCode以外の場所をクリックした時に自動保存 ※めも帳やブラウザなどVSCode以外のアプリを開いた時などに保存されます |
行の折り返し（Word Wrap）
コードや文章が横に伸びすぎて見づらいときは、自動で折り返す設定がおすすめです。
この設定しておくと、ウィンドウ幅に合わせてコードが折り返されるようになります。
特にノートパソコンなど画面が広くない場合に便利です。
設定できる項目は4種類あります。
| off | ウィンドウ幅に収まりきらない場合は、横スクロールバーが表示される(デフォルト) |
| on | ウィンドウ幅に合わせてコードが折り返されるようになります |
| wordWrapColumn | 半角 80 文字で折り返されるようになります ※Word Wrap Columnという項目から別途設定することで、文字数の指定が可能 |
| bounded | 「Word Wrap Columnで設定した幅」または「ウィンドウ幅」のどちらか狭い方で折り返されるようになります |
offにした場合
onにした場合
空白文字の表示（Render Whitespace）
スペースやタブなどの「目に見えない文字」を画面上に可視化する機能です。
「・」「→」などの記号で表示されるようになります。
設定できる項目は5種類ありますが、「all」にするのがオススメです。
| none | すべての空白文字を表示しない |
| boundary | 単語と単語の間にあるスペース以外の空白文字が表示されます |
| selection | テキストを選択した時のみ、空白文字が表示されます(デフォルト) |
| trailing | 文章の末尾に空白文字がある場合のみ表示されます |
| all | すべての空白文字を常時表示 |
ミニマップ（Minimap）
「ミニマップ」は、画面右側にコード全体が縮小して表示されます。
「あの部分、どこに書いたっけ？」と長いコードの中から特定の箇所をすばやく見つけるのに便利です。
最初のうちは必要性をあまり感じないかもしれませんが、コードが増えてくると活用の場面が増えてきます。
もし「画面がごちゃついて見づらい」と感じたら、「Editor › Minimap: Enabled」のチェックを外してオフにしてみましょう。
慣れてきたら再びオンにしてみるのもおすすめです。
Emmet（Trigger Expansion On Tab）
VS Codeには「Emmet（エメット）」という便利な補完機能が標準搭載されています。
HTML/CSSのタイピングミスを減らす＆入力スピードをグッと上げたい方におすすめの設定です。
この機能を使えば、HTMLやCSSのコードを短い記述で書いた後「Tab」キーを押すだけで、HTMLやCSSのコードを一瞬で展開できます。
例えば、ul>li*3 と入力して「Tab」を押すと、以下のようなリストが自動的に生成されます。
<ul>
<li></li>
<li></li>
<li></li>
</ul>Emmetを使用するには「Emmet: Trigger Expansion On Tab」にチェックが入っているか確認しましょう（入っていない場合はオンに）
カラーテーマ（Color Theme）
VS Codeのテーマは、エディター全体の色合いや雰囲気を一気に変えることができる便利な機能です。
長時間作業していると、背景色や文字色の違いが思った以上に目の疲れに影響してきます。
明るすぎる画面は長時間の作業で目が疲れる原因に。ダークテーマにするだけでも快適になります。
色のコントラストがはっきりしたテーマは、コードの構造がひと目で分かりやすくなり、作業効率アップにも効果的です。
VS Codeには、数十種類ほどテーマが標準搭載されていますので、自分に合ったテーマを見つけてみましょう！
初心者がつまづきやすいポイント
- Q試しに設定を色々いじったら戻せなくなってしまった
- A
設定画面右上の「…」から「設定(JSON)を開く」をクリックし、settings.jsonを開きます。
settings.jsonのコードを全て削除し、保存すると初期状態へ戻せます。
- Q設定画面(GUI)とsettings.jsonの両方で設定を変更してしまった
- A
settings.jsonが優先されるため、設定画面(GUI)で設定した内容は反映されません。
- Qフォントサイズを変更したいのに、どこで変えるのか分からない
- A
VS Code 画面右下の「歯車マーク」→「設定」→検索バーに「font size」と入力 → 「Editor: Font Size」を変更すればOKです。数字を入力すればエディタ文字の大きさが変わります。
VSCodeのユーザー設定で快適な開発環境を作ろう！
VSCodeは、ユーザー設定を少し変更するだけで自分に最適な開発環境を整えられます。
初心者の方は、まずは設定画面からテーマやフォントサイズから試し、慣れてきたらsettings.jsonを編集してみましょう。
自分に合ったカスタマイズを行うことで、毎日のコーディングが格段に快適になります。
次回は、より快適にコーディングできるようになる「拡張機能」について解説します。
プロの現場でも使われているものから、初心者にぴったりの便利なも拡張機能を、厳選してご紹介しますのでまとめて紹介しますので、ぜひ続けてご覧ください。
VS Codeが英語表記になっている場合
以下の記事を参考に日本語表記にした方がユーザー設定がスムーズに進められます。