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]