My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
InstallationInstructions  

Featured
Updated Feb 4, 2010 by steve.ye...@gmail.com

js2-mode instructions

Introduction

js2-mode is a new JavaScript editing mode for GNU Emacs. It aims to be more like an IDE (such as Eclipse or IntelliJ) than existing Emacs language modes. There is a lot of work left to do to achieve this goal, but it's got a pretty good start:

  • it offers the usual features from other Emacs modes
  • it supports the JavaScript language up through version 1.7
  • it has a real recursive-descent parser
  • it highlights syntax errors and underlines warnings
  • it supports collapsing function-body and block-comment definitions
  • it has some preliminary support for IMenu (to be improved soon)
  • it knows about jsdoc and highlights tags in jsdoc comments
  • it has a set of typing helpers to make editing easier

Most of the mode's features are customizable via M-x customize.

Details

To install js2-mode:

  • download the latest source distribution file, js2-XXXXXXXX.el
  • put it in your Emacs load-path somewhere as js2.el
  • in Emacs, M-x byte-compile-file RE js2.el RET
  • add these lines to your .emacs file:
(autoload 'js2-mode "js2" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))

It will refuse to run unless you have byte-compiled it. You must byte-compile it with your version of Emacs because different versions of Emacs have different byte-compiled formats.

Usage Notes

Invoke M-x customize-group RET js2-mode RET to see the configuration options.

This mode does not have customizable indentation the way cc-engine modes do (e.g. java-mode, c-mode, objc-mode). It is a significant amount of work to create a customizable indenter.

Instead, js2-mode uses an indentation guesser (based on Karl Landström's "javascript.el" guesser), plus "bounce-indenting". When you hit TAB the first time to indent a line, it indents to what it thinks is the most likely indentation point, and it computes a set of other possibilities. If you hit TAB repeatedly, it cycles among these possibilities.

There are obvious downsides to this approach, but hopefully over time the indentation support will improve.

Installing from source code

As an alternate way to install the mode, you can download the source files from the svn repository (from the Source tab above), put them in your load-path, and byte-compile each of them. The mode runs without being byte-compiled in "developer mode" (i.e. from source), so be careful, since it's really really slow for large files.

If you're using the svn sources, you can get the latest updates between official releases.

Comment by glypho...@gmail.com, Apr 29, 2008

Delete comment Comment by glyphobet, Today (moments ago)

I had no idea how to "put it in your Emacs load-path somewhere" and various Google searches were no help. Here's what eventually worked for me, in emacs:

1. make the directory ~/.emacs.d/js2/

2. put js2.el and js2.elc in ~/.emacs.d/js2/`

3. add these three lines to your ~/.emacs file:

(setq load-path (append (list (expand-file-name "~/.emacs.d/js2")) load-path))
(autoload 'js2-mode "js2" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))
Comment by j...@stonelake.fi, May 1, 2008

Thanks, got it now!

Comment by ben...@gmail.com, May 5, 2008

Is it possible to add some supports for Ajax module like JQuery, Dojo, YUI and so on?

Comment by mixan...@gmail.com, May 15, 2008

Byte compiling throws an error in emacs-cvs from yesterday:

Compiling file /home/myusername/.elisp/js2.el at Thu May 15 15:09:23 2008 js2.el:6787:24:Error: Variable binding depth exceeds max-specpdl-size

Comment by kimolliv...@gmail.com, Aug 4, 2008

The path for load-paths is normally the lisp directory.

c:/emacs/lisp

for example

Comment by gopal...@gmail.com, Sep 19, 2008

@mixandgo, I was able to compile successfully from the command line:

shell> emacs --batch --eval '(byte-compile-file "js2-20080616a.el")'

I'm running Emacs 23.0.60.1

Comment by jca...@gmail.com, Sep 21, 2008

I have the same problem with CVS emacs, I can compile it as the comment above sugested, but when I try to open a javascript file I get this error:

File mode specification error: (error "You must byte-compile js2-mode before using it.")

My js2.elc file is there.

emacs-version

GNU Emacs 23.0.60.1 (i686-pc-linux-gnu, GTK+ Version 2.12.11) of 2008-09-22
Comment by jesdisci...@gmail.com, Oct 21, 2008

This works on Ubuntu 8.04 (Hardy Heron): http://ubuntuforums.org/showpost.php?p=675916&postcount=3

Note that emacs must be opened with 'sudo' to have permission to write to "/usr/share/emacs/<version>/lisp".

Comment by ivan.fed...@gmail.com, Oct 26, 2008

If you have error message "You must byte-compile js2-mode before using it.", then check nXhtml package. It uses OLD js2 mode with name js2-new.el... :(

Comment by unlox...@gmail.com, Nov 24, 2008

Hey, I just got it installed, opened my first JS file to start editing... what is up with the behavior of TAB and auto-indenting?! Hitting tab mutiple times keeps re-indenting it to different levels! I differs from line-to-line, in loops like (0, 4, 0, 4, ...) or (0, 4, 8, 0, 4, 8, ...) or (12, 8, 4, 12, 8, 4, ...), or (16, 12, 0, 16, 12, 0, ...)

Syntax hiliting is great, but without smart auto-indenting, I'd rather use my javascript-mode. Am I missing something?

Comment by marktu...@gmail.com, Nov 27, 2008

It cycles through various TAB positions based on the previous line, bracket etc. (it's all on his blog), which is actually brilliant because keep hitting TAB in an IDE and it will just keep tabbing the line out, which is hardly ever what you want. Just keep hitting TAB until it's where you want. JS-2 mode also has a syntax checker, which I don't think javascript-mode has unless I'm misinformed.

Coupled with Ejacs (great name), JavaScript? shell, this is a great setup. (Thanks, Steve)

Comment by unlox...@gmail.com, Dec 2, 2008

But, all other code editing modes in emacs, Perl, PHP, java, C, etc have the same tab behavior, you hit tab (any number of times, wherever you are in a line) and it indents that line properly to the One place the indentation makes sense. Can't the syntax reader just read the surrounding code and pick the one place the indent should be? e.g the K&R style? Yeah, maybe it's a step up from other IDE's, but it's a major step back from the emacs usual behavior.

Comment by geoffsch...@gmail.com, Aug 1, 2009

If you get You must byte-compile js2-mode before using it., also make sure that you have named the file js2.el and not, say js2-20090723a.el.

Comment by ameuret@gmail.com, Aug 2, 2009

I had the same error as Gopal above and can confirm that the command line compilation did work with my GNU Emacs 23.0.96.1

Comment by razielm...@gmail.com, Aug 3, 2009

unlox775: You can set js2-bounce-indent-flag to nil in order to get your traditional indentation behaviour

Comment by adambossy@gmail.com, Sep 8, 2009

I'm including the two lines specified in the instructions to my .emacs file:

(autoload 'js2-mode "js2" nil t) (add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))

The mode is loading properly, but it's not activated immediately. Is there a way of avoiding hitting M-x js2-mode each time I want to turn it on?

Comment by christop...@yahoo.com, Dec 3, 2009

A) @adambossy: Works fine (mode is loaded and activated immediately) on 'GNU Emacs 22.2.1 (i486-pc-linux-gnu, X toolkit, Xaw3d scroll bars) of 2008-09-05 on vernadsky, modified by Ubuntu'.

B)Separately, I also suggest adding another add-to-list to get '.json' files in addition to '.js' files.

C)Is there a way to have js2-mode parse/load an ordered list of js files on activation? That way (of course), support could be extended to js frameworks.

D) Awesome JavaScript? mode! It doesn't have Aptana's speed/responsiveness issue.

Comment by cheezf...@gmail.com, Dec 29, 2009

I just grabbed the newest version, and it doesn't seem to be doing the "bounce-indent" thing any more. Is there some setting I am missing? My code is a bit too...wide...like this:

$(document).ready( function(){
                       $.ajaxSetup({
                                       url: "/index.php",
                                       type: "GET"
                                   });
                   });
Comment by cheezf...@gmail.com, Dec 30, 2009

Aha, I found the problem... I needed to set js2-bounce-indent-p, but it wasn't visible in M-x customize

Comment by cren...@gmail.com, Feb 19, 2010

If you have the problem with "Variable binding depth exceeds max-specpdl-size". You should see this http://code.google.com/p/js2-mode/issues/detail?id=68

Comment by ivann....@gmail.com, Mar 25, 2010

adambossy, to fix problem "not activated js2-mode" you need put

(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode)) 

after loading nxhtml. If you don't use this, try to check variable auto-mode-alist: C-h v auto-mode-alist

Comment by spider.p...@gmail.com, Jul 28, 2010

If you get You must byte-compile js2-mode before using it. and you have byte-compile'd the .el, then load-file js2.elc is your friend, i.e. load the byte-compiled file not the .el.

Comment by edipret...@gmail.com, Oct 28, 2010

I've tried to byte-compile js2.el with GNU Emacs 24.0.50.1, but I've got the following warnings and error:

js2.el:3517:1:Warning: cl package required at runtime

In js2-node-string: js2.el:5907:48:Warning: save-excursion' defeated by set-buffer' js2.el:7309:24:Error: Lisp nesting exceeds `max-lisp-eval-depth'

Can you tell me how I can solve this problem? I've already set the max-lisp-eval-depth to 10000 instead of 1000.

Thanks in advance!

Comment by zhaoyem...@gmail.com, Nov 30, 2010

edipretoro, I met the same problem today. I don't know why but it didn't happen again once I commented out js2 lines in my .emacs file together with nXhtml lines and did a restart of emacs. HTH.

Comment by gu.g...@gmail.com, Dec 18, 2010

Hi, I'm new to js2-mode. I have a basic question. I wish to be able to have my new lines to be always indented x spaces. For example:

(function($) {

var x = function() {
$('tag').a = {
event1 : 'hello', event2 : 'world'
}
}
})(jQuery);

My first try of js2-mode seems to give me the following: (function($) {

var x = function() {
$('tag').a = {
event1 : 'hello', event2 : 'world'
}
}
})(jQuery);

What am i doing wrong? What do I need to adjust using customize-group js2-mode to get what I want? Thanks very much!

Comment by j.pert...@gmail.com, Dec 29, 2010

This mode does not have customizable indentation the way cc-engine modes do (e.g. java-mode, c-mode, objc-mode). It is a significant amount of work to create a customizable indenter.

I just would like to be able to set the indentation to something different than 2 spaces (to 4 spaces, in this case). Does this mean that it is not possible right now, or, taking the words of unlox775, am I missing something?

Comment by joern.h...@gmail.com, Feb 8, 2011

How can I disable the behavior of adding something like this on return:

"

+ "

It's because of regular expressions (var x = /abc/g;), so it's even wrong. I think I have turned everything to nil in the property sheet but I can't disable this behavior...

Comment by levial...@gmail.com, Mar 2, 2011

Has anyone tried using jsctags with emacs? I'm wondering if this will be compatible with js2.

Comment by raa...@gmail.com, Mar 20, 2011

levialanm: Using jsctags should be orthogonal to js2-mode. js2-mode doesn't touch the tags table, it only generates imenu index.

joern.heid: This should only occur in large buffers when the parsing has been interrupted. If so, it should be fixed with commit cfb3cd in this fork: https://github.com/mooz/js2-mode/ If not, feel free to create an issue there. Then I'll look into it.

j.pertres: Just set js2-basic-offset to 4 (it's the default value, actually). Customizable indentation that your quote is referring to is the more flexible mechanism present in cc-engine modes that allows you to tweak indent size in various syntactic positions.

Comment by champswe...@gmail.com, Jul 18, 2011

Hey, is there a hotkey that I can use to find syntax errors?

Comment by sheper...@gmail.com, Sep 25, 2011

I try to install js2, but when I run customize-group, there is no js2-mode in the list. I am running Debian Squeeze and installed js2-mode from the Debian repository.

Comment by arun.geo...@gmail.com, Nov 28, 2011

@champ - C-x `


Sign in to add a comment
Powered by Google Project Hosting