Visual Studio Codeのインストール方法と必須の初期設定ガイド

Visual Studio Code（VSCode）をインストールする手順

結論から言うと、VSCodeのインストールは公式サイトからインストーラーをダウンロードして実行するだけで完了します。
OS（Windows/Mac）を自動判別してくれるため、難しい操作は必要ありません。

Step1：公式サイトからダウンロード

まずは、VSCodeの公式サイトにアクセスしましょう。

• 公式サイトURL：https://code.visualstudio.com/
• 中央に表示される「Download for Windows」または「Download for Mac」をクリックします。

Step2：インストールを実行

ダウンロードしたファイルを実行し、画面の指示に従ってインストールを進めます。

VSCodeを日本語化する設定方法

VSCodeは標準では英語表記ですが、拡張機能「Japanese Language Pack」を導入することで、メニューや設定画面をすべて日本語に変更できます。

1. VSCodeを起動し、左サイドバーにある四角いアイコン（Extensions）をクリックします。
2. 検索窓に Japanese と入力します。
3. 一番上に表示される「Japanese Language Pack for Visual Studio Code」の [Install] ボタンをクリックします。
4. 右下に「Restart」というボタンが表示されるので、クリックしてVSCodeを再起動します。

再起動後、画面が日本語になっていれば成功です。

作業効率を最大化するおすすめの初期設定

デフォルトの状態でも使えますが、「自動保存」と「自動整形」の設定を行うだけで、ミスが減り開発スピードが劇的に向上します。

1. ファイルの自動保存（Auto Save）

ファイルを保存し忘れてブラウザに反映されない、といったミスを防ぎます。

• 「ファイル」＞「基本設定」＞「設定」を開く（Macは「Code」＞「基本設定」）。
• 検索窓で Auto Save と入力。
• 設定値を 「afterDelay」 に変更します。

2. 保存時の自動フォーマット

コードを保存した瞬間に、インデントなどを綺麗に整えてくれる設定です。

• 設定画面で format on save と入力。
• 「Editor: Format On Save」 のチェックボックスをオンにします。

3. settings.jsonへの推奨設定まとめ

一括で設定を適用したい場合は、settings.json に以下のコードを貼り付けてください。

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "workbench.iconTheme": "material-icon-theme"
}

最初に入れておくべき推奨拡張機能（日本語以外）

日本語化以外に、まず最初に入れておくと便利な拡張機能を3つ厳選しました。

これらの拡張機能は、日本語化と同じく「Extensions」パネルから名前を検索してインストールできます。