Previous: , Up: Setting up Emacs for JavaScript   [Index]


13.8.1.2 Part 2

This time we’ll focus on getting good auto-completion with type inference.

  1. Setting up Tern & company-mode for auto-completion

    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]