Disable "tab" completion for Emmet?


#1

I am using emmet and now am trying autocomplete plus.

The 2 packages are duking it out for what happens when I hit tab to try and choose an autocomplete suggestion, usually giving me something other than what’s expected.

Is there a way to disable tab-key autocompletes for Emmet, so that Atom will use the tab key as expected in Autocompletes?

And I don’t mean “disable Emmet”, since I’d like to use it with its Shift-command-E expansion.


#2

You can disable keybindings by replacing the command part of a keybinding with unset!.
Emmet uses

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

for its tab expansion, so to unset it, you should add

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'unset!'

to your ~/.atom/keymap.cson


#3

Try putting this in ~.atom/keymap.cson (stolen from emmet keymap) …

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'unset!'

And then put your own binding after that.


#4

That config did indeed turn off the tab key. But then I’d need to also figure out how to now re-wire it to what Atom would do without Emmet installed.

So, instead I set Autocomplete Plus to “complete suggestions with return” and left the tab key to Emmet. YMMV.


#5

You should add something along the lines of

'atom-text-editor':
  'tab': 'autocomplete-plus:confirm'

again to your keymap.cson


#6

Or instead of:

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'unset!'

You can just put:

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'custom:command-here'

unset! is really just for unsetting a key. If you want to make it do something else, just make it do something else … no need to unset it first.


Override Emmet Snippets
#7

If you want to use Tab with Autocomplete and Emmet, this is what I do.

Install autocomplete-plus and autocomplete-snippets (and whatever other autocomplete-plus provider packages you want):

apm install autocomplete-plus autocomplete-snippets

Next, edit your keymap.cson file (File > Open Your Keymap) and paste this at the bottom:

# Stop emmet from hijacking tab from snippets and autocomplete
'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'
 
# Stop emmet from hijacking tab from snippet tab stops
'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'snippets:next-tab-stop'

This allows you to still use Tab with Emmet, but only when the autocomplete popup is not open.

  • If you start typing, and autocomplete pops up, you can press Tab for autocomplete.
  • If autocomplete doesn’t pop up (because there are no matches), you can press Tab and get an Emmet expansion.
  • If autocomplete does pop up, but you want to use an Emmet expansion, you can press Esc to close the autocomplete popup and then press Tab for an Emmet expansion.

The reason you need to install autocomplete-snippets is because Emmet takes precedence over snippets, but if you have an autocomplete popup open and this keymapping in place, then the snippet will take precedence.

The best of both worlds. The only downside I’ve seen so far is that you can’t expand Emmet abbreviations while in a snippet tab stop context. You can remove the second keymapping above, but they you won’t be able to navigate snippet tab stops at all. I haven’t found a way to escape a snippet tab stop context.


Having weird problems? Do you have Emmet installed?
Tab does not often auto-complete, auto closes the word as a tag
#8

Thanks a ton for this solution! I’ve been enjoying autocomplete+ but this issue was bugging the heck out of me in .scss files.


#9

This works great, but when autocomplete comes up in the smaller form, i.e. without the input box. Emmet still highjacks it.


#10

Thanks - I use voice recognition to code and this makes emmet and autocomplete-plus play nicer together.


#11

Still helpful more than 6 months later. Thank you!


#12

Glad to hear this is working for everyone. I’ve updated my solution with some caveats regarding snippet tab stops, and you can read about it at GitHub.

I’ve actually posted this solution in a few places for everyone’s benefit, but keeping them up to date is problematic. For future updates, please subscribe to emmet-atom issue #225.


#13

Great solution!
Works really well now!!


#14

Thank´s a lot;

I add this line to redefine emmet abbreviation:

# Rewrite emmet expand
'atom-text-editor:not([mini])':
  'alt-tab': 'emmet:expand-abbreviation-with-tab'

Rewards.