VS Codeの導入とおすすめ拡張機能まとめ

VS Codeって何？

VS Code（Visual Studio Code） は、Microsoftが無料提供している高機能コードエディタです。

• HTML / CSS / JavaScript など幅広い言語に対応

• デザイン初心者でも簡単に導入・カスタマイズ可能

• 拡張機能（プラグイン）で自分好みにパワーアップできる！

   インストール方法（3ステップ）

  Step1：公式サイトにアクセス

  https://code.visualstudio.com/

  「Download for Mac / Windows」からダウンロード

  Step2：インストール

  ダウンロードしたファイルを開き、指示通りに進めるだけでOK！

  Step3：日本語化（おすすめ）

  1. VS Codeを起動

  2. ⌘ + Shift + P（Mac）または Ctrl + Shift + P（Win）を押してコマンドパレットを開く

  3. Configure Display Language と入力し、Japanese を選択

     → まだない場合は「Japanese Language Pack」をインストール

  初心者におすすめの拡張機能 7選

  拡張機能	用途・特徴
  ✅ Live Server	ブラウザでリアルタイム表示＆自動更新できる
  ✅ Prettier	コードを自動でキレイに整えてくれる（整形ツール）
  ✅ HTML CSS Support	HTMLに書いたクラス名をCSSファイルから補完してくれる
  ✅ Auto Rename Tag	開いたタグを変更すると閉じタグも自動で変わる
  ✅ Emmet（標準搭載）	ul>li*5 → 一瞬で5個のリスト生成！
  ✅ Color Highlight	#FF5733のようなカラーコードが実際の色で表示される
  ✅ Icons（Material Icon Theme）	ファイルごとにアイコン表示 → 見やすくなる！

  💡 拡張機能はサイドバーの「拡張機能アイコン」から検索＆インストールできます

  便利な初期設定（最低限ここだけやろう）

  • テーマ変更（好きな配色に！）

    　→ 設定 > テーマ > カラーテーマ

  • フォントサイズの調整

    　→ settings.json で editor.fontSize を設定

    　（例：“editor.fontSize”: 16）

  • 自動保存ON

    　→ 設定 > ファイル > 自動保存 を有効にすると楽！

  まとめ：VS Codeは「見やすく＆時短」がキモ！

  • 無料＆軽量で、初心者にも超おすすめのエディタ

  • 拡張機能を入れるとコーディングがぐんと快適に！

  • 最初に最低限の環境を整えてから学習をスタートしよう