Sublime Text 3 に Emmet を導入する
Emmetとは
Emmet — the essential toolkit for web-developers
HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン
手順
- Package Controllから「Emmet」をインストール
- SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
- 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行で書く
- 行末にカーソルを合わせる
-
ショートカットキーを押下して展開
- 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
- Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる
-
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻
- Tab でのコード展開をしないようにする
- 日本語文字変換を確定すると文字が消えるのを回避
-
EmmetをSublime Text 3で使ってみよう
- HTML5のDOCTYPE宣言のスニペット「!」のlangがenになっているのでデフォルトでjaにしておく。
-
【2015年度版】今更！Sublime Textの痒いところに手が届く設定たち
- 閉じタグコメントの位置を変更（Emmet）