CodeZest: Setting Up WebStorm for io.js

I use JetBrains WebStorm as the main IDE for coding JavaScript. I'm using it currently for coding with io.js, which is the new port off Node.js and I'm using this IDE to work with other libraries like express.js, mocha.js, and so on.

Initially I was in the editor trying to setup my project for a website recode and was coding some express.js code to get a web server and page up and running and noticed that JSHint and JSLint had trouble recognizing io.js (Node) and express.js in terms of JSHint and JSLint intellisense.

I found out there's a fair amount of configuring in WebStorm preferences that you need to be aware of and set for io.js, adding libraries like express.js, and so on.

This will give a good list of what to do in general to get everything set right and intellisense working right for node.js, io.js, and any extra libraries you're tacking on (such as express.js, etc.).

Here's What I Saw initially

Initially before I started to have to fiddle with WebStorm preferences, this was the state of everything. I had created a new project and initial boilerplate files and some initial code in express.js.

Notice JSHint and JSLint's intellisense has no clue what this node and express.js code is.

Preferences | Language & Frameworks | Javascript | Libraries

Preferences | Language & Frameworks | Node.js and npm

Here's What To Do

Ensure that you have a root package.json File With Correct Dependencies Defined

In the command prompt (bash), cd to the root project folder then type npm init
This will take you through a wizard to quickly and easily create your initial package.json file
Now you should have a root package.json meaning it's sitting in the root project folder
(My root folder is Website)

Ensure Your App's JS file is Inside Your node_modules Folder

Make sure your app.js (mine is called dimecasts.js) file is inside your node_modules folder that sits in the root of your project's parent folder

Preferences | Languages & Frameworks | JavaScript | Code Quality Tools

Make sure JSLint and JSHint validation are enabled; those should always be enabled period in WebStorm no matter what you're working on. The point here was also to make sure that intellisense for both these tools could recognize Node and Express.js syntax..which was not working originally since we had to change some config settings as we're about to do below for Node and express.

Preferences | Editor | Inspections | JavaScript | Code Quality Tools
Enable JSHint and JSLint here also

Preferences | Plugins
This should have already been enabled by default when you installed WebStorm but double check that Node is enabled

Preferences | Languages & Frameworks | Node.js and npm

Change the path for Node interpreter to iojs

Now go to https://iojs.org/dist/ and download the source tar.gz file for whatever version you have for io.js. Mine was 1.3.0 when I installed io.js.

Download the file to a local folder; I copied mine to /usr/local/bin/..Click Then configure and browse to that file. Mine was iojs-v1.3.0.tar.gz

Now it should be all set after clicking Configure:

Preferences | Languages & Frameworks | JavaScript | Libraries

Now you should see an entry for Node.js Core Modules for the source you just configured in the previous step.
You may need to close and re-open Webstorm to see this or

File | Invalidate Caches / Restart

One you are able to see it, enable it.

Preferences | Languages & Frameworks | JavaScript | Libraries

Double click on the Node.js Core Modules item you just enabled and it'll open an Edit Library window.

Set it to Project Visibility

Be sure to also check the box for "Node.js Globals".

Now we need to add express.js library in here so that intellisense picks up syntax for this library.

Cilck the Add button and attach a file.