Visual Studio CodeでEmmet省略記法を有効にする

Visual Studio Code（VS Code）でEmmet省略記法を有効にする方法について説明いたします。
デフォルトではOFFになっているため、ONに設定する必要があります。

Emmetは、主にHTMLやCSSの記述をサポートしてくれるライブラリです。

設定画面を開く

メニュー > 基本設定 > 設定

既存の設定を上書き

下記を追加

“emmet.triggerExpansionOnTab”: true

動作確認

htmlファイルで、下記のように入力

div>ul>li
※Tabキーを押すと展開される

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

動作確認環境

• Visual Studio Code 1.26.1
• macOS High Sierra

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する