プログラミングを始めるなら、まずは快適な開発環境を整えましょう。本記事では、Visual Studio Code（VSCode） のインストールから基本設定、おすすめ拡張機能まで詳しく解説します。
1. VSCodeのインストール
① VSCodeのダウンロード
まずは公式サイトからVSCodeをダウンロードします。
🔗 Visual Studio Code公式サイト
お使いのOSに合わせて、以下のバージョンを選びましょう。
- Windows（ユーザーインストール版 / システムインストール版 / ZIP版）
- Mac（Intel / Apple Silicon）
- Linux（.deb / .rpm / .tar.gz）
② インストール手順
Windowsの場合
- ダウンロードした
.exeファイルを実行。 - 利用規約に同意し、「次へ」をクリック。
- インストール先を選択（デフォルトでOK）。
- 「追加タスク」で以下にチェック推奨：
PATHに追加.codeコマンドを使用可能にする
- 「インストール」をクリックし、完了したら「完了」を押して起動。
Macの場合
- ダウンロードした
.zipファイルを解凍。 Visual Studio Code.appを/Applicationsフォルダに移動。codeコマンドを有効にする（ターミナルで実行）：shCopysudo ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code /usr/local/bin/code- VSCodeを起動。
2. 日本語化と基本設定
① 日本語化
- VSCodeを起動。
- 左側の拡張機能（Ctrl + Shift + X）を開く。
Japanese Language Pack for Visual Studio Codeを検索してインストール。Ctrl + Shift + Pでコマンドパレットを開き、Configure Display Languageを選択。jaを選択し、VSCodeを再起動。
② 基本設定
Ctrl + , で設定画面を開き、以下の推奨設定を適用。
- 自動保存の有効化
Files: Auto Save→afterDelay - インデントの設定（タブ vs. スペース）
Editor: Tab Size→2または4 - テーマ変更
Color ThemeでDark+やDraculaなど好みのテーマを選択。
3. 必須＆おすすめ拡張機能
VSCodeをもっと便利にするために、拡張機能を追加しましょう。
| 拡張機能 | 説明 |
|---|---|
| Prettier | コードの自動フォーマット |
| ESLint | JavaScript/TypeScriptのLintツール |
| Live Server | ローカルでHTML/JSをプレビュー |
| GitLens | Gitの履歴・変更を可視化 |
| Python | Pythonのサポート |
| Jupyter | Jupyter Notebookのサポート |
| Vim | VimのキーバインドをVSCodeで使用 |
拡張機能の追加方法：
Ctrl + Shift + Xで拡張機能パネルを開く。- 拡張機能名を検索し、「インストール」をクリック。
4. よく使うショートカット
| 操作 | Windows / Linux | Mac |
|---|---|---|
| コマンドパレット | Ctrl + Shift + P | Cmd + Shift + P |
| サイドバーの表示/非表示 | Ctrl + B | Cmd + B |
| ターミナルを開く | Ctrl + ~ | Cmd + ~ |
| ファイル検索 | Ctrl + P | Cmd + P |
| コメントアウト | Ctrl + / | Cmd + / |
| フォーマット | Shift + Alt + F | Shift + Cmd + F |
5. ターミナル設定＆Git連携
① VSCode内でターミナルを使う
VSCodeのターミナルは Ctrl + ~ で開閉できます。
デフォルトのシェルを変更するには：
Ctrl + Shift + Pで「Select Default Profile」を検索。PowerShell,Git Bash,WSL,zshなどを選択。
② Gitとの連携
Gitをインストール（Git公式サイト）。- VSCodeの「ソース管理」タブを開く（
Ctrl + Shift + G）。 - 以下のコマンドで初期設定：shCopy
git config --global user.name "Your Name" git config --global user.email "your.email@example.com" git initでリポジトリを作成。git add .→git commit -m "First commit"→git pushで変更を反映。
6. Remote環境（WSL, Docker）との連携
① WSL（Windows Subsystem for Linux）
WindowsでLinux環境を使いたい場合、WSLを活用できます。
- WSLの有効化shCopy
wsl --install - VSCode拡張機能「Remote – WSL」インストール
Ctrl + Shift + P→Remote-WSL: New WindowでLinux環境を開く。
② Dockerとの連携
- Docker Desktopをインストール（公式サイト）。
- 「Remote – Containers」拡張機能をインストール。
Ctrl + Shift + P→Remote-Containers: Open Folder in Containerでコンテナ内で作業可能。
まとめ
これで、VSCodeの環境構築はバッチリです！💻✨
✅ 今日のまとめ
✅ VSCodeをインストール（日本語化 & 設定）
✅ おすすめ拡張機能を導入
✅ ショートカットを活用して作業効率UP
✅ Git連携 & WSL/Dockerとの統合
これで快適な開発環境を整えられます！
ぜひ試してみて、プログラミングを楽しみましょう！ 🎉
コメント