初心者はまず「自動保存」「保存時の自動整形」「インデント設定」「フォントサイズ」だけ整えれば、作業ミスとストレスを大きく減らせます。
慣れてきたら、空白の可視化や括弧ガイドなどの効率化設定を追加し、チームや複数環境で使う場合はワークスペース設定や設定同期を活用するのが最適です。
【STEP2 応用編】効率化オプションを使いこなす
【STEP1】 初心者向け：まず整えるべき基礎設定が完了していれば安心です。
ここで紹介する設定は、作業効率やミス防止をさらに高める 「応用設定」 です。
今はすべてを覚える必要はありません。
学習のステップとして、次の授業感覚で取り組んでください。
1. 空白文字を可視化する
文章:
スペースやタブ、行末の不要な空白を目に見える形で表示します。
コードの微妙なズレやコピーしたコードの違いを瞬時に判断できます。
図解指示:
- コード行上にスペース・タブ・改行の記号を表示
- 「boundary / all」の違いを矢印で示す
- Before/Afterで可視化の効果を比較
補足:
- 「境界のみ表示」で十分
- 全表示すると逆に見づらくなる場合があります
2. 括弧ガイドを有効化する
文章:
ネストした括弧 { } や ( ) を線で結ぶことで、コード構造が視覚的に理解しやすくなります。
図解指示:
- Before: 括弧のみのコード
- After: 括弧ガイドが線で結ばれたコード
- 吹き出しで「ネスト構造が把握しやすい」と補足
効果:
- 括弧の閉じ忘れに気づきやすい
- 条件分岐や関数構造の理解が容易
3. ミニマップの表示を調整する
文章:
画面右側に表示されるコード全体のプレビューです。
ファイルが長い場合は役立ちますが、画面が狭い場合は邪魔になることもあります。
図解指示:
- ON: 右側にコード全体が表示
- OFF: スッキリした編集画面
- 矢印やラベルで「ON/OFF選択可能」を明示
補足:
- 個人の好みに合わせてOK
- 読みやすさ重視で設定
4. フォーマッタの挙動を理解する
文章:
STEP1で有効にした「保存時の自動整形」は、拡張機能や言語によって動作が異なります。
意図しない変形がある場合は、拡張機能側の設定を確認してください。
図解指示:
- 保存前/保存後のコード差分スクショ
- ハイライトで変化箇所を示す
- 吹き出しで「拡張機能による違い」と補足
STEP2応用編まとめ
文章:
STEP2で紹介した設定を組み合わせることで、作業効率と可読性がさらに向上します。
すべて設定する必要はありません。少しずつ慣れながら導入しましょう。
図解指示:
- STEP1完了 → 空白可視化 → 括弧ガイド → ミニマップ調整 → フォーマッタ理解
- 矢印で流れを可視化
- ハイライトで「ここまで設定すると効率が上がる」と示す
末尾リンク（STEP3実務編誘導）
応用設定をさらに実務で活用する方法は、STEP3実務編で確認できます。