Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatibility with autocomplete-plus tab completion #225

Open
jedrichards opened this issue Mar 5, 2015 · 19 comments

Comments

@jedrichards
Copy link

commented Mar 5, 2015

Emmet's tab completion clobbers autocomplete-plus's tab completion. I don't think this used to be the case until a few updates ago. Can we make Emmet using tab configurable?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/9223899-incompatibility-with-autocomplete-plus-tab-completion?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github).

@jedrichards jedrichards changed the title Incompatibility with autocomplete-plus Incompatibility with autocomplete-plus tab completion Mar 5, 2015

@silvenon

This comment has been minimized.

Copy link

commented Mar 5, 2015

I believe the fix is to add something like this to your keymaps.cson:

'atom-text-editor[data-grammar~="css"]:not([mini])':
    'tab': 'autocomplete-plus:activate'

I haven't tried it, though.

@rpendleton

This comment has been minimized.

Copy link

commented Mar 13, 2015

Like @silvenon said, you can fix this by editing your keymaps.cson file. It's surprisingly flexible and allows you to customize most keybindings to satisfy your needs. That being said, I agree that perhaps the default keybindings should be modified to fix this.

During my initial switch to Atom, there were three things that bugged me about autocomplete:

  1. When using Vim mode, pressing escape would exit insert mode rather than closing autocomplete.
  2. Pressing tab would expand using Emmet rather than confirming the autocomplete suggestion.
  3. Pressing ctrl-space would open autocomplete rather than autocomplete+.

I was able to fix all of these by adding the following to my keymap file. (Finding out how easy it is to do this was a pleasant surprise, considering I spent hours trying to do the same thing in the Coda version of Emmet a few months ago.)

# Prevent escape from changing Vim modes when autocomplete is open

'atom-text-editor.vim-mode.autocomplete-active':
  'escape': 'autocomplete-plus:cancel'

# Prevent tab from expanding using Emmet when autocomplete is open

'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'

# Allow ctrl-space to toggle autocomplete-plus

'atom-text-editor.autocomplete-active':
  'ctrl-space': 'autocomplete-plus:cancel'

'atom-text-editor:not(.autocomplete-active)':
  'ctrl-space': 'autocomplete-plus:activate'
@jordanbtucker

This comment has been minimized.

Copy link

commented Mar 18, 2015

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.

@codepuncher

This comment has been minimized.

Copy link

commented Apr 29, 2015

@jordanbtucker Was really hoping this would fix it, but no :(
Just completely stops Emmet from having element expansions from working.

Maybe this is because of updates since this was posted?

Am using Atom 0.194.0, Emmet 2.3.8 and Autocomplete Plus 2.12.0 on Windows 7 Pro x64.

@jedrichards

This comment has been minimized.

Copy link
Author

commented Apr 29, 2015

Hmm, yep same here.

Isn't the best approach to give an option in the Emmet settings to choose the expand button? Like autocomplete-plus lets you switch between tab, enter and tab+enter? I would be happy with just Emmet expanding with shift+apple+e and leave the tab button just for traditional auto completes.

At the moment I just have to have Emmet disabled since its not playing well with other packages :S

@jordanbtucker

This comment has been minimized.

Copy link

commented Apr 29, 2015

@krypsin @jedrichards I'm not able to reproduce the issue even after updating Atom and its packages. Can you open the Keybinding Resolver (Packages > Keybinding Resolver > Toggle), then press Tab, take a screenshot, and post it here?

@sergeche

This comment has been minimized.

Copy link
Member

commented Apr 29, 2015

The ultimate solution for this issue is to extend autocomplete-plus package for detecting available snippets by prefix. E.g. the workflow should look like this:

  1. Emmet overrides Tab key completely
  2. When you try to expand something, Emmet extracts abbreviation from current caret position.
  3. If this is a simple abbreviation like foo or div, ask autocomplete-plus for matched abbreviations.
  4. If returned result is non-empty list, abort Tab key handling and pass event further. Otherwise expand abbreviation as usual. Or maybe use matched snippets as Emmet abbreviation parts.

This will greatly reduce amount of hacks and quirks required to handle Tab key properly.

I did a quick look on autocomplete package and didn’t found valid ways to retrieve snippets matching given abbreviation. Maybe someone (or me, eventually) will contribute such improvement to autocomplete package?

@jordanbtucker

This comment has been minimized.

Copy link

commented Apr 29, 2015

@sergeche Thanks for the research and potential solution. It's probably best to post that in the autocomplete-plus repo so the developers can see it.

@CubixSystem

This comment has been minimized.

Copy link

commented Dec 3, 2015

@jedrichards big thanks for your instructions!

@andradei

This comment has been minimized.

Copy link

commented Jun 1, 2016

@jordanbtucker Thanks for the temporary solution. Works great.

@GramParallelo

This comment has been minimized.

Copy link

commented Nov 14, 2016

@jordanbtucker Worked for me, thanks! But I had to delete this line which was already in my Keymaps.cson file:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
@damirkotoric

This comment has been minimized.

Copy link

commented Jan 29, 2017

@jordanbtucker Thank you so much for your solution. It works for the most part, however it doesn't work when getting emmet to generate a bit of code from a more advanced emmet instruction, like div.foo.

@jordanbtucker

This comment has been minimized.

Copy link

commented Jan 30, 2017

@damirkotoric If you're having trouble, please follow the steps outlined in my previous comment and I'll take a look. Thanks.

@damirkotoric

This comment has been minimized.

Copy link

commented Jan 30, 2017

Thanks @jordanbtucker the problem seemed to have been that I also tied the enter key to the same function as the tab key, but that causes problems.

@ModernWebService

This comment has been minimized.

Copy link

commented Mar 16, 2017

I could be missing something but adding a keymapping for the tab disables the tab for indent.

@jordanbtucker

This comment has been minimized.

Copy link

commented Mar 17, 2017

Heads up. I've switched to Visual Studio Code and haven't touched Atom in months, so I don't know how accurate my solution is anymore.

Also, I haven't run into any issues with Emmet and autocomplete ("code completion" as VS Code calls it) since switching to VS Code.

@sergeche

This comment has been minimized.

Copy link
Member

commented Mar 17, 2017

Check out new alpha of Emmet 2, which is solely an autocomplete+ provider: https://github.com/emmetio/atom-plugin

@micos7

This comment has been minimized.

Copy link

commented Apr 13, 2017

I just installed emmets-snippets-compatibilty plugin.

@AnthonyMichaelc

This comment has been minimized.

Copy link

commented Apr 13, 2017

@micos7 what is the outcome of using that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.