AtomのEmmetでAタグにtarget=”_blank”を追加する

ブログを書く時は、基本的に全てのAタグはtarget="_blank"を指定するので、Emmetで自動的に付加されるようにしてみました。方法は下記の通りです。

Emmet package
Settings → Packages → Installed Packages で"Emmet"を検索し、SettingsでEmmetの設定へ。

Emmet Extensions Path
Settings → Extensions Path に追加の設定を置くフォルダを指定できるので、適当なフォルダを作ってそこを指定。
自分は設定ファイルをDropboxで同期したいと思ったので、Dropboxのルートにemmetフォルダを作ってそこを指定しました。~/がユーザーのディレクトリ(WindowsではC:\Users\ユーザー名)を指すので、~/Dropbox/emmetでdropboxフォルダ直下のemmetフォルダということになります。

Extensions Pathで指定したフォルダに、空のsnippets.jsonファイルを作ります。このファイルに追加のスニペットを書きます。
書き方はオリジナルのsnippets.jsonファイルを参考にします。先程のExtensions Pathよりもさらに上にあるView CodeボタンでEmmetプラグインのフォルダを開いた状態のAtomが起動するので、プロジェクトツリーをemmet/node_modules/emmet/lib/snippets.jsonと辿って開きます。

Emmet snippets.json
"a"を検索すると上記のような記述箇所が見つかりますので、これを参考に、先ほど新しく作ったsnippets.jsonには下記のように記述しました。rel="noopener"も追加してみました。

	{
		"html":
		{
			"abbreviations":
			{
				"a": "<a href=\"\" target=\"_blank\" rel=\"noopener\">"
			}
		}
	}

Emmet customized a snippet
Atomを再起動して、Aタグを展開すると希望通りにtarget属性とrel属性が追加されました!
展開後のカーソル位置はちゃんとhrefのところに来ますね…… 自動的に最初の空の属性にキャレットが行くようになってるのかな?

参考:
Emmetのカスタマイズ – Smart
https://rfs.jp/sb/atom-github/atom04_emmet_custom.html

1件のコメント

コメントを残す

メールアドレスが公開されることはありませんし、空欄で大丈夫です。っていうかコメント以外空欄で良いです。気軽にコメントして下さい。
Email won't be published. Or you can leave it blank. I mean you can leave everything blank but comment. Feel free to leave a comment, thanks.