Sublime Text 3 に Emmet を導入する

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; ?>",
				"pinc": "<?php include ''; ?>",
				"preq": "<?php require ''; ?>",
				"pecho": "<?php echo ''; ?>",
				"ppre": "echo '<pre>';\necho '</pre>';",
				"con": "console.log();",
				"shebang": "#!/bin/sh",
			}
		},
		"variables": {
			//!で展開する<html>の言語を設定
			"lang": "ja"
		}
	}
}

使い方

  1. 記述ルールにのっとって1行で書く
  2. 行末にカーソルを合わせる
  3. ショートカットキーを押下して展開
    • Mac:control+E
    • Windows:ctrl+E

主なルール

項目 書き方
idを付与 # #hoge
classを付与 . .piyo
入れ子 > ul>li
並べる + h1+p
くくる ( ) (ul>li)+(ul+li)
n個繰り返す *n li*4
タグの中身 { } h1{見出し}
タグの属性 [ ] 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

WordPressで開発をしてるとちょくちょく使う系

  • php を展開
<?php
?>
  • pif を展開
<?php if(): ?>
  • pelse を展開
<?php else: ?>
  • pelseif を展開
<?php elseif(): ?>
  • pendif を展開
<?php endif; ?>
  • pinc を展開
<?php include ''; ?>
  • preq を展開
<?php require ''; ?>
  • pecho を展開
<?php echo ''; ?>
  • ppre を展開
echo '<pre>';
echo '</pre>';
JavaScript
  • con を展開
console.log();
シェルスクリプト
  • shebang を展開
#!/bin/sh

参考URL


Comments

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