autocomplete-mode not working in web-mode

[ckruse]

Hey,

I'm an enthusiastic user of both, web-mode and autocomplete-mode. Unfortunately it does not work with web-mode buffers. A I doing it wrong or is this a bug?

[ckruse]

Fore the record: I already added a (add-to-list 'ac-modes 'web-mode) statement to my autocomplete configuration

[ckruse]

Ahhh, never mind… it was my mistake, I had it in an alwayse-false-conditional and therefore never getting executed. Sorry!

[fxbois]

@ckruse I do not use this autocomplete-mode. Could you add a comment to this issue with a little howto. I will then add this howto to web-mode.org
Thank you in advance

ps: I am relieved by the fact that some minor modes are compatible with web-mode !!

[ckruse]

It is very easy to use. Just install autocomplete-mode somewhere and add the following lines to your .emacs:

(add-to-list 'load-path "/path/to/autocomplete/")
(require 'auto-complete-config)
(add-to-list 'ac-dictionary-directories "~/.emacs.d/packages/autocomplete/ac-dict")
(ac-config-default)

(add-to-list 'ac-modes 'web-mode)

That's it – now it works (well, it should) :)

[thkoch2001]

The above snippet is not enough to have a satisfying auto-complete. One still needs to add a web-mode dictionary to the ac-dictionary-directories folder. But auto-complete-mode does not distinguish between block types. It would be nice to have auto completions for javascript, php, html, css depending on the current block type.

[NateEag]

As an elisp novice, I hesitate to suggest ideas about whose implementation I know little.

However...

I think it would be possible to write a web-mode-specific auto-complete source that uses web-mode-point-context to determine which ac-dict (or even which ac-source, maybe?) should be used for the current context

Just an idea. I don't know how much work would actually be involved there.

[fxbois]

what could be nice is to have a little example ... I do not use autocomplete

[NateEag]

I hacked up a quick proof-of-concept this morning:

(defun ac-web-mode-candidates ()
  "Pick the right set of candidates based on position of point context."
  (let ((cur-web-mode-lang (plist-get (web-mode-point-context (point)) :language)))
    (cond ((string= cur-web-mode-lang "php")
           (ac-mode-dictionary 'php-mode))
          ((string= cur-web-mode-lang "css")
           css-property-ids)
          ((string= cur-web-mode-lang "html")
           '("div" "script" "testing")))
    )
  )

(ac-define-source web-mode
  '((candidates . ac-web-mode-candidates)))

If you load auto-complete and css-mode, turn on auto-complete in web-mode, then run (setq ac-sources '(ac-source-web-mode)), you should get different completions in CSS blocks, HTML code, and PHP blocks.

Making a useful ac-source would take some work - web-mode supports a ton of different server-side systems, and people will want completion sources for different ones.

Just stacking all the possible candidates into one set of candidates might not be good enough - some completion candidates need different actions, and actions are defined in ac-define-source. See php-auto-yasnippets for an example of an auto-complete source that should only be active in PHP blocks, and would not work with this POC.

That makes me think dynamically choosing ac-sources is the right approach, not what I did here.

Anyway, this should at least give some idea what I'm thinking of. I may experiment with the ac-sources idea later.

[NateEag]

Okay, I have a prototype of picking auto-complete sources dynamically.

You can see the diff here in my .emacs.d.

The relevant file is web-mode-init.el (the file where I set up my preferences for web-mode). The other changes were to tweak some auto-complete sources to be workable with web-mode.

This change adds three pieces of UI to web-mode:

• web-mode-ac-sources-alist, which maps language name to auto-complete sources that should be active for that language's parts/blocks. It defaults to nil.
• web-mode-trigger-ac, a function to start auto-completion. Before triggering auto-complete, it sets ac-sources based on web-mode-ac-sources-alist.
• web-mode-before-auto-complete-hooks, a hook that web-mode-trigger-ac calls before each auto-complete attempt. emmet-mode assumes that a buffer is in either an HTML mode or a CSS mode, and expands things differently based on that. This hook lets us set up workarounds for ac-sources with that sort of assumption.

Known issues:

• I bound web-mode-trigger-ac to C-tab because I don't know how to set up a smart tab handler. Most auto-complete users would expect pressing Tab to trigger auto-completion if any candidates are available and to fall back to normal behavior otherwise.
• I've seen pressing C-tab freeze emacs momentarily, before generating the error web-mode-point-context: Lisp nesting exceedsmax-lisp-eval-depth'` then continuing. Am I misusing the function?

If those can be solved, I think this should work for adding auto-complete support to web-mode.

Questions? Comments?

[NateEag]

I think I solved the C-tab freeze - I'm calling ac-start instead of ac-trigger-key-command to invoke auto-complete, and that issue no longer occurs.

[fxbois]

@NateEag Hi, I'll look at all this as soon as I've finished my last big push

[NateEag]

Sounds good. Thanks for letting me know.

[NateEag]

Any idea when you might get a chance to look at this?

Not a big deal - just wanted to make sure this doesn't get lost, since it's attached to a closed issue.

[fxbois]

You were right to ping me about this !

[NateEag]

Sure. Sorry for any confusion I caused.

Here's a summary of what I'm suggesting. You can refer to https://github.com/NateEag/.emacs.d/compare/web-mode-dynamic-ac-sources?expand=1&w=1#diff-d3ca732e3a4685fe2fe3c612588a2428R1 to see the prototype code I'm describing.

auto-complete mode uses "sources" as backends for computing possible completions. The buffer-local variable "ac-sources" is the interface for choosing which ac-sources are active in a buffer - you just set it to the list of sources you want.

My idea is to add a completion function that sets ac-sources based on the current block's language, then triggers auto-complete. That way, you get the context-aware auto-complete that thkoch2001 asked for.

My function web-mode-trigger-ac does that. It relies on an alist I added (web-mode-ac-sources-alist) that maps language name to a list of ac-sources to activate. That gives users a simple way to choose their auto-complete sources for each block type.

After I had context-aware auto-complete working, I tried to set up emmet-mode's auto-completions in web-mode. Emmet-mode (https://github.com/smihica/emmet-mode) assumes that you are either in an HTML file or a CSS file. To get its completions to work in both block types, I added a pre-auto-completion hook, so that I could tell emmet to be in 'html' or 'css' mode before running auto-complete. I named the hook web-mode-before-auto-complete-hooks.

Does that help?

-Nate

http://www.nateeag.com

On Feb 26, 2014, at 10:15 AM, fxbois wrote:

@NateEag can we exchange by email, I do not fully understand what you need

—
Reply to this email directly or view it on GitHub.

[fxbois]

@NateEag I ve added the method web-mode-language-at-pos
Now do you expect anything more from me ?
If your config works well, I ll be happy to add a note on http://web-mode.org

[NateEag]

A revamped, simpler POC for context-aware auto-complete in web-mode can be seen in my .emacs.d repo:

https://github.com/NateEag/.emacs.d/blob/86c923c3bae1622633dad1d68143a21845259d00/site-lisp/mode-configs/web-mode-init.el#L25-L55

is the setup code, and

https://github.com/NateEag/.emacs.d/blob/86c923c3bae1622633dad1d68143a21845259d00/site-lisp/mode-configs/web-mode-init.el#L83-L90

is the code to register actual ac-sources by programming language.

[eN-Joy]

I don't know whole lot of lisp stuff, but the below lines does auto-completion of both css property name and value:

;; important for css property name auto-complete
(defvar ac-source-css-property-names
'((candidates . (loop for property in ac-css-property-alist
collect (car property)))))

(defun my-css-mode-hook ()
(add-to-list 'ac-sources 'ac-source-css-property) ;cssのkeyのsuggest
(add-to-list 'ac-sources 'ac-source-css-property-names)) ;cssのvalのsuggest
(add-hook 'css-mode-hook 'my-css-mode-hook)

Could these be incorporated with NateEag's code?

[fxbois]

@NateEag why do you use web-mode-point-context instead of web-mode-language-at-pos in ac-start ?

[NateEag]

@fxbois Oops, oversight on my part - I updated most of my config to use web-mode-language-at-pos, but I guess I missed that one. I'll fix it. Thanks.

@eN-Joy You should be able to use any ac-source with my code. If you look at https://github.com/NateEag/.emacs.d/blob/86c923c3bae1622633dad1d68143a21845259d00/site-lisp/mode-configs/web-mode-init.el#L25-L55, you would just add ac-source-css-property-names before ac-source-css-property.

[NateEag]

Updated code in my repo, more clearly divided into "proposed addition" and "my config".

Proposed code to add to web-mode:

https://github.com/NateEag/.emacs.d/blob/3da5592fb12b9948586aba90a8969e8276ec3cdc/site-lisp/mode-configs/web-mode-init.el#L25-L43

my config:

https://github.com/NateEag/.emacs.d/blob/3da5592fb12b9948586aba90a8969e8276ec3cdc/site-lisp/mode-configs/web-mode-init.el#L71-L90

This look pull-request-worthy?

If so, I can add this to web-mode, add some docs, and issue one.

[fxbois]

@NateEag no problem to add this to web-mode. I just need to test it before. Morevoer everything needs to work even is the user does not have ac installed

[NateEag]

yep, makes sense. I'll do that in my PR.

[fxbois]

Some docs will soon be added on http://web-mode.org

[jaccarmac]

Until then, how does getting ac-mode set up actually work? I have auto-complete-mode enabled in web-mode, but nothing ever happens.

[fxbois]

I ve added the docs written by @NateEag on web-mode.org