Visual Studio Codeに拡張機能を入れてさらに便利に

前のページでは、VSCodeの基本的な使い方を学びました。

今回は、拡張機能を追加して開発をさらに便利にしていきます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

拡張機能とは？

VS Code では、拡張機能（Extension）を追加することで、

• コード補完
• カラーリング
• フォーマット
• 言語サポート

などを増やすことができます。

まずは拡張機能パネルを開く

VS Code の左側のメニューから、

四角が4つ並んだアイコン（拡張機能）

をクリックしてください。

または、Ctrl + Shift + X でも開けます。

HTML と CSS 用の拡張機能

開発では HTML と CSS を頻繁に使います。

おすすめの拡張機能は以下です。

• HTML CSS Support HTML タグや CSS の補完を強化します。

• CSS Peek CSS の定義を簡単に確認できます。

• IntelliSense for CSS class names in HTML HTML 内で class 属性を補完してくれます。

日本語化拡張も入れる

VS Code はデフォルトで英語表示です。

日本語で使いたい場合は、拡張機能で日本語化できます。

おすすめは、

• Japanese Language Pack for Visual Studio Code

です。

インストール後、VS Code を再起動すると、日本語表示になります。

拡張機能のインストール手順

1. 左側の拡張機能アイコンをクリック
2. 検索バーに拡張機能名を入力
3. 「インストール」をクリック
4. 必要に応じて VS Code を再起動

入れるとどう便利になる？

例えば、

• class 名をタイプするだけで候補が出る
• CSS の色やサイズの候補が表示される
• 日本語でメニューが見られる
• エラーや警告がすぐにわかる

など、学習効率が格段に上がります。

次のページでは

次のページでは、

• Live Server を使った自動リロード
• 保存するとブラウザが即更新される仕組み

を学んでいきます。

開発効率がさらに上がり、より実務に近い体験ができます。