PHPStorm NodeJS and NPM

Hi,

Is there a way to add the NPM path in the NodeJS plugin so node modules appear in 'External Libraries' and are resolved by code completion and navigate?

Thanks

--Gilles

9 comments
Comment actions Permalink

Hi Gilles,

to gain code completion and navigation for node modules that are located outside of the project root dir you can just add directories of these node modules as Content Roots.
Open Settings dialog, select "Directories" there and add content root to the project (there is a button "Add Content Root", see attached screenshot).
Hope this helps.

Thanks,
Sergey Simonchik



Attachment(s):
add-content-root.png
0
Comment actions Permalink

Did you ever get this to work?

I tried Sergey's suggestion and I added node_modules directories individually and also node_modules directory as a whole, but WebStorm does not recognize any of the NodeJS modules for code completion or navigation, even after restarting the application.

0
Comment actions Permalink

Let's consider the following nodeunit example:

exports.testCase = {

    test1: function(test) {
        test.done();
    }

};

If we try to complete 'done' method we'll get 'No suggestions'.
OK, we go to the Settings dialog, select Directories and click 'Add Content Root' button. Next we locate nodeunit module (I have it installed globally, so in my case '/opt/nodes/node-v0.6.17/lib/node_modules/nodeunit'). Click OK and now we are able to complete 'done' method.

David, which module do you want to add to the project? Need to look into particular case.

0
Comment actions Permalink

Sergey,

Thank you for taking the time to help me with this.

I tried your example with nodeunit and it seems to work. Here is a case that I am trying. I know this is supposed to work because it is from a program that nodejs is able to run:

var http = require('http');
var _ = require('underscore');
var Log = require('log');


Now, when I ctrl-click the 'http' inside the require, it opens up the file C:\Documents and Settings\David Pesta\.WebIde40\system\extLibs\nodejs-v0.6.11-src\lib\http.js and allows me to edit it. This is the navigation feature that I expect. Code completion also works when I type in http. I did not need to install anything for http to work and it was automatic.

Now, I did install underscore and log using npm install -d and the program functions properly. Then inside of Webstorm I did Settings, Directories, and Add Content Root and I added "C:\Program Files\nodejs\node_modules\underscore" and I added "C:\Program Files\nodejs\node_modules\log". I hit OK to apply it and I waited for it to index. I even closed Webstorm and re-opened it just to be sure.

Two things I notice:
1. ctrl-hover and ctrl-click of 'underscore' and 'log' inside of the require doesn't do anything.
2. Code completion doesn't work; the code completion box it gives me a huge list of everything that seems to be available to the system.

0
Comment actions Permalink

It was a bug. Fix will be available in a next release.
Thanks for the feedback!

0
Comment actions Permalink

Thanks again for looking into that for me!

0
Comment actions Permalink

Sergey,

If you're interested in finding bugs, I've got some more for you. :)

I read that PHPStorm is the same as Webstorm, but with extra stuff for PHP. I found some important discrepancies in the latest versions between them.

Take a look at this main.js file here, lines 7-11:
https://github.com/mozilla/BrowserQuest/blob/master/server/js/main.js

var ws = require("./ws"),
    WorldServer = require("./worldserver"),
    Log = require('log'),
    _ = require('underscore'),
    server = new ws.MultiVersionWebsocketServer(config.port),


I have just the "server" folder as a project on my hard drive. I figured "client" and "server" should be separate projects.

When I view this main.js file using Webstorm 4.0.1, this is what happens:
- ctrl-click on the word "require" does work
- ctrl-click on "./ws" inside of require does work
- ctrl-click on "./worldserver" inside of require does work
- ctrl-click on MultiVersionWebsocketServer does not work

When I view this main.js file using PHPStorm 4.0.1, this is what happens:
- ctrl-click on the word "require" does not work
- ctrl-click on "./ws" inside of require does not work
- ctrl-click on "./worldserver" inside of require does not work
- ctrl-click on MultiVersionWebsocketServer does work

BTW, I was just trying out PHPStorm on my PHP projects and it is an amazing product. Keep up the great work!

0
Comment actions Permalink

Do you have NodeJS plugin installed in PhpStorm 4.0.1? Ctrl-click on 'require' works if the plugin is installed.
We'll investigate why ctrl-click on MultiVersionWebsocketServer does not work in WebStorm.
Thank you.

0
Comment actions Permalink

This should help with your investigation:

I installed the NodeJS plugin for PHPStorm and its behavior became identical to Webstorm. It fixed require, but it no longer works for MultiVersionWebsocketServer.

Thanks!

0

Please sign in to leave a comment.