【Sublime Text 2】EmmetでTabが効かなかったので - ハイパーニートプログラマーへの道

Sublime Text 2(Mac)にEmmetのパッケージを導入したのですが、Tabでの展開が効かなかったので。
いろいろ調べると、タブでの展開を無効にしている例が多く見られますが、代わりにctrl + eってのもなあ・・・。

Tabでの展開を有効に

Preferences > Settings - Userに以下を追加

"disable_tab_abbreviations_on_auto_complete": false

sublimetext2 - Sublime Text 2 + Emmet - not expanding correctly - Stack Overflow

これによってデフォルトの自動補完時にタブキー1発で決定することができなくなりましたが、代わりにreturnで決定します。あ、でもタブを２回押せばなるなあ。

私はあんまりタブって使ってないのです（インデントくらいかな？）自動補完の決定はreturn、日本語入力時の変換候補の選択はctrl + n or ctrl + pで行ってるので、Emmetでの展開はタブでしようと。

問題発生

初めはこうしてました。

https://github.com/sergeche/emmet-sublime/issues/360

Preferences > Key Bindings - Userに以下を追加。

 { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
    { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
        "context":
        [
            { "key": "setting.tab_completion", "operator": "equal", "operand": true }
        ]
    },

初めからこの設定をしている場合は、冒頭の設定では効かないかもしれません。

これでタブを押せばこうなるはずが・・・

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

こうなっちゃった

!<form></form>

何故に・・・。でも自動補完をタブで決定することが有効になったので

htmlと入力し、タブを押すと

<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

こうなる。うーん。というわけでこの設定は止めて、冒頭の設定にしたわけです。

ctrl+eを無効にする

他にctrl+eで展開できますが、それは「カーソルを行末へ移動する」操作でよく使っているので、無効にしたいです。下記の記事を参考に

EmmetとSublime Textとctrl+e | 株式会社LIG

Preferences > Package Settings > Emmet > Settings - Userに次を追加

    "disabled_keymap_actions": "expand_abbreviation",
    "disable_formatted_linebreak": true

これでctrl+eを無効にできました。 "disable_formatted_linebreak": trueは日本語入力で変換候補を確定するためにreturnを押すと、それが無視されて改行されてしまうのを防ぐそうです。

Sublime Text 2 + Emmet で日本語入力がうまくいかない症状の解決法 // understandard

defaultのスニペットを変える

デフォルトでhtmlのスニペットがありますが、ついでにそれにも手を加えます。

~/Library/Application Support/Sublime Text 2/Packages/HTMLの中にhtml.sublime-snippetがあります。

<snippet>
    <content><![CDATA[<html>
<head>
  <title>$1</title>
</head>
<body>
$0
</body>
</html>]]></content>
    <tabTrigger>html</tabTrigger>
    <scope>text.html</scope>
</snippet>

$1はタブを１番最初に押したときにカーソルが合わさる場所です。
$0はなんでしょうねw

http://sublimetext.info/docs/en/extensibility/snippets.html

If you want to control where the exit point should be, use the $0 mark.

うーん、わからん。

これをこのように変えます。

<snippet>
    <content><![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>${1:Document}</title>
</head>
<body>
  $0
</body>
</html>]]></content>
    <tabTrigger>html</tabTrigger>
    <scope>text.html</scope>
</snippet>

${1:Document}はタブを一番最初に押したときにDocumentというテキストを入れます。との間です。
インデントはスペース２つ。タグ内の$0の前にも入れてます。
これでEmmetで! -> tabで展開されるスニペットと同じにしました。

<a href="http://snickerjp.blogspot.jp/2013/11/howto-snippet-sublimetext.html">【これは便利！】「Sublime Text 2」でSnippet（スニペット）を利用する方法 | 元うなぎ屋</a>snickerjp.blogspot.jp

http://sublimetext.info/docs/en/extensibility/snippets.html

ちょっと気になる点

Sublime Textの左下にinfo: processing `HTML': ...please waitと出るなあ。タブキーを２発押さないとEmmetの展開が効かないときもある。関係あるのかどうか分からんですけど・・・。