Node.js coding assistance in WebStorm

In WebStorm 11 it’s now easier to start working with Node.js projects.

Configuring coding assistance for Node.js

To enable code assistance for Node.js core APIs (and that means you’ll get smart code completion, parameter info and navigation to source code), the only thing you need to do is go to Preferences | Languages & Frameworks | Node.js and npm and check Coding assistance for Node.js.

nodejs_enable

An even quicker way to do the same is to use the Enable Node.js Core library quick-fix. Press Alt+Enter on the highlighted usage of one of the Node.js core modules in the code and then press Enter.

nodejs-quickfix

This will take the Node.js version that is installed on your computer and specified as a Node interpreter in Preferences, and use its sources as a library for coding assistance inside WebStorm.

nodejs-completion

For this Node.js Core library we recommend that you specify the usage scope – the scope of your project where you use Node.js and want to have Node.js-specific coding assistance. By default, it is the whole project.

If you’d like to change the Node.js version you’re using, go back to Preferences and select the new version in the Node.js interpreter field. Click Enable under Code Assistance once again so that WebStorm reconfigures the library. That Node.js version will also be used as the default one for all new Node.js Run/Debug configurations you create.

New inspections for Node.js

WebStorm 11 also adds new handy inspections for Node.js apps. These only work when Node.js core library is enabled.

The Missing require() statement inspection checks that you’ve added a require() call for the module (either a Node.js core module, or one installed from npm, or one of your own) whose methods you’re using.

nodejs-missingrequire

For example, let’s type path.join() in our file. We’ll see a warning, then press Alt+Enter to see the available quick-fixes. The inspection will identify the files that export join method, and will suggest adding a require call for these files or specifically for that method. In our case it will suggest adding require calls to the Node.js core module path.

nodejs-addrequire

Another inspection, Missing module dependency, suggests adding a module to the dependencies or the devDependencies section in your package.json file, if you have required a module that is available on the npm and not yet installed in your project:

nodejs-missingdependency

You can disable these inspections by changing your inspection profile in Preferences | Editor | Inspections. Or just press Alt+Enter on the highlighted code and then, instead of hitting Enter, press Right arrow to see the option to Disable inspection.

nodejs-disableinspection

Develop with pleasure!
– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged . Bookmark the permalink.

52 Responses to Node.js coding assistance in WebStorm

  1. snowdream says:

    Cool!!!

  2. Jakes Lee says:

    I tried to use Webstorm 11. The code assistance for NODE.JS is dead!!

    var express = require('express');
    var router = express.[No Router() recommended]


    var express = require('express');
    var router = express.Router();

    router.[NO POST FUNCTION SUGGESTED]

    The problem above does not exist in Webstorm 10. I have enabled Code Assistance in Node.js and npm

  3. Brock Angelo says:

    Ya, I gotta say that in the latest version (WS 11) the Node.js support is confusing. I still get errors in files that don’t understand what “require” means, even though I’ve enabled the “Node.js Core Library” in my Project and in the Default Settings…

  4. Lucas Pottersky says:

    Is it possible to configure a Remote Node Interpreter that lives inside a Docker container?

    I found out that’s possible with JetBrains’s PyCharm (https://www.jetbrains.com/help/pycharm/2016.1/configuring-remote-interpreters-via-docker.html).

    How can I do the same with WebStorm?

  5. Andrew Yinger says:

    node js coding assistance works great, but for some reason, the editor colors seem wrong after any require statement.

    for example:

    var globalvar = ‘some string’; // globalvar is set to global variable color as expected

    but if i insert:

    var fs = require(‘fs’);
    var globalvar = ‘some string’; // both fs and globalvar are now set to *local* variable color, which is unexpected

    i have tried all the color settings under Editor/Colors & Fonts/ language defaults and /javascript , but nothing seems to fix this issue.

    • Ekaterina Prigara says:

      That’s intended: we assume that if you use ‘require’ that means that it’s a Node.js module and all variables in a Node.js module are local.

  6. Yape says:

    Is there any way to get Node.js coding assistance for single .js files? I use Node.js to write a lot of local tools, and I’d just like the ability to get “intellisense” on Node calls without having to create a project for a single .js file.

    • Ekaterina Prigara says:

      You can enable the Node.js library in Preferences | Languages & Frameworks | Node.js and npm and then hit the Usage scope… button and select the files that use Node.js.

  7. hangu Kang says:

    i have tow questions.
    it is possible, could you answer to me?

    1. Node.js v– Core Modules and Node.js Globals two merge into Node.js Core library ( in Preferences | Languages & Frameworks | Node.js and npm)

    2, then.. after click ‘Node.js Core library’ enable , i wanna check the options but there is only ‘Node.js Core’ without ‘Node.js Globals’ libraries in javascript Preferences | Languages & Frameworks

    • Ekaterina Prigara says:

      I’m not sure I understood your first question correctly. There’s only one library related to Node.js APIs now, it’s called Node.js Core. You can enable that, as described in this blog post, in Preferences | Languages & Frameworks | Node.js and npm.

  8. James Pedid says:

    One challenge I face with WebStorm’s coding assistance is the usage of mapping paths with webpack’s resolve functionality.

    For example, let’s say I have a project with a directory structure of myProjectDir, myProjectDir/src, myProjectDir/app1, myProjectDir/app2, myProjectDir/common, etc. From a file inside of myProjectDir/app1, if I want to find a file using normal node.js, I have to use relative paths, e.g. require(‘../../common/util.js’) in order to load the contents of that file.

    With webpack, however, I can instead set up a resolve function that will map any file that starts with ‘common’ to be mapped to the path myProjectDir/src/common, so then I can require util.js in my app file as require(‘common/util’). This is much more convenient than relative paths because it provides an anchor to which I can name my special folders that have shared content, or my projects such as app1 and app2.

    It would be nice to have access to this functionality in WebStorm (also PyCharm), but unforunately I don’t expect you guys to examine the webpack config for this information; and to be honest, I don’t want to you do so either. Instead, I want to be able to set up these aliases in WebStorm (PyCharm)’s javascript setup, and then have you guys recognize the files based on the aliases I set up there, for the purposes of coding assistance.

    • Dennis Ushakov says:

      Hi James,

      you can follow WEB-13409 and WEB-17254 for intelligent support of WebPack requires. You can set it up manually in WebStorm by selecting myProjectDir/src -> Right click -> Mark as -> Resource root. Unfortunately this won’t work in PyCharm

  9. David Kezi says:

    Good day, i had a similar issue when using Fetch Api instead of XMLHttp but i still get the “unresolved function or method fetch()” even after enabling nodejs core in the preferences.. please help! I’m using webstorm 2017.1

    • Ekaterina Prigara says:

      Hello David, I have replied you on Twitter, however I thought you were referring to browser Fetch API. What do you mean by Node.js Fetch API? If you want to use this module https://github.com/bitinn/node-fetch, then it should be enough just to add it to your package.json file and install. You don’t need to do the steps I mentioned on twitter.

      • Alex says:

        Yes, he’s talking about browser fetch api, not about NodeJs. This one https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.
        Same problem in last PhpStorm. It says unresolved function or method name inspite of absolutely working code. What should be enabled to make IDE aware of this method?

        • Ekaterina Prigara says:

          Sorry, the blog post above is about Node.js, so I assumed that the question is about Node.js.
          To provide the IDE with the Fetch API definitions it’s recommended to use a TypeScript definition file – in Preferences | Languages & Frameworks | JavaScript | Libraries click Download and start typing “isomorphic fetch”, select the item and click Download.

  10. Halisson Alves says:

    Nice… thanks to share with us!

  11. Pruthvi says:

    I can’t enable Node js core library

    • Ekaterina Prigara says:

      Can you please provide a bit more info about that? What WebStorm version do you use? What Node.js version do you have? Is it selected on the Preferences | Languages & Frameworks | Node.js and npm page?

    • Elie says:

      Same problem for me! It was working before but now every time I enable node.js coding assistance the Configuring Node.js Support... popup window appears as always but once the popup has disappeared nothing changes. WebStorm still not recognize require and node libraries like fs or readline. I tried to restart, enable it through default settings, project settings and through code hints but nothing works.

      WebStorm 2016.3.2
      Build #WS-163.9166.30, built on December 12, 2016

      • Ekaterina Prigara says:

        What Node.js version do you use? Please try the latest WebStorm 2017.2. We don’t test new Node.js version with the older IDE versions, so it might have happened that some changes in node broke the integration.

  12. Troy says:

    I can enable coding assistance, but it doesn’t appear to work within a typescript file, only within javascript files.

  13. Eli Ponyatovski says:

    When I am trying to enable NodeJs support it waits some time on the progress bar and then quits without adding the support. Any idea?

  14. mo says:

    Did not work with node.js 9.1.0

  15. Vlad says:

    Is there any plugin to display a dependency version in the editor ?
    import {Observable} from “rxjs/Observable”; // rxjs@^5.5.5

  16. Sooriyan C says:

    I Will Try to
    But , Error is occur
    “file node.js not directory”
    what will be do

  17. David says:

    Same problems here with the latest version of WebStorm, no autocomplete for express objects in particular, and overall autocomplete for non-core node modules that are imported and used in the project is very poor.

    WS v2017.3.4 on Mac

    • Ekaterina Prigara says:

      Hello David,
      Can you please tell us a bit more about the problems?
      For some modules that are written in a very dynamic way (and Express is one of them), we recommend adding the TypeScript definitions files to the WebStorm’s libraries. To do that, please press Alt-Enter on the require statement and select ‘Install TypeScript definitions’:

  18. Pavel says:

    Hello! I can’t enable this feature =(

    When I trying enable code assistance pressing on the button “Enable” nothing happens. I try do it from “Languages and Frameforks” and hints – nothing.
    Node interpreter: ~/.nvm/versions/node/v8.4.0/bin/node
    Webstorm: 2018.2.5. And i had this problem on previous version (2017…)

    In “Languages and Frameforks / javascript / libraries” i don’t see Nodejs Core Modules

    Bash: which node // /Users/$username/.nvm/versions/node/v8.4.0/bin/node

  19. i am facing the same the same problem . but there is option for enabling core lib in webstrom
    snapshot of that is given in link https://photos.app.goo.gl/i51LzTeCrvSn4nbr9

    • lena_spb says:

      Hello!

      not sure I understand what problem you refer to… Do you have issues resolving Node.js core functions, like require(), despite having the coding assistance enabled? It must be https://youtrack.jetbrains.com/issue/WEB-35836. Please disable Node.js coding assistance in Settings | Languages & Frameworks | Node.js and NPM, apply and then re-enable it to get libraries downloaded – does it help?

Leave a Reply

Your email address will not be published. Required fields are marked *