Code completion for HTML/JS/CSS in Emacs

  |   Source

completion for HTML/JS/CSS in Emacs :en:emacs:html:css:javascript:

CREATED: <2015-11-27>

UPDATED: <2017-10-08 Sun>

You need install Exuberant Ctags or universal-ctags at first.

People using macOS will find there already exists a built in program named "ctags". This program should be deleted!

If you want a quick start, jump to the end of this article.

You can use company-etags.el from company-mode to complete HTML/JS/CSS code.

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 inherits 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 and Emacs24, Emacs 25.

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

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

Screenshot:

company-etags-code-completion-nq8.png

UPDATE at <2017-09-26 Tue>:

Quick start for newbies,

Step 1, open shell and goto project root. Run command ctags -e -R. A file named TAGS is created.

Step 2, insert below code into ~/.emacs.d/init.el or ~/.emacs (replace web-mode to any major mode you use), 

(eval-after-load 'company-etags '(progn (add-to-list 'company-etags-modes 'web-mode)))
(setq company-etags-everywhere '(php-mode html-mode web-mode nxml-mode))

All done. Use company-mode as your wish!

Comments powered by Disqus