You are here: Home Tech Flymake Mode for Emacs/JavaScript

Flymake Mode for Emacs/JavaScript

by Reed O'Brien last modified Jul 22, 2011 09:29 PM
Use JSLint on javascript files live in Eamcs

Overview

Following are instructions for setting up JSLint to hightlight syntax errors live in Emacs via flymake-mode.

The steps to get it going are roughly as follows:

  1. Install and configure rhino
  2. Install the jslint for rhino scrip jslint.js
  3. Setup Emacs to use jslint.js on javascript files.
  4. Profit!

Note: I have attached the relevant files incase they disappear from the original locations.Though you are encouraged to get the current files from their respective sources.

Setup Rhino

On OSX

First, Downlowd rhino and unzip if it doesn't unzip automatically.

Make a the library directory if it doesn't exist:

mkdir -p ~/Library/Java/Extensions

Copy the jar to the extensions directory:

cp ~/Downloads/rhino1_7R2/js.jar ~/Library/Java/Extensions/

On Linux

I assume on linux this would be apt-get install rhino or equivalent

Test It

run the command:

$ java org.mozilla.javascript.tools.shell.Main

And you should see something like the following:

Rhino 1.7 release 2 2009 03 22
js>

Setup JSLint for Rhino

Install the JSLint for Rhino Script

Grab it:

sudo curl http://www.jslint.com/rhino/jslint.js > /usr/local/bin/jslint.js

Setup a Shell Script to Call it

Create a file, I called it jsflakes, with the following contents:

#!/bin/bash
java org.mozilla.javascript.tools.shell.Main /usr/local/bin/jslint.js $1

Make it executable:

chmod a+x /usr/local/bin/jsflakes

Setup Emacs

Create a flymake-jslint.el file

Create flymake-jslint.el in your emacs site direcory or somewher eon your load path with the folllowing contents:

(require 'flymake)

(defun flymake-jslint-init ()
  (let* ((temp-file (flymake-init-create-temp-buffer-copy
                     'flymake-create-temp-inplace))
         (local-file (file-relative-name
                      temp-file
                      (file-name-directory buffer-file-name))))
    (list "/usr/local/bin/jsflakes" (list local-file))))

(setq flymake-allowed-file-name-masks
      (cons '(".+\\.js$"
              flymake-jslint-init
              flymake-simple-cleanup
              flymake-get-real-file-name)
            flymake-allowed-file-name-masks))

(setq flymake-err-line-patterns
      (cons '("^Lint at line \\([[:digit:]]+\\) character \\([[:digit:]]+\\): \\(.+\\)$"
              nil 1 2 3)
            flymake-err-line-patterns))

(provide 'flymake-jslint)

Import it in your .emacs

Add the following to .emacs:

(require 'flymake-jslint)
(add-hook 'javascript-mode-hook
          (lambda () (flymake-mode 1)))

If you are already seup following Chris McDonough's instructions_ http://plope.com/Members/chrism/flymake-mode you can probably do something like the following (UNTESTED):

(when (load "flymake" t)
 (defun flymake-pyflakes-init ()
   (let* ((temp-file (flymake-init-create-temp-buffer-copy
                             'flymake-create-temp-inplace))
             (local-file (file-relative-name
                          temp-file
                          (file-name-directory buffer-file-name))))
     (list "pyflakes" (list local-file))))
 (defun flymake-jslint-init ()
   (let* ((temp-file (flymake-init-create-temp-buffer-copy
                             'flymake-create-temp-inplace))
             (local-file (file-relative-name
                          temp-file
                          (file-name-directory buffer-file-name))))
     (list "/usr/local/bin/jsflakes" (list local-file))))

 (add-to-list 'flymake-allowed-file-name-masks
              '("\\.py\\'" flymake-pyflakes-init))
 (add-to-list 'flymake-allowed-file-name-masks
              '("\\.js\\'" flymake-jslint-init)))
(add-hook 'find-file-hook 'flymake-find-file-hook)
(load-library "flymake-cursor")

Conclusion

Now start emacs (or load .emacs) and open a javascript file... You should have pyflakes running jslint against your code.

Share this: