初心者はまず「自動保存」「保存時の自動整形」「インデント設定」「フォントサイズ」だけ整えれば、作業ミスとストレスを大きく減らせます。
慣れてきたら、空白の可視化や括弧ガイドなどの効率化設定を追加し、チームや複数環境で使う場合はワークスペース設定や設定同期を活用するのが最適です。
はじめに
Visual Studio Code の設定は、すべてを一度に行う必要はありません。
初心者はまず 「自動保存」「保存時の自動整形」「インデント設定」「フォントサイズ」 だけ整えれば、作業ミスやストレスを大きく減らせます。
慣れてきたら、空白の可視化や括弧ガイドなどの効率化設定を追加し、チームや複数環境で使う場合はワークスペース設定や設定同期を活用するとさらに便利です。
この記事は 教材型の学習ストーリーに沿って、STEPごとに解説しています。
■ この記事の読み方
【STEP1】 初心者向け：まず整えるべき基礎設定
ここをやれば基礎は完了
初心者の方は、まずこのSTEPだけを順番に実行してください。
目的
VS Code を「ミスが減り、ストレスなく使える状態」にする
対象
Visual Studio Code を使い始めたばかりの方、設定がよく分からず初期状態のまま使っている方
設定項目
| 設定項目 | settings.json プロパティ | 推奨値 | 効果・ポイント |
|---|---|---|---|
| 自動保存 | files.autoSave | "afterDelay" または "onWindowChange" | 保存し忘れによる作業ミスを防止。常に最新状態で実行・コミット可能。 |
| 保存時の自動整形 | editor.formatOnSave | true | ファイル保存時にコードを自動整形。コードスタイルが統一され、見た目の乱れを防止。 |
| インデント統一 | editor.insertSpaces / editor.tabSize | true / 2 または 4 | スペース2または4を使用し、チームや教材とズレにくくする。 |
| フォントサイズ | editor.fontSize | 14〜16 | 長時間作業でも目が疲れにくい適切なサイズに調整。 |
1. 自動保存を有効にする
afterDelay を選択
効果：保存忘れによる修正ミスや作業ロスを防ぐ
設定手順
- 設定画面を開く（歯車 → 設定）
- 「auto save」で検索
afterDelayを選択
2. 保存時に自動で整形する
「保存時にフォーマット」を ON
効果：インデントのズレや見た目の乱れを自動修正
設定手順
- 「format on save」で検索
- 「保存時にフォーマット」を ON
3. インデントを統一する
タブ幅：2 または 4
効果：チームや教材とズレにくくなる
設定手順
- スペース使用：ON
- タブ幅：2 または 4
4.4. フォントサイズを調整する
- 効果：文字が小さすぎると目が疲れやすい
- 推奨値：14〜16
STEP1 のまとめ
ここまで設定できていれば、
- 保存忘れによるミス
- 見た目の崩れ
- 余計なストレス
は大きく減ります。
（参考）STEP1の設定をまとめて書く場合（settings.json）
{
"files.autoSave": "afterDelay",
"editor.formatOnSave": true,
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.fontSize": 15
}※ 無理に使う必要はありません。GUI で設定できていれば十分です。
次の STEP は、慣れてきてからで問題ありません。
【STEP2】 慣れてきたら設定したい効率化オプション
STEP1が完了していれば安心
STEP2の内容は、今は無理に覚える必要はありません。
作業効率やミス防止のための「次の授業」として参考にしてください。
目的
- ミス削減
- 可読性向上
- 作業スピード改善
設定項目
- 空白文字の可視化
- 括弧ガイド
- ミニマップ調整
- フォーマッタ挙動の理解
末尾リンク案（応用編）
詳しく学びたい方は、STEP2の応用編記事もご覧ください。
【STEP3】 複数環境・チームで使う場合の設定
STEP1が完了していれば安心
チーム利用や複数PCでの作業向けの内容です。
初心者の方は、まずSTEP1を終えてから戻ってきてください。
目的
- 設定の再現性・共有
- 属人化防止
設定項目
- ユーザー設定 vs ワークスペース設定
- .vscode/settings.json
- 設定同期（Settings Sync）
末尾リンク案（実務編）
詳しく学びたい方は、STEP3の実務編記事もご覧ください。
まとめ
- STEP1 = 初心者必修教材
- STEP2・STEP3 = 「先の授業紹介＋安心感」
- 【STEP2】 慣れてきたら設定したい効率化オプション詳細解説ページ｜【STEP3】 複数環境・チームで使う場合の設定詳細解説ページ
学習者は STEP1 から順に学ぶことで、迷わず基礎から応用まで成長できます。