1. SublimeText3でHTMLタグをカスタマイズ！
2. スニペットの設定方法
3. 手順1. 設定ファイルを開きます。
4. 手順2. 展開したいHTMLタグに属性を設定します。
5. 手順3. 設定したタグを展開してみます。
6. imgタグなどの空要素の閉じタグにスラッシュをつけたくない場合の設定

SublimeText3でHTMLタグをカスタマイズ！

Sublime Text3にEmmetプラグインをインストールした状態でも十分作業効率は上がりますが、「スニペット」を設定すると、さらに使いやすくなりますよ。
例えば imgタグの場合、widthやheight属性、Chromeに採用されている遅延読み込みのloading属性（loading="lazy"）を使う機会が多いからimgタグに属性指定せずにimgのみで展開しても最初から属性が含まれた状態で入っていたほうがラクだったり、aタグは外部サイトへのリンクを使う機会が多いので最初からtarget属性が入ってたらなあ…等々、HTMLコーディングして使い込んでいくと、だんだんと自分なりに使いやすいカタチが見えてくると思います。

それ、SublimeTextでできます!
Sublime Textにはスニペットという機能があり、HTMLタグに好みの属性が追加できるので、省略記法展開時のHTMLタグを細かく設定する事が可能です。

今回は、以下のように2つのタグを設定する方法をご紹介します。

スニペットの設定方法

Sublime Text3で設定して検証しました。使用したパソコンやEmmetプラグインの環境は以下。
Sublime Text2では検証していませんのでご了承ください。

• MacOS Catalina Version 10.15.6
• Sublime Text3 Version 3.2.2,Build 3211
• Emmet Version2.1.13

手順1. 設定ファイルを開きます。

画面上部にあるメニューバーから「Sublime Text」→「Preferences」→「Package Settings」→「Emmet」→「Settings」の順で開くと、Emmet.sublime-settingsファイルが表示されます。

手順2. 展開したいHTMLタグに属性を設定します。

{
	"config": {
		"markup": {
			"snippets": {
				"img": "img[src width height alt loading=lazy]/",
				"at": "a[href target=_blank rel='noopener noreferrer ugc']",
			},
			"options": {
				"output.selfClosingStyle": "xhtml"
			}
		}
	},
}

手順3. 設定したタグを展開してみます。

実際に設定した属性が付いて展開されるか確認してみましょう。
以下のように展開されれば設定完了です！

imgタグなどの空要素の閉じタグにスラッシュをつけたくない場合の設定

HTML5では空要素の場合、最後の／（スラッシュ）は省略できます（付けても付けなくても良い）。
制作会社のコーディングルールによっては付ける場合があるようです。
空要素の末尾にスラッシュをつけたくない場合は、手順2「　Emmet.sublime-settings - User 」の 9行目"output.selfClosingStyle": "xhtml"の行を削除して保存すればスラッシュが無い状態で展開されるようになります。