【VSCode】HTML・CSSのコーディングに便利な拡張機能一覧

VSCodeでHTM・CSSのコーディングを初める時に便利な拡張機能を紹介します。

Japanese Language Pack for Visual Studio Code

右クリック、「Open in Browser」でプレビューを表示。
HTML Preview

ベンダープレフィックスを付与。
Autoprefixer

HTMLの編集時に、開始タグを変更したら、自動で終了タグも編集。
Auto Rename Tag

CSSの構文チェック。
CSSTree validator

HTMLのソースコード上に、その要素に当てられているスタイル（CSS）を表示。
CSS Peek

HTMLの開始タグと対応する終了タグをわかりやすく表示。
Highlight Matching Tag

HTML、CSSのclassやidの補完する拡張機能。どちらか一方。

インデントに色を付与。
indent-rainbow

全角スペース・全角英数字をハイライト。
zenkaku

command + shift + P（windowsはctrl + shift + P）で「Beautify file」を選択してソースを整頓。
Beautify

閉じタグをハイライト。
Highlight Matching Tag