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だそうで…