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

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

Japanese Language Pack for Visual Studio Code

VSCode日本語化パッケージ。
Japanese Language Pack for Visual Studio Code

Live HTML Previewer

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

Autoprefixer

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

Auto Rename Tag

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

CSSTree validator

CSSの構文チェック。
CSSTree validator

CSS Peek

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

Highlight Matching Tag

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

HTML CSS Support / IntelliSense for CSS class names in HTML

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

HTML CSS Support

HTML CSS Support

  • メリット:読み込むファイルパターンを設定できる
  • デメリット:読み込み元のファイル名の表示がない
IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML

  • メリット:読み込み元ファイル名が表示される
  • デメリット:読み込むファイルパターンを設定できない

indent-rainbow

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

zenkaku

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

Beautify

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

Highlight Matching Tag

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

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。