VS Code初期設定10選｜最初にやるべき設定

導入

VS Codeをインストールしたけど、設定は何も変えていない。そんな人は多いのではないでしょうか？

VS Codeは初期設定のままでも使えます。しかし、少し設定を変えるだけで格段に使いやすくなります。文字が見やすくなったり、保存し忘れがなくなったり、コードが自動で整ったり。

この記事では、中高生のプログラミング学習に最適な初期設定を10個厳選して紹介します。VS Codeのインストールが終わったら、すぐに設定しましょう。5〜10分で完了します。

設定画面の開き方

まず、VS Codeの設定画面を開く方法を覚えましょう。

設定画面を開くショートカット：

• Windows: Ctrl + ,（コントロール + コンマ）
• Mac: Cmd + ,（コマンド + コンマ）

設定画面が開くと、検索ボックスと設定項目の一覧が表示されます。検索ボックスに設定名を入力すれば、目的の設定をすぐに見つけられます。

VS Codeの設定は settings.json というファイルに保存されます。しかし、初心者のうちはこのファイルを直接編集する必要はありません。設定画面（GUI）から変更すれば十分です。

VS Codeの基本セットアップがまだの人は、先にそちらを済ませてください。

おすすめ設定10選

1. Auto Save（自動保存）

何が嬉しいか： ファイルの保存し忘れがなくなります。コードを書いたのに保存を忘れて「動かない！」と焦る経験はありませんか？自動保存をオンにすれば、その心配がゼロになります。

設定方法：

• 設定画面を開きます（Ctrl + , / Cmd + ,）
• 検索ボックスに「Auto Save」と入力します
• 「Files: Auto Save」の項目を見つけます
• ドロップダウンから「afterDelay」を選びます

これで、少し時間が経つと自動的にファイルが保存されます。

2. Font Size（文字サイズを大きく）

何が嬉しいか： コードが読みやすくなります。初期設定の文字サイズ（14px）は少し小さいと感じる人が多いです。16〜18pxにすると目が疲れにくくなります。

設定方法：

• 検索ボックスに「Font Size」と入力します
• 「Editor: Font Size」の数値を変更します
• おすすめは「16」または「18」です

3. Word Wrap（折り返し表示）

何が嬉しいか： 長い行が画面内に収まるようになります。折り返しがオフだと、長い行は右にはみ出して横スクロールが必要になります。オンにすれば、画面幅で自動的に折り返されます。

設定方法：

• 検索ボックスに「Word Wrap」と入力します
• 「Editor: Word Wrap」を「on」に変更します

特にHTMLを書くときは、1行が長くなりがちです。折り返し表示にしておくと快適です。

4. Tab Size（インデント幅）

何が嬉しいか： コードの階層構造が見やすくなります。インデントとは、行の先頭に入れる空白のことです。初期設定は4スペースですが、2スペースのほうがコンパクトで見やすいという人も多いです。

設定方法：

• 検索ボックスに「Tab Size」と入力します
• 「Editor: Tab Size」の数値を変更します
• HTML/CSSの学習には「2」がおすすめです

5. Format On Save（保存時に自動整形）

何が嬉しいか： ファイルを保存するたびに、コードが自動的にきれいに整います。インデントのズレや余分なスペースが自動で修正されます。

設定方法：

• 検索ボックスに「Format On Save」と入力します
• 「Editor: Format On Save」にチェックを入れます

この設定は、後で紹介するPrettierという拡張機能と組み合わせると効果的です。

6. Bracket Pair Colorization（括弧の色分け）

何が嬉しいか： 対応する括弧（かっこ）が同じ色で表示されます。括弧の閉じ忘れに気づきやすくなります。コードが複雑になるほど、この機能のありがたさがわかります。

設定方法：

• 検索ボックスに「Bracket Pair」と入力します
• 「Editor: Bracket Pair Colorization」にチェックが入っていることを確認します

最新のVS Codeでは初期設定でオンになっています。もしオフになっていたら、オンにしましょう。

7. Minimap（ミニマップの表示/非表示）

何が嬉しいか： 画面を広く使えます。ミニマップとは、エディタの右端に表示されるコード全体の縮小図です。便利な機能ですが、画面が小さいノートPCでは邪魔に感じることがあります。

設定方法：

• 検索ボックスに「Minimap」と入力します
• 「Editor: Minimap: Enabled」のチェックを外します

画面が広いデスクトップPCなら、オンのままでも問題ありません。自分の環境に合わせて選んでください。

8. Theme（カラーテーマの変更）

何が嬉しいか： 見た目が好みの配色になり、長時間のコーディングが楽になります。暗い背景（ダークテーマ）は目に優しいと言われています。

設定方法：

• Ctrl + K → Ctrl + T（Macは Cmd + K → Cmd + T）を押します
• テーマの一覧が表示されます
• 上下キーでプレビューしながら、好きなテーマを選びます

おすすめのテーマ：

• Dark+（初期設定のダークテーマ、シンプルで見やすい）
• One Dark Pro（人気の高いダークテーマ）
• GitHub Theme（明るい配色が好きな人向け）

9. Terminal: Default Profile（ターミナル設定）

何が嬉しいか： VS Code内でコマンドを実行できます。ターミナルとは、文字でパソコンに命令を出す画面のことです。VS Code内にターミナルがあれば、画面を切り替えずに作業できます。

設定方法：

• Ctrl + `（バッククォート）でターミナルを開きます
• 検索ボックスに「Terminal Default Profile」と入力します
• お使いのOSに合ったプロファイルを選びます（Windows: PowerShell、Mac: zsh）

ターミナルは今すぐ使わなくても大丈夫です。学習が進むと必要になるので、開き方だけ覚えておきましょう。

10. おすすめ拡張機能3つ

設定と合わせて、最初に入れておきたい拡張機能を3つ紹介します。

① Japanese Language Pack（日本語化）

VS Codeのメニューを日本語にする拡張機能です。英語のままだと設定項目が探しにくいので、最初に入れましょう。

② Live Server（自動リロード）

HTMLファイルを保存するたびに、ブラウザが自動でリロードされます。CSSでデザインを調整するときに特に便利です。詳しい使い方はLive Serverの解説記事を参考にしてください。

③ Prettier（コード整形）

コードを自動的にきれいに整えてくれる拡張機能です。先ほどの「Format On Save」と組み合わせると、保存するだけでコードが整います。

拡張機能のインストール方法は、拡張機能タブ（Ctrl + Shift + X / Cmd + Shift + X）から名前を検索してインストールボタンを押すだけです。

設定のバックアップ方法

設定を別のPCでも使いたい場合は、Settings Sync（セッティングス シンク） を使いましょう。

Settings Syncとは、VS Codeの設定をクラウドに保存する機能です。GitHubアカウントまたはMicrosoftアカウントでログインすると、設定が自動的に同期されます。

有効にする方法：

• 左下の歯車アイコンをクリックします
• 「設定の同期をオンにする」を選びます
• GitHubまたはMicrosoftアカウントでサインインします

これで、学校のPCと自宅のPCで同じ設定が使えるようになります。拡張機能やテーマも同期されるので、環境構築の手間が省けます。

まとめ

すべて設定する必要はありません。気になったものから試してみてください。

補足

HTML用：Emmet補完有効化、閉じタグ自動入力。JavaScript用：保存時自動整形、自動インポート。最低限の設定：fontSize:15、tabSize:2、wordWrap:"on"、autoSave:"afterDelay"。この4つで快適になります。