VS Code初心者ガイド：つまずきポイントと解決策（Windows/Mac対応）
はじめに
Visual Studio Code（VS Code）は、無料で高機能なコードエディタとして多くの開発者に利用されています。
しかし、初めて使うときは「うまく動かない」「どこに保存されたのかわからない」「Live Serverが動かない」など、小さなつまずきが多く発生しがちです。
この記事では、初心者が最初にぶつかる代表的なつまずきポイントとその対処法を、WindowsとMacの両環境に対応する形でまとめました。
授業・自己学習・チームのサポートに役立ててください。
対象環境・前提条件
- VS Code：最新版（2024年以降）
- OS：Windows 10 / 11、macOS Sonoma以降
- 対象者：HTML/CSS/JSの基礎から始めたい初学者
初心者がよくつまずく8つのポイント
1. 日本語化の方法
問題: インストール直後は英語表示になっている
解決策:
- 拡張機能から「Japanese Language Pack」を検索・インストール
- 再起動すると日本語表示に切り替わる
- Windows・Mac共通の手順です
📎 Japanese Language Pack 拡張機能リンク
2. HTMLテンプレートが展開されない
問題: ! + TabでHTMLの雛形が展開されない
原因:
- ファイル拡張子が
.htmlでない - Emmet機能が無効になっている
- ファイルが保存されておらず Untitled のまま
解決策:
- まずは
.htmlでファイルを保存する - 以下を
settings.jsonに追加すると、Emmetのlang="ja"対応が有効に
"emmet.variables": {
"lang": "ja"
}
3. OneDriveに勝手に保存される問題（Windows特有）
現象:
- 保存したつもりが
C:\Users\ユーザー名\OneDrive\Documents\に入っていた
原因:
- Windowsの初期設定で「ドキュメント」「ピクチャ」「デスクトップ」フォルダがOneDriveと自動同期している
解決策:
方法1：OneDrive同期を解除（推奨）
- タスクバー右下のOneDriveアイコンを右クリック
- 「設定」→「バックアップ」→「フォルダーのバックアップを管理」
- 「ドキュメント」などのチェックを外す
- 設定を保存して閉じる
方法2：保存先を明示的に指定する
- 「ファイル」→「フォルダーを開く」から、
C:\MyProjectsやD:\WebAppなどOneDrive外のフォルダを選ぶ
4. ブラウザで変更が反映されない
原因:
- 保存していない（
Untitled状態） - Live Serverを使っていない
- ブラウザにキャッシュが残っている
解決策:
-
Ctrl+S（Windows） /Cmd+S（Mac）で確実に保存 - Live Server拡張機能を導入する
- ブラウザで
Shift + 再読み込みでキャッシュクリア
5. Live Serverが使えない
よくある原因:
- 拡張機能がインストールされていない
- ファイルを保存していない（Untitled状態）
- ポート番号の競合
解決策:
- 拡張機能で「Live Server」を検索してインストール
📎 Live Server 拡張機能リンク - ファイルを
.htmlとして保存した状態で、右クリック→「Open with Live Server」 - ポート番号エラー時は、
settings.jsonに以下を追加して変更：
"liveServer.settings.port": 5501
💡Macユーザー向け補足：Live Serverが動かないとき
macOSでは「フルディスクアクセス」を許可していないとLive Serverがうまく動作しないことがあります。
設定手順:
- システム設定 → プライバシーとセキュリティ
- 「フルディスクアクセス」→
Visual Studio Codeにチェックを入れる
6. よく使うショートカットキー一覧
| 操作内容 | Windows | Mac |
|---|---|---|
| ファイル保存 | Ctrl + S |
Cmd + S |
| ターミナル表示 | Ctrl + Shift + ~ |
Cmd + Shift + ~ |
| コメントアウト | Ctrl + / |
Cmd + / |
| 複数選択 | Alt + クリック |
Option + クリック |
| 全選択 | Ctrl + A |
Cmd + A |
7. ファイルとフォルダの違いが分からない
初心者によくある誤解:
- HTMLファイルだけ開いて作業しようとする
- 相対パスがうまく動かない
ポイント:
- VS Codeは「フォルダ単位」で管理・拡張機能が動作する
- Live Serverのルートもフォルダベース
解決策:
- 最初に「新しいフォルダを作成」→「フォルダを開く」でプロジェクトを始める
8. 拡張機能の使い方が分からない
初心者がよく使うべき拡張機能:
| 機能 | 拡張機能名 | 概要 |
|---|---|---|
| 自動整形 | Prettier | 保存時にコードをきれいに整える |
| HTMLテンプレ展開 | Emmet |
! + Tab などで素早くHTMLを記述可能 |
| 自動リロード | Live Server | HTMLを保存するたびにブラウザを更新 |
| パス補完 | Path Intellisense | 画像やファイルのパスを補完してくれる |
📎 拡張機能リンク一覧:
💻 おすすめ初期設定（settings.json）
{
"emmet.variables": {
"lang": "ja"
},
"editor.formatOnSave": true,
"files.autoSave": "afterDelay",
"editor.tabSize": 2,
"liveServer.settings.port": 5500
}
❓ よくある質問（FAQ）
Q. HTMLに色がつかない、補完されない
→ .html の拡張子がついているか、VS Codeを再起動してみましょう。
Q. 保存したファイルがどこにいったかわからない
→ OneDriveに自動保存されている可能性があります（「3. OneDrive問題」参照）
Q. Live Serverを使ってもブラウザが変わらない
→ 保存していない / ファイルが .html でない / Live Serverが動いていない 可能性があります。
✅ まとめ
初心者がスムーズにVS Codeを使いこなすためには、以下の点に特に注意しましょう:
- 保存場所の明示的な指定（特にWindows環境ではOneDrive問題に注意）
- ファイル拡張子とフォルダ構造の理解
- 拡張機能の導入と設定の習得
- OSによるショートカットの違いに慣れること