How can I have HTML tab expansion in ST2 w/ Emmet inside Handlebars templates(emberjs)?

Question

Okay, so I'm using Sublime Text 2 with Emmet. But "Tab" expansion of HTML snippets doesn't work inside a script because of the scope.

Example: In HTML, I can type "h1" and then hit tab, and it will generate <h1></h1>

When using Ember.js, and more specifically Handlebars, it doesn't work.

<script type="text/x-handlebars">
h1
</script>

Pressing tab after that "h1" doesn't expand it because it's inside a script; Emmet turns this off. I can press Ctrl+E, which is the "expand anywhere" hotkey, and that works just fine. However, that is uncomfortable and prone to missing and hitting things like Ctrl+S or Ctrl+D which have undesired effects.

So, how can I change this?

I tweeted at the developer, and got a reply, https://twitter.com/chikuyonok/status/398708331969540096

But couldn't understand what to do.

Answer 1

In my opinion, he meant that you needed to change the scope for expand_abbreviation_by_tab. Please open Default (Windows/Linux/OSX).sublime-keymap, search expand_abbreviation_by_tab, add source.js in operand list. It makes it take affect in JavaScript file.

    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js, source.css, source.sass, source.less, source.scss, source.stylus, text.xml, text.html - source, text.haml, text.scala.html, source string", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }, 

Answer 2

I'll add further clarification here since this took me a while to find out:

• Copy all of the two keys: ["tab"] objects from the Emmet default keybindings
• Paste them into your User keybindings
• Add source.handlebars as an additional operand to each of the two contexts.

This also works with Ember Syntax Highlighting when the handlebars files are being interpreted as Glimmer files.