2015/08/24

TernJS

Ternjs is awesome tool for working with javascript. It provides autocompletion not only for current file but also for the entire project! Ternjs is made of a server (a daemon) that will read javascript files and will return completions/candidates upon client requests. Clients are usually plugins for editors like emacs, sublime text, etc. Here I show the emacs settings

Install server

Via npm is the easiest way:
npm install -g tern

Install the client

  • Install needed packages in emacs
    Install tern-mode and tern-auto-complete via package-list-packages
  • Test server communication
    This is optional. It is to check server and client can establish communication.
    Open a js file on emacs and activate tern mode M-x tern-mode. It will start the server automcatically and a message like the following will appear:
    Making url-show-status local to `http 127.0.0.1:58767` while let-bound!
  • Make a .tern-project file
    This is optional but recommended. Ternjs uses a .tern-project file to understand the project. Ternjs can be used to do nodejs or the usual client web development. If no .tern-project is found then a fallback will be loaded. You can find more in the manual. This is mine:
    {
        "libs": [
            "browser",
            "jquery"
        ],
        "loadEagerly": [
            "js/api.js",
            "js/array-helper.js",
            "js/data-provider.js",
            "js/view-stack.js"
        ]
    }
    
  • Tell emacs to use tern always This is also optional. Since you can trigger tern-mode, etc manually. I just prefer to have it automatic:
    ;;; Tern for Javascript
    ;;; http://truongtx.me/2014/04/20/emacs-javascript-completion-and-refactoring/
    ;;; npm install -g tern-autocomplete
    ;;; Tern with Nodejs' Express
    ;;; https://github.com/angelozerr/tern-node-express
    ;;; npm install -g tern-node-express
    (add-hook 'js-mode-hook (lambda () (tern-mode t)))
    (eval-after-load 'tern
      '(progn
         (require 'tern-auto-complete)
         (tern-ac-setup)))
    
    ;;; Start tern-mode automatically when starting js mode
    (add-hook 'js-mode-hook (lambda () (tern-mode t)))
    
Now we are ready!. Open a js file and you should get autocompletions right away yay!

Working with version control systems

Every time ternjs server starts it will create .tern-port file that contains the port number clients should access. This is a random number and it is recreated automatically. So, unlike .tern-project, .tern-port should NOT be committed.
If you are working with git, add this to .gitignore:
# Ignore ternjs port number
.tern-port

0 comments :