Sublime text
Sublime text 3 を使用しております。
Emmetがインストールされていることを前提としています。
下準備
- Sublime text を起動
-
prereference(n)-package settings-Emmet-Settings - Userを開く
!展開時
初期設定では、 ! または html:5 で展開すると、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
のようになります。
便利な機能ではありますが、毎回 <html lang="ja"> と書き換えるのは、面倒です。
Emmet.sublime-settings
{
"snippets": {
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",,
"newline": "\n",
"indentation": "\t"
}
}
}
一部、<html lang="ja">と関係のない所もあります。
解説
"lang": "ja" "locale": "ja-JP"
ご覧の通り、日本語、日本であることを示します。
"charset": "UTF-8"
文字セットをUTF-8に設定。
"indentation": "\t" "newline": "\n"
インデントを、\t (tab)に、
改行を\nに設定。
\t \n は、それぞれ、タブと改行です。)
カスタム展開コード
Emmet では、デフォルトで用意されているコードの他に、
自分自身でスニペットを追加することができます。
{
//カスタムスペニット (html用)
"html": {
"profile": "html",
"snippets": {
//"コード":"内容" で複数指定可
"tbl":"<table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th>${1:title}</th>\n\t\t</thead>\n\t<tbody>\n\t\t${child}\n\t<\tbody>\n<\table>"
}
},
}
}
解説
ほとんどお分かりになると思います。\nは改行、\tは、タブを表します。
{数字} {数字:テキスト}
- 数字
- カーソルを移す順番 (`tab`で移動する順番)
- テキスト
- プレースホルダー (入力時に選択された状態になる。)
その他
| 説明 | |
|---|---|
${0} |
展開時のカーソル位置 |
｜ |
展開時のカーソル位置 |
変数
| 説明 | |
|---|---|
${cursor} |
展開時のカーソル位置 |
${child} |
>での子要素の展開位置 |
${id} |
#での展開時に、その位置に展開される |
${class} |
{id}と同様 |
${lang} |
Emmet.sublime-settingsのvariablesのlang:
|
余談
sublime textの設定ファイルは、コメントも使えるので、jsonじゃなくてjavascriptだそうで…