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):


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

cons:
- 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: https://www.ebayopensource.org/p2/vjet/eclipse/
- install VJET as Eclipse plugin

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

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

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)



3 comments:

  1. Hi the issue with the chrome debugger is easily overcome by disabling the VJET debugger in:

    Window - Preferences - General - Startup and Shutdown - VJET Plugin Eclipse Debug

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Node JS Online Training from India . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Online Training

    ReplyDelete