Emacs and JS
Changes
- Apr 24 2016: initial version
- Apr 22 2017: added update about Indium
Configuring Emacs as a Javascript IDE
This would seem like a totally redundant page, as there are already many pages to be found about how to configure Emacs best as a JS IDE. But as I have created a configuration that I am happy with, perhaps someone else could be happy with it as well.
As I tried some of the existing setups that I found, I was not completely satisfied - many of them use too many packages and define special key bindings, sometimes overriding established key bindings with other functionality. My goal is to have a core IDE with standard key bindings only (according to the used packages), offering the following IDE services:
- automatic code completion
- show documentation for current keyword
UPDATE - this seems like a better option: Indium. I will keep this page for reference.
Requirements
Software
tern.js is a stand-alone code-analysis engine for JavaScript, intended to be used with a code editor plugin. There are plugins for several editors, including GNU Emacs.
Emacs packages
The packages are all available in the Melpa package repository, and can be installed with Emacs' builtin package manager.
- js2-mode - a popular JS-mode for Emacs.
- company - a text completion system for Emacs which supports many backends, including Tern.
- company-tern - this is the Tern backend for Company.
- tern - this is the Tern Emacs plugin.
- jquery-doc - a handy backend for company and an API documentation for JQuery.
- js2-refactor - provides JS refactoring functionality.
Setup
First install the tern.js using the instructions on their site.
Initialise packages
For your convenience, here is some elisp to download, which will install the required packages. You only need to run it once, then it can be removed.
(require 'package)
(add-to-list 'package-archives '("melpa" . "http://melpa.org/packages/"))
(package-initialize)
(package-refresh-contents)
(mapc (lambda(p) (package-install p)) '(js2-mode tern company company-tern jquery-doc js2-refactor))
Configure Emacs
Add the following to your .emacs.d/init.el or wherever you keep your config:
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;; A Javascript IDE configuration ;;;;;; ;;;; Initialisation (mapc (lambda(p) (require p)) '(js2-mode tern company company-tern jquery-doc js2-refactor)) (jquery-doc-setup) (add-to-list 'company-backends 'company-tern) ;; associate js with tern and company (add-hook 'js-mode-hook (lambda () (tern-mode t)(company-mode t))) ;; use js2 as default mode (add-to-list 'auto-mode-alist (cons (rx ".js" eos) 'js2-mode)) ;; adjust defaults (setq company-auto-complete t) (setq company-idle-delay 0) (setq company-minimum-prefix-length 1) (setq company-tooltip-limit 20) (setq company-tooltip-align-annotations t) ;;; jquery documentation ; NB. update doc database with M-x jquery-doc-fetch-and-generate-data (defun jquery-doc-at-point () (interactive) (jquery-doc (thing-at-point 'word))) (global-set-key [f2] 'jquery-doc-at-point) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
Drop a tern configuration into your project root
This is a basic setup that works as a start. Create the file .tern-project in your project root:
{
"libs": [
"browser",
"jquery"
],
"plugins": {
"node": {},
"angular": {}
}
}
Usage
You need to have tern in your PATH - Emacs will start it for you.
Just open a javascript file in your project and start coding - code autocompletion works without explicit invocation.
When Company presents candidates while you type, you can step between the alternatives with the cursor keys, and pressing F1 will show a description of the highlighted alternative.
Pressing F2 when the cursor is above a JQuery function will display its documentation (the documentation database can be updated using M-x jquery-doc-fetch-and-generate-data). Another way to access the JQuery documentation is M-x jquery-doc.
There are many refactoring functions. For example, place the cursor on a variable and press C-c C-r to refactor the variable name.
Troubleshooting
How does autocomplete fail? By not autocompleting - you start typing but nothing happens.
Should this happen to you, you may have missed some steps above.
- run M-x package-list-packages and verify that the packages listed above are marked as installed. Otherwise, install them.
- run tern in verbose mode, to see what Emacs communicates. Close emacs, and open a terminal. Change directory to your project root where the .tern-project file is, and run tern –verbose then start Emacs again.