Visual Studio CodeのEmmetをカスタマイズする方法

Visual Studio Codeには、HTMLとCSSのコーディング作業を効率化するために必要なEmmetが標準で組み込まれています。

今回は、Visual Studio Codeに組み込まれているEmmetをカスタマイズする方法を紹介します。

Emmetのスニペットで使われる変数を変更する

lang属性を”ja”にする

Emmetで!を展開すると、HTMLの基本的なタグが表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

初期設定では、htmlタグのlang属性はenになっています。このlang属性をjaに変更します。

[ファイル]→[ユーザー設定]→[設定]を選択して、設定画面を開きます。

「Emmet: Variables」の[項目を追加]ボタンをクリックします。

「項目」で「lang」を選択し、「値」に「ja」を入力します。

Emmetのスニペットを上書きする

Emmetに新たにスニペットを追加したり、既存のスニペットを上書きしたりするには、snippets.jsonファイルを作成する必要があります。

snippets.jsonファイルに登録するスニペットを記述するには、Emmetで定義されているスニペット(HTMLCSS)が参考になります。

snippets.jsonファイルを作成・設定する

snippets.jsonファイルを作成して、下記コードを記述し、保存します。

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

[ファイル]→[ユーザー設定]→[設定]を選択して、設定画面を開きます。

「Emmet: Extensions Path」の[項目を追加]ボタンをクリックします。

作成したsnippets.jsonファイルがあるフォルダのパスを入力して[OK]ボタンをクリックします。

metaタグ「X-UA-Compatible」を削除する

(私だけかもしれませんが)Visual Studio Codeに組み込まれているEmmetは少し古いのか、!を展開するとmetaタグ「X-UA-Compatible」が表示されます。

metaタグ「X-UA-Compatible」について詳しく知りたい場合は、下記のページが参考になります。
【HTML】metaタグ:『X-UA-Compatible』はよっぽどでなければ設定する必要はないかもしれません。

このmetaタグが表示されないように、snippets.jsonファイルに下記のコードを記述します。

{
  "html": {
    "snippets": {
      "doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body"
    }
  },
  "css": {
    "snippets": {
    }
  }
}

imgタグにloading=”lazy”を付与する

画像の遅延読み込みのために、Emmetでimgを展開した際にloading="lazy"が付与されるように設定します。下記のコードをsnippets.jsonファイルに追加します。

"img": "img[loading=lazy src alt]/"

SVGに関連するスニペットを追加する

Emmetには、SVGに関連するHTMLタグ(svgタグ、symbolタグ、useタグ、など)を展開するためのスニペットが登録されていません。

これらのタグをEmmetを用いて展開できるように、下記のコードをsnippets.jsonファイルに追加します。

"svg": "svg",
"symbol": "symbol",
"use": "use[href]"

参考サイト