9

I'd like to use Emmet inside other filetypes/syntax modes than HTML. Especially in .tpl files from Smarty and other template files of different CMS. Is there any way I can use the tab handler in those files too? I don't like to hit in other files CTRL + E because the only difference is the file extension and some template parts.

suntrop
  • 775
  • 3
  • 10
  • 24

4 Answers4

4

Emmet limits Tab handler for some known file types because there’s no sane way to integrate with ST native snippets. E.g. if you try to expand, for example, foo abbreviation, Emmet doesn’t know if you want to transform it into <foo> tag or you want to expand native ST snippet associated with this trigger. So uses some tricks to determine what you’re trying to do. While this may work for HTML, in other languages it may annoy you with false triggers.

If you are 100% sure that you don’t need native ST snippets in your templates files, you can do the following: open user’s keymap file (find Key Bindings — User menu item in ST) and add the following code there:

[{
    "keys": ["tab"], 
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "SYNTAX SCOPE", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }, 
        {
            "match_all": true, 
            "key": "selection_empty"
        }, 
        {
            "operator": "equal", 
            "operand": false, 
            "match_all": true, 
            "key": "has_next_field"
        }, 
        {
            "operator": "equal", 
            "operand": false, 
            "match_all": true, 
            "key": "auto_complete_visible"
        }, 
        {
            "operator": "equal", 
            "operand": false, 
            "match_all": true, 
            "key": "setting.disable_tab_abbreviations_on_auto_complete"
        }, 
        {
            "match_all": true, 
            "key": "is_abbreviation"
        }
    ]
}]

Where SYNTAX SCOPE is a scope name for your syntax, you can see it in status bar by pressing Ctrl+Shift+P (Mac) or Ctrl+Alt+Shift+P (PC)

Sergey Chikuyonok
  • 2,626
  • 14
  • 13
  • Thanks!! I did what you wrote. I replaced SYNTAX SCOPE with source.ss but I only get an autocomplete list of words within my document. When I type p and hit the tab key it expands to png – suntrop Apr 20 '13 at 12:53
  • If you really wrote `source.ss` as scope than you did it wrong: there‘s no such scope name. – Sergey Chikuyonok Apr 24 '13 at 08:41
  • That is what ST shows when I press CTRL+SHIFT+P Here is a screenshot … http://project-point.de/source.ss.png – suntrop Apr 25 '13 at 16:12
  • That’s weird... What package/syntax you’re using for .tpl files? – Sergey Chikuyonok Apr 27 '13 at 10:05
  • In that case I was using SilverStripe syntax (https://github.com/benjamin-smith/sublime-text-silverstripe) in a .ss file – suntrop Apr 28 '13 at 12:33
  • I’ve slightly updated keybinding snippet, try it again with `source.ss` scope. – Sergey Chikuyonok Apr 29 '13 at 15:43
  • … I am sorry, but it doesn't work. I still get only completions for words within my document. – suntrop May 01 '13 at 12:03
  • Don't know why – maybe a restart did the trick – but now it's working :-) Again … many many thanks! – suntrop May 09 '13 at 13:48
  • It didn't work for me, but I copied and pasted the `expand_abbreviation_by_tab` block like the one above from the emmet key bindings file to the user key bindings file and added my new source, `source.velocity`, and then it worked! There may have been a syntactical change since this was posted. – jared_flack Sep 12 '13 at 18:30
4

you could find edit the snippets.json in emmet's folder (Packages\Emmet\emmet)

add this:

"tpl": {
    "extends": "html"
},

change tpl to whatever file extension you will like to enable the emmet code expansion.

there are haml,sass example at the end of the snippets.json too, you could imitate them.

Allan Ruin
  • 5,229
  • 7
  • 37
  • 42
1

Instead of editing original snippets.json you should put new file snippets.json in Emmet's extension dir, usually ~/emmet, (you can change it in Emmet's settings to e.g. ~/.atom/emmet) for better clarity and ability to survive your settings when upgrade/reinstall. Then just add section: { "tpl": { "extends": "html" } }

vip
  • 157
  • 1
  • 7
-1

now you should change "key": "setting.disable_tab_abbreviations_on_auto_complete" to "key": "setting.disable_tab_abbreviations" for it's work

user3057309
  • 1