閉じる

UI言語[UI Language]

記事自体は翻訳されません! 記事によって英語版があったりなかったりします。翻訳がある記事は文頭に記載があるよ!
Each articles themselves will not be translated by this setting. Some of article has translation and some of them doesn't. You will notice if the article has its translation by its preamble!

テーマ[Theme]


アイキャッチ画像

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

5年以上経ってる事を念頭に置いて読んでね!

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

Emmet package
Emmet package

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

Emmet Extensions Path
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
Emmet snippets.json

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

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

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

参考

この記事のタグ[This article is filed under]: Atom[Atom] | Emmet[Emmet] | ハウツー[How to] | HTML[HTML]


この記事はここで終わりです。
読んでいただきありがとうございました。
良かったらシェアしてね!

That's all for this article. Thank you for your reading.
Please share this if you like it!

Twitter | Reddit | Facebook | Pinterest | Pocket

前の記事[Prev Post]

前の記事のアイキャッチ画像

PS4コントローラーのトリガーボタンが戻ってこない!→交換してみました

次の記事[Next Post]

次の記事のアイキャッチ画像

NETFLIXのオーストラリア産ドラマ「シークレットシティ」雑感