Code completion for HTML/JS/CSS in Emacs

  |   Source

CREATED: <2015-11-27>

UPDATED: <2015-12-09 Wed>

Now company-mode is popular in Emacs users. It supports code completion out of box.

Its company-etags.el can use TAGS created by ctags/etags.

Setup is easy.

Step 1, create TAGS:

cd ~/myproj/script; ctags -e '*.js'; cd ~/myproj/style; ctags -e '*.css'

Step 2, add below code into "~/.emacs.d/init.el":

(setq tags-table-list (list "~/myproj/script/TAGS" "~/myproj/style/TAGS"))

That's OK for most programming languages.

But not enough for web developers who use web-mode.

First, you need upgrade web-mode to latest version so that when inputting "btn-" or "data-" code completion still works.

Second, you need add below code into your "~/.emacs.d/init.el",

(eval-after-load 'company-etags
  '(progn
     (add-to-list 'company-etags-modes 'web-mode)))

You need above setup because web-mode conditionally inherit from prog-mode. You can `M-x eval-expression (derived-mode-p 'prog-mode)` to test whether current mode inherits from prog-mode. Thanks for Dmitry Gutov pointing out that js2-mode actually inherits from prog-mode because it inherits from js-mode which inheris from prog-mode.

Another issue is company-etags.el disables code completion in string and comment by default. We need remove this feature in web-mode temporarily,

(eval-after-load 'company
  '(progn
     ;; @see https://github.com/redguardtoo/emacs.d/commit/2ff305c1ddd7faff6dc9fa0869e39f1e9ed1182d
     (defadvice company-in-string-or-comment (around company-in-string-or-comment-hack activate)
       (if (memq major-mode '(php-mode html-mode web-mode nxml-mode))
           (setq ad-return-value nil)
         ad-do-it))))

Tested on Emacs23.4 and Emacs24.4.

UPDATE at <2015-12-09 Wed>: Dmitry Gutov has fixed the company-etags.el. After upgrading to company v0.9.0, you only need one line setup instead of my defadvice hack,

(setq company-etags-everywhere '(php-mode html-mode web-mode nxml-mode))

Screenshot of my setup:

company-etags-code-completion-nq8.png

Comments powered by Disqus