Emmet & Autocomplete plus issue

[knitevision1]

Hello.

So, basically, in ST2 Emmet & Default ST Autocomplete work fine.

When I switched to Atom, I installed your package and tried to get it work with Emmet, but failed.

Steps to reproduce

1. Install Emmet & Autocomplete plus
2. Type just a plain word in the text starting from any tag, for example: h2test
3. Try to create an h2 tag using "h2 + tab" and you will get "h2test"

While in the Sublime Text the result would be the created markup for the h2 tag, in your Autocomplete it results in "h2test" appeared instead of the tag.

Is there something can be done with it?

Update

Partially solved with Auto Activation Delay

[Frozenfire92]

I also ran into this issue. I think the problem is emmet for atom uses tab and cmd+shift+E as shortcuts. A lot of different packages also use tab as a shortcut so it is best to get into the habit for using the longer shortcut key (You will also notice tags like hr and br now complete properly)

See emmetio/emmet-atom#96

[joefitzgerald]

You can unbind tab and replace it with enter or some other keybinding by doing the following in your keymap:

'atom-text-editor:not(mini) .autocomplete-plus.autocomplete-suggestion-list':
  'tab': 'unset!'
  'enter': 'autocomplete-plus:confirm'

Separately, we will be moving FuzzyProvider to be a provider of last resort in #184, which should address the issue where a snippet from autocomplete-snippets is not taking precedence to a suggestion from FuzzyProvider.

[matthew-b-payne]

Sublime Text also uses tab for Emmet and autocomplete expansion, yet the two seem to work in harmony together.

[jordanbtucker]

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 or Edit > 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.

While inside a snippet that has multiple tab stops, you'll notice that Tab moves to the next tab stop instead of expanding an Emmet abbreviation. If you want an Emmet expansion, then you can press Cmd+E on Mac. On Windows and Linux it's Ctrl+E, but this is overwritten by Atom as find and replace. To give this keymap back to Emmet, add the following to your keymap.cson file:

# Stop atom from hijacking ctrl-e from emmet
'.platform-win32 atom-text-editor:not([mini]), .platform-linux atom-text-editor:not([mini])':
  'ctrl-e': 'emmet:expand-abbreviation'

The best of both worlds.

PS
I don't actually own a Mac, so let me know if any Mac related information is wrong. Thanks.

[caillou]

@jordanbtucker 🎉 Your setup totally does the trick for me. Thank you!

[joefitzgerald]

@jordanbtucker is clearly a keymap maestro 😉. Nice solution!

[jordanbtucker]

Thanks, guys. I just updated my comment with some caveats regarding snippet tab stops.

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.

[joefitzgerald]

Perhaps this would be helpful info for https://github.com/atom-community/autocomplete-plus/wiki. We could have a keymap article?

[bbugh]

This was still a problem for me a year later, and @jordanbtucker's fix worked for me. Thanks for that! It was driving me mad.

[jtlevy]

@jordanbtucker OUTSTANDING!!

[freshyill]

Maybe it was a recent change to something else in Atom, but this seems to have broke using tab just to indent. Nothing at all would happen if I tried to indent. The solution for me was just to add .autocomplete-active to the classes where it was missing.

'atom-text-editor.autocomplete-active[data-grammar="text html basic"]:not([mini]), atom-text-editor.autocomplete-active[data-grammar~="jade"]:not([mini]), atom-text-editor.autocomplete-active[data-grammar~="css"]:not([mini]), atom-text-editor.autocomplete-active[data-grammar~="sass"]:not([mini])': 'tab': 'autocomplete-plus:confirm

[corysimmons]

@freshyill I can confirm this. Any keymap I make that uses tabs breaks tabs for everything else.

[greg-hub]

@jordanbtucker worked a treat!

Thanks

[seb-thomas]

Anyone got an updated complete tab config I can copy-pasta?
I'm not getting the desired behaviour and all these :nots are making my eyes fuzzy. :)

[ModernWebService]

I am not sure how, since I believe i tried this keymapping several times but after Sublime Text 3 has started to freeze and fail to quit on my computers lately, I found this post and copied this keymapping and now expands elements with classes and does not hijack your tab causing you to have to clcik cmd+[ or ctrl+[ to tab a line/indent https://github.com/emmetio/emmet-atom/issues/491

[SndrL]

I ran into this (frustrating) problem too. jordanbtucker's fix does the trick! Thank you!

[hungpro276]

@jordanbtucker works greatly in 2018, thank you <3