SublimeTextにEmmetを導入する

Mac

Emmetとは

Emmet — the essential toolkit for web-developers

https://emmet.io/

HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン

手順

  1. Package Controllから「Emmet」をインストール
  2. SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
  3. EmmetのSetting – Userに展開時の設定を記述

Setting – User

{
	"disable_tab_abbreviations": true, //[Emmet]Tabキー展開の停止
	"disable_formatted_linebreak": true //[Emmet]日本語変換確定の文字消えを防ぐ
}

Preferences > Package Settings > Emmet > Settings -User

{
	"preferences": {
		//閉じコメント挿入位置をタグの右側にする
		"filter.commentAfter": "<!-- /<%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
	},
	"snippets": {
		"html": {
			//HTMLの閉じコメントを展開時に自動挿入されるようにする
			"filters": "html,c",
			
			//オリジナルのスニペットを登録する
			"profile": "html",
			"snippets": {
				"php": "<?php\n?>",
				"pif": "<?php if(): ?>",
				"pelse": "<?php else: ?>",
				"pelseif": "<?php elseif(): ?>",
				"pendif": "<?php endif; ?>",
				"ppre": "echo '<pre>';\necho '</pre>';",
				"shebang": "#!/bin/sh",
			}
		},
		"variables": {
			//!で展開する<html>の言語を設定
			"lang": "ja"
		}
	}
}

使い方

  1. 記述ルールにのっとって1行で書く
  2. 行末にカーソルを合わせた状態で cmd + E を押下して展開する

主なルール

  • classを付与: .hoge
  • idを付与: #hoge
  • 入れ子: >
  • 並べる: +
  • くくる: ( )
  • n個繰り返す: *n
    • 例)li*4
  • タグの中身: { }
  • タグの属性: [ ]
    • 例) a[href=index.html target=_blank]{インデックスへ}

ユーザー設定の挙動

閉じコメント挿入位置をタグの右側にする

  • #hoge を展開
<div id="hoge"></div><!-- /#hoge -->
  • .piyo を展開
<div class="piyo"></div><!-- /.piyo -->
  • #hoge.piyo を展開
<div id="hoge" class="piyo"></div><!-- /#hoge.piyo -->

オリジナルスニペット

なにかと使うPHPの記述などをスニペット化している。

php を展開
<?php
?>
pif を展開
<?php if(): ?>
pelse を展開
<?php else: ?>
pelseif を展開
<?php elseif(): ?>
pendif を展開
<?php endif; ?>
ppre を展開
echo '<pre>';
echo '</pre>';
shebang を展開
#!/bin/sh

参考URL

Comments

  • スパム対策のため、コメント本文にURLが含まれている場合は「承認待ち」となり、すぐに投稿が反映されません。ご了承ください。
  • 公序良俗に反する内容、個人が特定できる情報、スパム投稿と思われるコメント等については、予告なく編集・削除する場合があります。