もっと高度な補完

この章では、VSCodeのもっと高度な補完機能や、Emmetの便利な機能を紹介します。

そもそもなぜ補完が使えるのか

Emmetは、HTMLやCSSを書くときに便利な機能を提供するツールです。VSCodeにはEmmetが組み込まれているため、いろいろと便利な補完が使えるのです。

Emmetとは

そもそもEmmetとは、HTMLやCSSを書くときに便利な機能を提供するツールです。VSCodeにはEmmetが組み込まれているため、いろいろと便利な補完が使えるのです。

インターネットでEmmetについて調べると、様々な機能が紹介されています。調べてみると面白いよ。

よく使うやつらの紹介

ul>li*3と入力してEnterを押すと、以下のようなコードが自動で生成されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

div#headerと入力してEnterを押すと、以下のようなコードが自動で生成されます。

<div id="header"></div>

div.containerと入力してEnterを押すと、以下のようなコードが自動で生成されます。

<div class="container"></div>

上記の応用で、div#header.containerと入力してEnterを押すと、以下のようなコードが自動で生成されます。

<div id="header" class="container"></div>

cssのリンクも手で打つとスペルミスが起きそうで怖いですが、Emmetを用いることで簡単に生成できます。link:cssと入力してEnterを押すと、以下のようなコードが自動で生成されます。

<link rel="stylesheet" href="">

作成:2026-06-15 YGMS_yukkuri