Previous: Part 1, Up: Setting up Emacs for JavaScript [Index]
This time we’ll focus on getting good auto-completion with type inference.
Tern
is a great tool once setup correctly. It parses JavaScript files in a
project and does type inference to provide meaningful completion (with type
hints) and support for cross-references.
Unfortunately, cross-references with tern
never reliably worked for me,
that’s why I have always been using xref-js2
instead for that.
For auto-completion, we’ll be using company-mode
with tern
.
Install tern
:
$ sudo npm install -g tern
Install the Emacs packages:
M-x package-install RET company-tern RET
The Emacs configuration is straight-forward, we simply enable company-mode
with the tern
backend for JavaScript buffers:
(require 'company) (require 'company-tern) (add-to-list 'company-backends 'company-tern) (add-hook 'js2-mode-hook (lambda () (tern-mode) (company-mode))) ;; Disable completion keybindings, as we use xref-js2 instead (define-key tern-mode-keymap (kbd "M-.") nil) (define-key tern-mode-keymap (kbd "M-,") nil)
Now, depending on your JavaScript project, you might want to setup tern
to
work with your project structure. If completion doesn’t work out of the box
using tern
defaults you will have to set it up using a .tern-project
placed
in the root folder containing your JavaScript files.
Here’s an example setup for a project that uses requirejs
and jQuery
,
ignoring files from the bower_components
directory:
{ "libs": [ "jquery" ], "loadEagerly": [ "./**/*.js" ], "dontLoad": [ "./bower_components/" ], "plugins": { "requirejs": { "baseURL": "./" } } }
Once setup, tern
offers superb completion. Together with company-mode
, you
get great context-based completion with type inference.
When completing a function, you can hit ‘<F1>’ to get its documentation.
Previous: Part 1, Up: Setting up Emacs for JavaScript [Index]