無料の高機能コードエディタ　Visual Studio Codeのセットアップ

VS Codeのダウンロードとインストール手順

公式サイトから最新のVS Codeをダウンロードしておきましょう。
バージョンが古いと拡張機能が正しく動かないことがあります。

テーマの変更（見た目を明るく／暗く）

画面の色が見づらいと感じたら、テーマを変えてみましょう。

1. メニューから「表示」→「テーマ」→「色のテーマ」
2. 一覧から好みのテーマ（Light / Darkなど）を選ぶ

フォントサイズを大きくする（画面が見やすくなる）

コードが小さすぎて読みにくいときは、フォントサイズを変更しましょう。

1. Ctrl + ,（カンマ）で設定画面を開く
2. 「フォントサイズ」と検索
3. Editor: Font Size を見つけて数値を変更（例：18）
4. またはショートカットキー　ctrl + (+キー) やctrl+(-キー)でも拡大縮小可能

保存時に自動整形（Prettier連携時に便利）

コードをきれいに整える拡張機能「Prettier」を使っている場合、保存したときに自動で整形する設定も便利です。

1. VSCの右下にある設定のボタンをクリックします。
2. 設定画面の上に検索ツールがあるので「format on save」と検索しましょう
3. Editor: Format On Save にチェック を入れると、保存する都度、コードを整形してくれて便利です

自動保存の設定（うっかり保存忘れ防止）

タイピングのあと、自動で保存されるようにもできます。

1. VSCの右下にある設定のボタンをクリックします。
2. 設定画面の上に検索ツールがあるので「auto save」と検索
3. Files: Auto Save → afterDelay を選択
4. その下の Files: Auto Save Delay に 1000（1秒）単位で設定ができます。

不要なスペースを自動で削除（地味だけど大事）

スペースだけの行や行末スペースを自動で削除してくれます。チーム開発でも好まれる設定です。

1. 設定画面で「trim」と検索
2. Files: Trim Trailing Whitespace にチェック します。
3. Files: Insert Final Newline にもチェック 。（最後の空行を自動挿入）

フォルダを開いてプロジェクト管理

1つのファイルではなく、フォルダ単位で開くのが基本です。

1. メニューバーの「ファイル」→「フォルダを開く」から、プロジェクトとなるフォルダ（例：my-website）を選択します。
2. サイドバーにその中のHTMLやCSSファイルが一覧で表示されるようになります。
3. ファイル単体ではなく、フォルダで選択するようにしましょう。