【2020年版】Sublime Text3 & Emmetで使うhtmlタグの属性をカスタマイズ(スニペットに登録)

  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つのタグを設定する方法をご紹介します。

  1. 省略記法imgで展開した時に、width、height、alt、loading属性が自動で入るようにスニペットを設定
  2. 省略記法atの時は、aタグにtarget属性が入るオリジナルのスニペットを設定。

スニペットの設定方法

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タグに属性を設定します。

画面が2画面に分割された状態で「 Emmet.sublime-settings - Emmet 」と「 Emmet.sublime-settings - User 」の2つのファイルが表示されますが、右側のEmmet.sublime-settings - Userに以下設定を貼り付けて保存します。
4行目のsnippets:の次の行がHTMLタグの設定を記述している箇所です。
imgタグは src、width属性、height属性、loading=lazy(Chrome遅延読み込みの指定)が展開される設定。
6行目、atと書いていますがaタグにtarget属性とrel属性が入った状態で展開される設定です。
{
	"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

展開後: <img src="" width="" height="" loading="lazy" />

展開前: at

展開後:<a href="" target="_blank" rel="noopener noreferrer ugc"></a>

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

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

こちらの記事もオススメ!

書いた人:やまライダー

やまライダーです。仙台市でブロガー兼システム寄りのWebディレクターとして働きながら嫁と一緒に子育て奮闘中!
タスク管理ツール「Todoist」でガントチャートが作成ができる補助ツール「Todoist ガントチャートコンバータ」作者。
鳥が好きでキンカチョウ(錦花鳥)を飼っています。

プロフィールを見る
やまライダーのTwitter(自転車用アカウント)
やまライダーのTwitter(システム寄りwebディレクター用)
やまライダーのInstagram