Friday, July 13, 2012

Setting up VJET as your Eclipse Node.JS IDE

First of all, after going through the setup process and found out some limitations about VJET, I am not really sure I'd recommend anyone to use it. The Eclipse JavaScript Development Tools (JSDT) as part of Web Tools Platform (WTP) is pretty much enough for JS IDE.

Here is a quick rundown of pros and cons of VJET (I only spent 1-2 hours playing with it):

- free and backed by ebay
- relatively active (last release was 3 months ago)
- code assist for Node.JS and many other common JS libraries.

- Node.JS lib was outdated, currently from node v4 I believe
- Cause launcher issues with chrome JS debugger (this is the biggest con to me)
- does not support Eclipse 4.2 Juno yet (has some plugin dependency on jetty, might not caused by VJET itself)

For those still interested to try it out, here are the quick instructions to set it up:

1. download Eclipse Indigo (VJET does not support JUNO yet), I picked JavaScript development distro

2. install VJET plugin:
- add new update site:
- install VJET as Eclipse plugin

3. download VJET JavaScript Type Libraries in zip files, each zip is an Eclipse project
- you can only download if you don't need others (it is for node v4, last modified was 4/18/2011)

4. import as project into the workspace
- File->Import...
- Genearl->Existing Projects into Workspace
- Select archive file->Browse to

5. create a sample helloworld VJET project add NodejsTL project to your helloworld VJET project build path
- create a new vjet project helloworld
- select helloworld project
- right-click -> Build Path -> Configure Build Path
- under Projects tab, add NodeJSTL project to the build path

6. configure external tool to run under Node.JS (assuming your have node installed already)
- configure external tool (see screenshot)
- select the JS file to run
- run external tool and you should see output in the Eclipse console

Bonus: JSHint Plugin

The JSDT plugin provides some realtime syntax validation, but there is a really nice jshint plugin. The best part is that it allows you to do per-project checks, it even allows you to switch to use jslint instead of jshint (not sure if you would want to).

Note that JSHint plugin is not enabled by default, you need to turn it on per project:
- select the project
- open project properties, select JSHint and select JS files (see screenshot)