emmet-atom

emmet-atom copied to clipboard

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).

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.

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'

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.

@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.

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

@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?

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?

@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.

@jedrichards big thanks for your instructions!

@jordanbtucker Thanks for the temporary solution. Works great.

@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'

@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.

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

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.

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

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.

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

I just installed emmets-snippets-compatibilty plugin.

@micos7 what is the outcome of using that

I've installed Atom 1.46.0 x64 with emmet 2.4.3 after reinstalling Windows 10 Pro two days ago and forgot to backup by keymap file beforehand. I used to have emmet on Ctrl+E and just let Atom do it's thing with tab but now emmet is overriding tab for everything, so I can't add indents anywhere but the very start of lines or use snippets anywhere in any file that emmet matches. I've tried various solutions found all over the web for this, but they don't work for me - they either add one specific tab behaviour before emmet takes over again in all other cases, or disable tab completely for everything. Yes I am reloading Atom between keymap edits, and no I do not use autocomplete-plus or any other custom autocomplete packages.

I'm just going to have to delete the tab declaration from emmet's own keymap and hope I remember to do so every time the package updates.

My ideal solution: Atom's settings should provide an easy way to edit / disable package key bindings.

Acceptable solution: any package with keybindings should make them configurable in the package settings without requiring users to edit config files manually, especially not package config files which will be overwritten when the package updates.

The next version of Atom plugin will capture abbreviation as you type and act as autocomplete provider (autocomplete-plus is bundled with Atom by default), same as new Sublime Text plugin: https://github.com/emmetio/sublime-text-plugin

The Atom package emmet-snippets-compatibility-but-less-extreme solved the problem easily to me.