SublimeTextにEmmetを導入する

2017-03-23 0:00
Mac

手順

  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": {
				"syobon": "(´・ω・`)",
				"kiri": "(`・ω・´)",
				"php": "<?php\n?>",
				"pif": "<?php if(): ?>",
				"pelse": "<?php else: ?>",
				"pelseif": "<?php elseif(): ?>",
				"pendif": "<?php endif; ?>"
			}
		},
		"variables": {
			//!で展開する<html>の言語を設定
			"lang": "ja"
		}
	}
}

書き方メモ

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

参考URL