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)