VSCode初心者マニュアル

対象：初学者／講座配布用　｜　想定OS：Windows 10/11　｜　推奨文字コード：UTF-8

1. VSCodeとは

Microsoftが提供する無料の統合開発環境 (IDE)。
HTML、CSS、JavaScriptからPython、C++まで幅広く対応。
拡張機能で機能を自在に追加でき、クロスプラットフォームで利用可能です。

2. インストール

1. 公式サイトから最新版をダウンロード
   Visual Studio Code 公式
2. インストーラを実行し、案内に従って「次へ」
3. 「PATHに追加」「右クリックメニューに追加」にチェック推奨

3. 画面構成

• アクティビティバー（左端）：エクスプローラー、検索、拡張機能など
• エディタ（中央）：ファイル編集領域
• ステータスバー（下部）：文字コード、改行コード、Git状態など
• ターミナル（Ctrl + `）：コマンド実行用

4. 基本操作

• 新規ファイル：Ctrl + N
• 開く：Ctrl + O
• 保存：Ctrl + S
• フォルダを開く：Ctrl + K → Ctrl + O
• コード整形：Shift + Alt + F
• コメントアウト：Ctrl + /

5. HTML編集に便利な機能

• 自動補完（タグや属性の候補表示）
• Emmet（例：ul>li*3 → <ul><li></li><li></li><li></li></ul>）
• Live Server拡張機能でブラウザ自動更新プレビュー

6. よく使う拡張機能

• Japanese Language Pack：日本語化
• Live Server：ブラウザ自動リロード
• Prettier：コード整形
• HTML CSS Support：入力補助強化
• Material Icon Theme：アイコンを見やすく変更

7. 練習課題

1. HTMLファイルを作成して見出し・段落を書く
2. Live Serverでプレビュー
3. CSSファイルを作成し、色や文字サイズを変更
4. Emmetを使ってリストを作成
5. Prettierでコードを自動整形

8. トラブルシューティング

• 日本語が文字化け → UTF-8で保存（ステータスバー右下で確認）
• プレビューが動かない → Live Serverがインストールされているか確認
• 動作が重い → 不要な拡張機能を無効化

講座用配布資料 © 2025