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

  • URLをコピーしました!

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

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

目次

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

STEP

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

{
  "variables": {
  },
  "html": {
    "snippets": {
    }
  }
}
STEP

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

STEP

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

STEP

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

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に変更するために、snippets.jsonファイルのvariablesセクションに下記のコードを記述します。

"lang": "ja"

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

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

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

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

このmetaタグが表示されないように、snippetsセクションに下記のコードを記述します。

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

metaタグ「X-UA-Compatible」について詳しく知りたい場合は、下記のページが参考になります。

クリエイターのための総合情報サイ...
【HTML】metaタグ:『X-UA-Compatible』はよっぽどでなければ設定する必要はないかもしれません。 Webデザイナーの求人 コーダーの求人 UIデザイナーの求人 Webディレクターの求人 【meta

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

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

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

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

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

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

これらのタグをEmmetを用いて展開できるように、下記のコードをsnippetsセクションに追加します。

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

参考サイト

Smashing Magazine
Creating Custom Emmet Snippets In VS Code — Smashing Magazine In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in V...

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次